Custom CSS

When themes and colors aren't enough, you can write your own CSS for the widget. You'll find the Custom CSS field on the Widget screen, in the Advanced section. It is available on the Advanced personalization level, which comes with the Professional plan. The Widget personalization article explains what each plan includes.

How your CSS is applied

The widget runs in its own isolated part of the page. Your CSS is applied only inside the widget, so it can't change anything else on your site, and your site's own stylesheets don't reach into the widget either.

Styles are applied in this order, and each step overrides the one before:

1. the theme,
2. the primary color and the text color on primary,
3. advanced colors set for individual elements,
4. your custom CSS.

Your CSS is added last, and the theme and the advanced colors are written so they never outrank it. Any rule of yours with at least one class selector, such as .fibly-header or .fibly-root, wins over the theme and over the advanced colors. You don't need longer selectors to beat a theme.

The live preview on the settings page applies your CSS as you type, so you can check the result before saving.

Limits

• The CSS can be at most 20 KB.
• @import is not allowed. To change the typeface, use the Font setting instead.
• The CSS can't contain a closing </style> tag.

The dashboard shows an error and won't save CSS that breaks one of these rules.

Class names

Every main element of the widget carries a class starting with fibly-. Use these classes in your selectors rather than other class names you might find in the page source, which can change at any time.

Some elements carry more than one class:

• The typing indicator is displayed as a bot message, so it has .fibly-message--bot as well as .fibly-typing. A rule for .fibly-message--bot also changes the typing indicator. To leave it out, use .fibly-message--bot:not(.fibly-typing).
• The welcome notice is also a notice, so it has both .fibly-welcome-notice and .fibly-alert. Other notices have only .fibly-alert, even when they appear before the visitor's first message. In conversations that started before this class was introduced, the welcome notice has only .fibly-alert.

Variables

Colors, corners and shadows are defined as CSS variables. Changing a variable is often simpler than overriding individual rules, because every element that uses it changes at once. The defaults below are the values of the Default theme; other themes change some of them.

Set variables on .fibly-root to change them for the whole widget. A value you set there wins over the theme and over the advanced colors. To change a variable in one place only, set it on that element instead, for example on .fibly-panel for the chat window or on .fibly-launcher for the chat button.

Examples

A larger header title

.fibly-header-title {
  font-size: 18px;
  font-weight: 600;
}

Square message bubbles

.fibly-root {
  --fibly-bubble-radius: 0;
}

This changes the bubbles of the bot, the visitor and your team at once. To square only the visitor's messages, target them directly:

.fibly-message--customer .fibly-bubble {
  border-radius: 0;
}

A custom link color

.fibly-root {
  --fibly-link: #0b7a53;
}

If you only want to change the link color, the Links field in Advanced colors does the same without any CSS.

Stable class names and variables

The classes and variables listed on this page are a fixed part of the widget, and we keep them working when the widget changes. If we ever need to rename or remove one, we'll announce it in advance so you have time to update your CSS. Other class names that appear in the page source are internal and can change without notice, so don't rely on them.

After a plan change

If you move to a plan without the Advanced level, your CSS stays saved but isn't applied on your site. It is applied again as soon as you return to a plan that includes it.