Skip to main content

Customizing and Deploying Chat - Bot Settings

Jorge Ferreira Filho
  • Updated

Who can use this feature?

Available on Chat
Available to Admins Workspace Admins
Billing Center Get a Demo

This article will cover how to customize your Bot's styling to ensure it matches your company's branding and goals and how to deploy it on your website.

Table of Contents

Accessing and Customizing Your Bot Settings

You can access such settings in the left-hand menu in the "Bot Settings" option under Chat's section:

 

Customization

After accessing the Bot Settings, the Customization tab will be displayed. Before proceeding, please note that this feature might be disabled if one of your Admins locks the branding settings for your org.

For example, you may want to configure its appearance and behavior to resemble your company branding and wording.

There, you will be able to update:

  • The Company Logo, that will appear in the Bot's top left corner.
  • The Company Name, that will be shown in the Bot's header.
  • The background-color: Light or Dark.
  • The Action Color: this defines your bot's primary color.
  • The launcher position on the page: Bottom Left or Right corner
  • The spacing, if the default, causes it to overlap with any existing elements on your website.

Note that you must update the Company Logo and Company Name to avoid display issues in your Chat pop-up window.

The Bot Preview on the right side of the Bot Settings page will give you an opened and minimized preview of your settings when opened and minimized, so you can better understand how your updates and your Bot are looking.

Deploying your Journey to Your Website

Your deployment embed code is in the Embed tab, right beside the Appearance tab, on the same Bot Settings page.

Paste the code in your site's header so it loads on page load on every page you want the widget to appear. Ensure you clear any cache/cookies in your web browser or open the test page in an incognito/guest browser before loading it for the first time.

There, you will find one script to be used if you are not using Google Tag Manager (GTM):

And another one to be used if you are using Google Tag Manager (GTM):

To ensure the code is copied in the correct format, use the "Copy Code" button right next to the option that suits you.

 

 

Related articles