Custom styling of Elevio’s elements comes with multiple restrictions:

First, you should check you can’t achieve what you want with display settings.

Second, we don’t test each release against your custom styling so Elevio could break on your site at any time. For example, if you override our font we can’t guarantee all text will be displayed legibly.

Third, there are only some documented CSS selectors (see below). The undocumented CSS selectors appear in the DOM as something like: ._1gtFd. You are, of course, free to use them but be aware that they can change at any time and we make no guarantees about their availability.

Fourth, any custom styling will not apply to articles since they are displayed in an iframe. To style articles see the embeddable_css_file option in setSettings.

With that said, you can use the following CSS selectors to style certain elements:

  • #_elev_io
    This ID is on the root of every Elevio element.
  • .elevioReset
    This class is on the root of every Elevio element. It’s used to set base styling (e.g. font, etc). See the generated styling for all the options.
  • ._elevio_widget
    On root of the Assistant.
  • ._elevio_launcher
    On root of the launcher.
  • ._elevio_popup
    On root of all popups.
  • ._elevio_tooltip
    On root of all buttons (AKA tooltips).
  • ._elevio_tooltip_1234
    On root of all buttons, where 1234 is the actionId (the associated article or module ID).
  • ._elevio_nothing
    On root of buttons that have display type nothing.
  • ._elevio_underline
    On root of buttons that have display type underline.
  • ._elevio_qmark
    On root of buttons that have display type qmark.
  • ._elevio_pulse
    On root of buttons that have display type throbber.
  • ._elevio_module_icon
    On root of all the module items in the menu.
  • ._elevio_module_icon_1234
    On root of all the module items in the menu, where 1234 is the ID of the module.
  • ._elevio_search
    On root of search component