Widget appearance
How to match the colors, chat button, texts and placement of the widget to your brand.
By default the widget uses Fibly's purple with white text, but in a few clicks you can match it to your site's visual identity. All the settings below are on the Widget screen in the dashboard.
Colors
In the Appearance section there are two color fields:
- Primary colour: the background of the chat button, the window
header, the customer's message bubbles and the send button. Enter a
hex value (for example
#721CB0) or use the color picker. - Text colour: 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.
The same section also has the theme, font and "Powered by Fibly AI" footer settings, described in Widget personalization.
Chat button
The Launcher section controls the button visitors click to open the chat.
- Button content: choose Icon to show one of the built-in icons (picked under Launcher icon), or Image to upload your own Avatar image: PNG, JPEG or WebP, up to 5 MB. After uploading, you can crop the image to a circle. The icon or avatar also appears in the chat header and next to the bot's messages.
- Position: the corner of the screen the button sits in: Bottom right (the default), Bottom left, Top right or Top left.
- Horizontal offset (px) and Vertical offset (px): the distance of the button from the edges of the screen, from 0 to 200 pixels. The default is 16.
- Mobile display: how the open chat window looks on phones. Fullscreen (the default) covers the whole screen; Floating shows a panel inset from the edges, with your site still visible behind it.
Button text
The Button text field, in the Texts & messages section, sets the label shown next to the icon on the collapsed chat button, for example "Help 24/7" or the name of your assistant. Leave it empty for an icon-only button. The text can be up to 64 characters long, but a short one looks best.
Chat window title
The Chat window title field, in the same section, 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").
Live preview
Next to the settings you'll see a preview of the widget that updates in real time, before you save. On wide screens it sits on the right; on narrower screens, click Show preview to display it above the settings.
What's next
Once the appearance is polished, set up the welcome notice shown at the start of every conversation.