Upon creating or opening a chat widget in your account, you will notice the Widget tab on the left panel. This tab allows you to customize the features of your chat widget including selecting a suitable theme, updating the avatar image, and choosing where the chat widget should be positioned on the page. Read on to learn how you can customize the look and feel of the chat widget with different styling options and customizations.
Styles #
Widget Placement #
With Live chat widgets, you can select between two different types of display for your widget: 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 display a message above the chat widget. This serves as an effective method for capturing the user’s attention and ensuring they are aware of the tool’s availability. Additionally, choose whether to display the avatar image by selecting the relevant option.
Chat Icon #
Choose the icon that best suits your needs, ensuring it aligns with the widget’s intended purpose. Add custom icons by selecting the media element and uploading the image from your Media Library.
Theme #
The Themes section allows you to choose the color scheme of the widget. Choose from available options, or click the palette to configure the color scheme according to your preference.
Welcome Message #
Enter the welcome message to be displayed for a new website visitor. The text here should either offer support or a marketing communication to get visitors to click on the chat widget.
Return Visitors #
If you are tracking visitors on your website, you can create a custom message for return visitors and tailor the message to be more personalized. Utilize the {{name}} variable to greet returning visitors by name.
Widget Customization #
Avatar Image #
Toggle the Allow Avatar Image option to display an image of the customer service representative who will be assisting users. This enhances the personalization of the interaction and fosters better client interactions. Alternatively, you may upload an image of the company logo.
For an optimal display, choose an image less than 300 KB with dimensions 300px * 300px.
Widget Position #
Select the preferred widget position from the available options. This is the position of the chat widget while in a desktop browser.
Widget Dimension #
Finally, configure the widget dimension settings, which can be automatically adjusted according to the screen size, or a standard size of your choosing.
Now you know how to customize the look and feel of the chat widget. Read the other articles in this section to learn more about the Chat Widget.
Frequently Asked Questions #
What does the Widget tab control? #
The Widget tab lets you customize your chat widget’s appearance, including its theme, avatar image, chat icon, welcome message, and its position and dimensions on the page.
What is the difference between embedded and sticky widgets? #
Embedded widgets open inline within your page, while sticky widgets float in the corner of the screen. With Live chat widgets you can use both types together across different pages.
How do I personalize the message for returning visitors? #
If you are tracking website visitors, enable a custom return-visitor message and use the {{name}} variable to greet returning visitors by name.
What image size should I use for the avatar? #
For optimal display, use an image under 300 KB with dimensions of 300px by 300px. You can use a representative’s photo or your company logo.
Can I use a custom chat icon? #
Yes. Choose from the available icons, or add a custom icon by selecting the media element and uploading an image from your Media Library.
How do I change the widget’s color scheme? #
In the Theme section, choose from the available color options or click the palette to configure a custom color scheme that matches your brand.
