# 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="https://3559248360-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1Vse36vHZbUu8eaHapRv%2Fuploads%2FZQk3OxbstXSixeTo6sJJ%2FChat_Styles.jpg?alt=media&#x26;token=288eb25d-af7e-43d2-9e37-64b530d5fff8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3559248360-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1Vse36vHZbUu8eaHapRv%2Fuploads%2FBr8EtWDptWlra4YdpwWQ%2FChat_Closed_Styles.jpg?alt=media&#x26;token=a7749db5-fd0a-49da-a594-ac5ae1df161c" alt=""><figcaption></figcaption></figure>