Customize Widget CSS

Use CSS to customize the look and feel of the widget

Available since widget version 1.10.0

In order to override the default CSS styles of the Chat bubble widget, the widget exposes a global function Userdesk.setCustomCSS(<css string>).

To globally update the text settings use

Userdesk.setCustomCSS(`
  * {
    letter-spacing: 0.05em;
  }
`)

To update the settings of the header use

Userdesk.setCustomCSS(`
  .userdesk-header {
    letter-spacing: 0.1em;
  }
`)

To reset the CSS settings use

Userdesk.setCustomCSS(``)

If you want to update multiple elements, you need to define all the styles.

For instance:

Userdesk.setCustomCSS(`
  * {
    letter-spacing: 0.05em;
  }

  .userdesk-header {
    letter-spacing: 0.1em;
  }
`)

CSS classes

These are the classes currently present