#1823: 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.

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

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

.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:

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

button {
  border-radius: 20px;
}

Instead, use the public widget classes:

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

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

Customization example:

.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:

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.

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

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

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

Adaptive styles

You can use CSS media queries if necessary:

@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:

.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.