Chat Widget Customization
From the Chat Widget section you can adapt the chat's appearance to your brand and website. After adjusting your settings, save and check the result on your published site.
Color and Position
Choose a color that is consistent with your brand and on which the text and icons are easy to read. You can place the chat button in the bottom-right or bottom-left corner of the page.
When choosing a position, consider the cookie notice, shopping cart and other fixed buttons. Leave enough space so the visitor can open the chat and perform the other actions on the page.
Refresh the code when color or position changes
Title and Greeting
The chat title helps the visitor understand which business or agent they are talking to. On your default agent, keep your brand and company information up to date; if you use a different agent, keep that agent's name and appearance information up to date.
At the start of the chat, a greeting message is shown to the visitor. The standard greeting text is prepared according to the widget's interface language.
The panel also has title and greeting text fields. You can see the texts you prepare in these fields in the preview. To check the title and first message the visitor encounters, open the chat with a clean browser session on your site.
Keep your greeting texts short and clear. A sentence that tells the visitor what you can help with is enough. For example: "Hello! How can we help you with our products or your order?"
Avatar
For the image shown in the chat header, you can use these options:
- Default icon: Shows the ready-made chat icon.
- Brand logo: Uses the logo you added for your business. To use this option, first add a logo to your brand information.
- Custom image: Lets you upload the image you choose.
- No image: Removes the avatar.
Choose a simple image that is understandable even at a small size. Images with long text are hard to read in the chat header.
How Is the Preview Used?
The preview shows the widget's appearance on a sample conversation. You can use it to check the appearance of color, avatar and texts.
The preview does not start a real customer conversation. To check AI answers, the customer information form and human handoff, also test through the widget on your site.
Answer Feedback
When you turn on answer feedback, visitors can rate AI answers positively or negatively. These ratings help you understand which answers are found useful.
Satisfaction Survey
The satisfaction survey lets the visitor rate the chat experience with stars. You can turn on the survey and determine when it will be shown by choosing one of the message count options offered in the panel.
Answer feedback is used to rate a single answer, while the satisfaction survey is used to rate the chat experience. You can set these two options separately according to your need.
Final Check
After saving the settings, refresh your site. Check the appearance on desktop and phone; look especially at the button's position, the title's readability and the message compose area.
To collect information before the chat, move to the Customer Information guide; to include your team in the conversation, move to the Human Handoff guide.
Related Topics
Customer Informationβ
Pre-chat form
Human Handoffβ
Handoff to agents
Installationβ
Adding the widget to the site
Was this page helpful?