Customise the chat widget

Learn to customise your Chat widget and match it to your brand.

Overview

The Chat widget sits on your website, so you want it to look good. Use our customisation settings to make your Chat widget look the part.

Customising the chat widget

To customise the look of your chat widget:

Step 1: Go to Chat > Settings in Engagement Cloud and select the Widget tab.

1-chat-colour-picker.png

The chat settings page

Step 2: Pick your colours
Use the Colour picker to change the colours of your chat widget. Get creative or use your brand's colour scheme. It's up to you.

The colour picker uses hex colour codes. Enter your hex colour code or click the box to open the visual colour selector.

You can edit the following colours:

  • Main colour
    The colour of the top bar, visitor speech bubbles, and send button. Enter a hex code or click to use the visual selector.
  • Text colour
    Use White text if you have a dark main colour and Dark text with a light main colour.
  • Support colour
    The colour of the agent speech bubbles and the reply text box. Enter a hex code or click to use the visual selector.
  • Text colour
    Use White text if you have a dark support colour and Dark text with a light support colour.

chat-colour-picker-1.png

The widget colour picker

Step 3: Choose a theme
Themes are little animations to make your widget stand out. You can select a different theme for both new visitors and returning visitors.

There are three theme variations:

  • Basic
    No animation
  • Bounce
    A bouncing animation
  • Sonar
    A pulsating, colour changing animation

Click Basic, Bounce, or Sonar to select your theme.

chat-theme-picker.png

The chat widget theme selector

Step 4: Click Save and generate code to finish customising.

Next steps

Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.