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, as well as how to deploy it on your website.

Table of Contents

• Appearance
• Office Hours
• Custom Triggers
• Embed - 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 the Chat section:

Appearance

After accessing the Bot Settings, the Appearance 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's branding and wording.

The Bot Preview on the right side of the Bot Settings page provides an open and minimized preview of your settings, allowing you to better understand how your updates and the Bot appear within different Use Cases and Widget Modes.

There, you will be able to update:

• The Company Logo, which will appear in the Bot's top left corner.
• The Company Name, which will be shown in the Bot's header.
• The Background Color: Light or Dark.
• The Background Styling:
  • Show or not gradient in Chat's header
  • Animate or not Chat's background when the AI is typing.
• The Action Color: this defines your bot's primary color.
• The launcher position on the page: Bottom Left or Right corner
• The default spacing causes it to overlap with any existing elements on your website.
• The Default Bot State, where you can define if the Chat pop-up should open automatically or stay minimized until someone interacts with it. You can define such behavior separately for Desktop or Mobile experiences.

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

Office Hours

The Office Hours allow you to control when specific Chat Journeys appear, based on your team’s working hours.

For example, you may want to offer live chat during business hours and direct visitors to self-serve booking options after hours to maintain a smooth experience even when your team is offline.

Once these are set, you will customize the journey experience in the Journey trigger. More details in Chat Widget Office Hours.

Set your Timezone and Office Hours:

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! 

Embed - 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, refer to the Workspace Settings, Branding & Language & Demand Conversion Platform's Admin Center, specifically the Branding & Language Settings.

Ensure that all necessary languages are added to 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.