Customizing and Deploying Chat - Bot Settings

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

• Appearance
• Deploying your Journey to your Website
• Chat Calendar Branding & Language

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.

Custom Triggers

Journeys are triggered based on selection according to their order and the conditions set in the Trigger node. Custom Triggers allow teams to override this proactive behavior by providing an option to trigger a specific Journey in reaction to a button or link click. To access Custom Triggers, Go to Bot Settings > Custom Triggers tab.

Below are the steps to set up your Custom Trigger:

1. Hit Create New Custom Trigger

2. A Trigger will open, then you hit ‘Edit’ to add the details (it’s not live until you activate it)

3. Find and copy the Element ID you want to use

• Right-click the element on the webpage and select Inspect.
• In the developer tools panel, find the id="..." in the highlighted code.
• Double-click the ID, then press Cmd/Ctrl + C to copy it.

4. Select the Journey to trigger

5. Activate the Trigger! 

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.

Chat Calendar Branding & Language

You can access your Branding & Language settings from the left side panel under Settings.

This is where you can customize your Chat Calendar screen - when using the schedule a meeting node in your Chat Journey.

For more details on customizing your branding and language, check out Workspace Settings Branding & Language & Demand Conversion Platform's Admin Center Branding & Language Settings.

Make sure all the languages you need are added in the Languages section.

To edit the data field language that you send through Chat, do this directly in each Data Field.

Note: All Journeys using the 'Browser Language' condition will need to have all copies translated. Meeting types, Reminders, Data Fields, and Scheduling Screens will auto-translate.