Widget personalization

The Appearance and Advanced sections of the Widget screen control how the chat widget looks on your site: its theme, font, the "Powered by Fibly AI" footer, the colors of individual elements and, on the highest level, your own CSS. How much of it you can change depends on the personalization level included in your plan.

The basics described in Widget appearance work on every plan: the primary color, the text color on primary, the button and window texts, the launcher icon or image, and the button placement.

Personalization levels

Each plan comes with one level:

• Free plan: the Free level.
• Starter plan: the Basic level, listed on the pricing page as basic personalization.
• Professional plan: the Advanced level, listed on the pricing page as full personalization.
• Enterprise plan: the level is set in your contract. It is normally Advanced.

In the dashboard, options that your plan doesn't include are locked and marked with the level that unlocks them, for example "Available on plans with Advanced personalisation".

Themes

A theme changes the character of the whole widget: corner rounding, shadows, borders and backgrounds. It works together with your primary color, so the widget stays in your brand colors whichever theme you pick.

• Default: the widget's standard look, with slightly rounded corners and soft shadows.
• Flat: no shadows, small corner rounding, thin borders around the bot's messages and a white chat background.
• Brutalist: thick black borders, square corners, hard black shadows offset to the side and a bold, uppercase header.
• Soft: large rounded corners, diffuse shadows tinted with your primary color and a chat background with a light tint of the same color.
• Minimal: no shadows, a white header with dark text separated by a thin line, and bot replies shown as plain text without a bubble.
• Glass: a semi-transparent chat window that blurs the page behind it, with rounded corners and subtle borders.
• Playful: very rounded corners, pill-shaped input and buttons, bot bubbles tinted with your primary color, and a chat button that tilts slightly when the cursor is over it.

Font

The Font field sets the typeface used for all text in the widget. On every plan you can choose one of five fonts: Inter, Roboto, Lato, Open Sans and Montserrat. System default uses the font of the visitor's operating system and is the setting the widget starts with.

On the Advanced level you can also search the full Google Fonts catalog. The list only includes families that support Polish and German characters, so text such as "ą", "ł" or "ß" never falls back to a different font.

If your site uses a strict Content Security Policy, allow fonts.googleapis.com for styles and fonts.gstatic.com for fonts. Otherwise the browser blocks the font and the widget uses the system font instead.

"Powered by Fibly AI" footer

Below the message field the widget shows a short "Powered by Fibly AI" line in the visitor's language. On the Basic and Advanced levels you can hide it by unticking Show 'Powered by Fibly AI' in the Appearance section.

Advanced colors

On the Advanced level, under Element colours in the Advanced section, you can set the color of ten individual elements: the header background and text, the chat background, the background and text of bot messages, the background and text of visitor messages, the background and text of the input field, and links.

Leave a field empty to keep the color from the theme. Reset to theme clears your value. Colors set here take priority over both the theme and the primary color.

Corner rounding

On the Advanced level, under Corner radius in the Advanced section, you can also set how rounded the corners of four elements are, in pixels from 0 to 40: the chat window, the message bubbles, the message field with the send button, and the chat button. 0 gives square corners.

Each theme has its own rounding, and an empty field keeps it. Reset to theme clears your value. The chat button is slightly rounded when it shows text and round when it shows only an icon; a value you set applies to both.

Live preview

The preview next to the settings shows the widget with a sample conversation and updates as you change the theme, font, colors, corner rounding or custom CSS. You can try any option there before you save.

Changing your plan

When you move to a plan with a lower level, Fibly keeps all your saved settings but stops showing the ones your new plan doesn't include. On your site, a locked theme is replaced by Default, a locked Google font by the system font, and advanced colors and corner rounding by the theme's own. A hidden footer appears again, and custom CSS is not applied. In the dashboard these settings are marked "Not shown on your current plan".

When you upgrade again, the saved settings return to your site straight away, with nothing to set up a second time. Plan changes are described in Changing your plan.

What's next

On the Advanced level you can go further with your own styles. The Custom CSS article lists the class names and variables you can use, with examples.