# CSS styles in the widget
## Branding a widget using CSS

The appearance of the widget can be changed in the brand settings. This does not require editing the widget connection code or placing a separate CSS file on the site.

## Adding custom styles

1.  Go to **Settings - Manage brands.**
2.  Open the brand that is used by the widget.
3.  Add the CSS code to the **Theme css** field.
4.  **Save** the changes at the bottom of the page.
5.  Refresh the page where the widget is located and check the result.

Only CSS code should be added to the **Theme css** field — style tags are not required.

:::note
Added styles are automatically applied to all widgets using this brand.
:::

## CSS-классы виджета

All public CSS classes of the widget have the prefix: `.sw-widget-`
For example:

```css
.sw-widget-body
.sw-widget-container
.sw-widget-header
.sw-widget-header-title
.sw-widget-header-button
.sw-widget-chat-input
.sw-widget-login-title
.sw-widget-login-button
```

It is **not recommended** to use Bootstrap's internal classes or bind rules to a specific HTML structure. Internal classes and markup may change when the widget is updated.

## Limiting the scope of styles

The **Theme css** filed is also used for branding the main platform. Therefore, do not add global selectors that can change the appearance of elements outside the widget.

**Not recommended:**

```css
body {
  font-family: Arial, sans-serif;
}

button {
  border-radius: 20px;
}
```

Instead, **use the public** widget **classes**:

```css
.sw-widget-body {
  font-family: Arial, sans-serif;
}

.sw-widget-login-button {
  border-radius: 20px;
}
```

**Customization example:**

```css
.sw-widget-body {
  font-family: "Trebuchet MS", system-ui, sans-serif;
}

.sw-widget-container {
  border-radius: 24px;
}

.sw-widget-header {
  background-color: #ffffff;
}

.sw-widget-header-button {
  color: #CACFDE;
}

.sw-widget-header-button svg {
  width: 24px;
  height: 24px;
}

.sw-widget-header-title {
  left: 28%;
  font-size: 20px;
  font-weight: 400;
  color: #000000;
}


.sw-widget-login-title {
  display: none;
}

.sw-widget-chat-input {
  background-color: #dbdbdb;
}

.sw-widget-login-button {
  color: #407aff;
  background-color: #ccdcff;
  border-color: #ccdcff;
  font-weight: 600;
  width: 225px;
  margin: 0px auto;
  border-radius: 20px;
  line-height: 1.8;
}
```

## The dimensions of the elements

The widget is displayed inside an `iframe`, the dimensions of which are limited. Significant changes in the sizes of the components can lead to layout problems:

*   text or elements truncation;
*   appearance of unwanted scrolling;
*   components overlapping;
*   buttons going beyond the widget boundaries;
*   incorrect display on mobile devices.

It is **not recommended** to significantly change without necessity:

```css
width
height
min-width
min-height
padding
margin
font-size
position
transform
```

For example, a fixed width that is too large may not fit into the widget.

```css
/* NOT RECOMMENDED */
.sw-widget-login-button {
  width: 500px;
}
```

If the size still needs to be changed, it is preferable to use relative constraints:

```css
.sw-widget-login-button {
  width: 225px;
  max-width: 100%;
}
```

## Adaptive styles

You can use CSS media queries if necessary:

```css
@media (max-width: 480px) {
  .sw-widget-header-title {
    font-size: 16px;
  }

  .sw-widget-login-button {
    width: 100%;
  }
}
```

After making changes, it is **recommended** to check the widget at least:

*   in the closed and open states;
*   on the login page;
*   in the chat list and inside the chat;
*   on a computer and mobile device;
*   with short and long texts;
*   in all languages used.

## Rule priority

If the custom rule is not applied, first try increasing the specificity of the selector:

```css
.sw-widget-body .sw-widget-header {
  background-color: #ffffff;
}

`!important` Should be used only as a last resort, excessive use of !important makes further styling and maintenance difficult.

```