Last updated: 21 November 2023 #

Chat widgets appear in the bottom right of your website. To create an excellent chatbot experience, you want to make sure your chat widget reflects your brand.

Go to Engage → Channels. In the list of channels, find Converse and hit Options.

The preview section on the right displays your changes in real-time.

Step 1: Add a logo and name your chatbot #

Within the Main settings area, you can change your chatbot’s logo and name. You can also choose whether you would like your chatbot to display its logo and name to your users by turning these on or off.

Under the main settings, you can:

• Toggle your chatbot name on or off.
• Toggle your logo on on or off.
• Toggle timestamps on or off.
• Toggle the banner on or off.
• Toggle reset on close on or off (LEARN MORE).

Step 2: Personalise your banner #

The banner is an optional short message that users first see when they interact with your chatbot. This area is often used to inform users of your chatbot’s purpose.

Navigate to Banner settings and personalise the title and subtitle.

Step 3: Add your brand colours #

You can customise every element of the colours and branding within your chat widget. You can choose from either the preset selection of colours or add hex codes to match your brand identity.

Colour settings enable you to change the colour of the banner text as well as the banner’s background.

Use different colours inside the gradients to spice things up. Would rather choose a block colour? Simply set both gradients to be the same colour.

Launcher settings help you to customise the design of your chat widget’s launcher, the small icon your users will click at the bottom right of your website.

Message settings help you customise the font and background colours of your chat bubbles.

Step 4: Size your chat widget #

Change the width and height of your chatbot. You may use 

 or 

.

By default, the settings are 24rem width and 640px height.

Step 5: Customise your font #

Your chatbot supports most Google Fonts. Go to Google Fonts and select a few fonts, then copy and paste the Google source into the settings.

The Title Font and Bot Font drop-downs will automatically populate with the fonts you’ve chosen. Use the dropdown to select your font of choice.

Step 6: Set up your engagement rules #

There are many ways to make your chatbot stand out.

Using the settings below, you can create hamburger menus, set up call-to-actions, and more.

Display settings allow you to dynamically render your chat widget according to specific rules. For example, you can use these settings to hide the widget on your about us page.

Chat window settings allow you to decide whether the chatbot widget should be open or closed on specific pages. You can use the conditionals to create your rules. For example, you might want the chatbot’s window to consistently stay open even as web visitors navigate from page to page. By default, your chatbot’s window is closed.

Call-to-action settings allow you to create custom messages that appear above your launcher; perfect to entice users to engage with your chatbot. Personalise your call-to-action’s text by clicking Add new. Here you can add a description of your call-to-action (for internal use only) and the message (what your users see).

Tailor when your call to action will be visible to users within the When to show your Call-to-Action area. This operates via triggers. To show your call-to-action to all users at all times, leave this as default.

> You can have multiple call-to-Actions active at any one time.

Avatar settings allow you to add custom avatars. Turn avatars on or off, use our default avatars or upload your own. The chatbot avatar and human avatar differentiate between messages from your chatbot and messages from your live chat agents.

Composer settings allow you to add a hamburger menu to your chat widget with quick links or actions.

Settings page allow you to give or revoke the ability for chatbot users to

• Reset their chatbot conversation.
• Download their chat transcript
• Export all data associated with them
• Delete all data associated with them

Once you are happy with your changes, click Save.

Head to Demo to see your beautiful, on-brand chatbot.