> For the complete documentation index, see [llms.txt](https://docs.userdesk.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.userdesk.io/product-guides/customize-widget-css.md).

# Customize Widget CSS

{% hint style="info" %}
Available since widget version 1.10.0
{% endhint %}

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(``)
```

{% hint style="info" %}
If you want to update multiple elements, you need to define all the styles.<br>

For instance:

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

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

{% endhint %}

## CSS classes

These are the classes currently present

<figure><img src="/files/r1FOA0OX1pjss6YzdFMA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/8rOMEjpGEYYoH3thkYdZ" alt=""><figcaption></figcaption></figure>