When you create or open a chat widget in your account, you'll see the Widget tab in the left panel. This tab lets you customise the features of your chat widget, including choosing a theme, updating the avatar image, and setting where the widget should appear on the page. Read on to find out how to adjust the look and feel of the chat widget using the different styling options available.

Styles

Widget Placement

With live chat widgets, you can choose between two display types: embedded widgets that open inline with your page, or sticky widgets that float in the corner. Embedded and sticky widgets can be used together across different pages.

Chat Prompt

Toggle the Chat Prompt switch to show a message above the chat widget. This is a useful way to catch the visitor's attention and let them know the tool is available. You can also choose whether to display the avatar image by selecting the relevant option.

Chat Icon

Choose the icon that best suits your needs and fits the widget's intended purpose. To add a custom icon, select the media element and upload an image from your Media Library.

Theme

The Themes section lets you choose the colour scheme of the widget. Pick from the available options, or click the palette to set your own colour scheme.

Welcome Message

Enter the welcome message shown to new website visitors. The text should either offer support or include a marketing prompt to encourage visitors to engage with the chat widget.

Return Visitors

If you're tracking visitors on your website, you can create a custom message for returning visitors and make it more personal. Use the {{name}} variable to greet them by name.

Widget Customisation

Avatar Image

Toggle the Allow Avatar Image option to display a photo of the customer service representative who will be helping users. This adds a personal touch to the interaction and can improve client engagement. Alternatively, you can upload your company logo instead.

For the best display, use an image under 300 KB with dimensions of 300px \* 300px.

Widget Position

Select your preferred widget position from the available options. This sets where the chat widget appears in a desktop browser.

Widget Dimension

Finally, configure the widget dimension settings. The widget can adjust automatically to the screen size, or you can set a standard size of your choosing.

Now you know how to customise the look and feel of the chat widget. Read the other articles in this section to find out more about the Chat Widget.