Cookie consent

This website uses cookies. By agreeing to all of them, you accept their use for marketing, personalising advertising content, analysing website traffic and other activities related to running our business. You can find detailed information about cookies in our privacy policy.

Skip to content

Widget appearance

How to match the colors, button text, and chat window title to your brand.

By default the widget uses Fibly's neutral color scheme, but in three clicks you can match it to your site's visual identity.

Button text

The Chat button text field sets the label shown in the bottom-right corner of the page when the widget is collapsed. By default it shows a label like "Chat", but you can enter your own text, for example "Help 24/7" or the name of your assistant.

Short text (up to 20 characters) looks best. Longer labels may be truncated on narrow screens.

Chat window title

The Chat window title field sets the label shown in the header of the expanded conversation window. This could be your company name ("Chat with Black Arrow Store"), for example, or the name of your virtual assistant ("Asia, Fibly assistant").

Colors

There are two color fields available:

  • Primary color: the background of the chat button, the window header, and the bot's message bubbles. Enter a hex value (for example #721CB0) or use the color picker.
  • Text color on primary: the color of text displayed on the primary color background. Choose a value that gives good contrast and readability, usually white (#FFFFFF) or a very dark color.

Live preview

On the left side of the screen you'll see a preview of the widget that updates in real time. It shows exactly how the widget will look once your changes are live on the site.

What's next

Once the appearance is polished, set up the welcome notification to encourage customers to open the chat.