Customize your chat widget appearance

Conversations allows you to customize your chat widget to match your branding colors and tone of voice from Conversations > Settings > Chat widget. You can customize the style and texts of your chat widget.

💡 Good to know
If you’re a developer or work with a developer, you can go further in the customization of your chat widget by providing your visitors with a translation for your chat widget in a language not supported by Conversations, or by using a custom color, position, and size for your chat widget. To learn more, check out our API documentation.

Choose your support languages

Select the different languages in which you can talk to your visitors. Your chat widget languages are the same as your support languages chosen in Conversations > Settings > Preferences

You can select as many languages as you need, and default messages are automatically translated. Remember that if you edit default texts, you must edit all the other default texts in the other languages.

conversations_chat-widget-lang_EN-US.gif

💡 Good to know
Chat widget language will be selected based on the visitor’s browser language. If the visitor's browser language is not supported by Conversations, the default language will be English. 

Customize your chat widget design

With Conversations, you can customize your chat widget colors, style, and position on your web page. This allows you to have a custom chat widget that matches your brand and to choose how your chat widget appears to your visitors.

To customize your chat widget appearance, go to the Appearance section from Conversations > Settings > Chat widget.

Chat widget color

Conversations allows you to choose the color and style of your chat button. That way, you can completely customize it to match your website and brand design. 

The default chat widget button is blue, but you can choose another color from the Chat palette that offers many pre-defined colors. You can also choose a color from the color picker or enter your color hex code.

Color the Chat header with the selected color if you want the chat widget to contrast more with the rest of your website when open. Check the preview on the right of your screen to see what your chat widget looks like with your selected color. 

conversations_chat-widget-color_EN-US.gif

💡 Good to know
We recommend choosing a color that has a great contrast with the background color of your website to comply with accessibility standards. For example, if your website background color is black, you should choose a light color like yellow or white to help visitors spot the chat widget button. 

Chat widget design and position

You can choose what your chat widget button looks like and where it is placed on your website page.

From the Chat button style drop-down list, you can choose the design of your chat widget:

  • Round with one or two bubbles, or
  • Tab.
❗️ Important
We do not offer the possibility to upload a custom chat button style. You can choose which chat button style you want between the two round options and the tab option only. 

From the Chat button position drop-down list, you can choose where your button will be placed on your website page. 

💡 Good to know
We recommend leaving your chat widget button At the bottom of the screen, on the right to increase the number of chats. It is the most common position so your visitors will not search for it.

Check the preview on the right of your screen to see how and where your chat widget will appear on your screen:

conversations_chat-widget-style-position_EN-US.gif

Customize your greeting messages

With Conversations, you can customize the greeting messages of your chat widget to match the tone of voice of your brand.

Scroll to the Chat widget texts section to edit the greeting messages for your Live chat (Online) or Messenger (Offline, Invisible) modes. Delete the existing greeting messages from the text fields and write your own. 

❗️ Important
If you decide to customize your greeting messages for your Messenger mode, we highly recommend clearly specifying to your customers that they are talking to a bot especially if you ask for their details with the contact form bot

A preview displays on the right of your screen to check how the chat widget will appear to your visitors. Switch your status from Online to Offline to display the respective previews. To restore the default greeting messages, delete everything from the field and click somewhere outside of it.

conversations_chat-widget-texts_EN-US.gif

❗️ Important
If you choose to have different support languages, remember to update the greeting messages in all languages by clicking on the tabs at the top of the Online editable chat widget preview.

⏩ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

💬 Was this article helpful?

8 out of 11 found this helpful