Introduction

We’ve introduced a newer version of our bot to provide a smooth and stable user experience to our customers. We’ve tried to improvise the look and feel of the bot by providing additional options around chat settings. Currently, this can be enabled depending on customer requirements. You can get it enabled directly or with a manual toggle switch.

Enablement

If already it’s enabled you can directly access it from Configuration > Web Display

Depending on your entitlement, you could need to enable it through Deployment > Website chatbot



Once you switch on the toggle, you would be able to see the new configuration settings under Configuration > Web Display



Setup

Bot icon



• Bot Position: You can place your chatbot on the right or left bottom corner of your web page. 
• Bot Launch type: You can set a callout message along with the bot launch icon.
• Launch Icon: This lets you upload an image that the chatbot launch icon would then have.
• Chat Auto Pop-up: You can greet the user by landing on your website with an automatic pop message. You can configure the delay time, a maximum of up to 100 seconds.

Launch Screen



Enable the launch screen toggle to customise the launch screen of your bot.

• Title: You can set the title as your organization/brand name which would appear in the header section of your bot.
• Body text: Add a practical and appealing description of your product.
• Query card title: Set a title such as ‘Ask a query’ to indicate the query section of your bot.
• Query Placeholder: Set a one-liner to indicate the box where the user can type in their query, such as ‘Enter your question here’
• Card Layout: You can align the multiple cards in a vertical or horizontal row
• Add new card: This button allows you to enter a custom new card into the launch screen.



The card can be configured with the following parameters: 

1. Card Image: Here you can upload an image to make your card more media-rich.
2. Card Header Text: Set a title for your card.
3. Card Body Text: Add a description for your card.
4. Button Name: Add a name for your button
5. Card Action Type: You can tag your button to a specific Path, URL and FAQ.

Chat Style

1.Choose from theme: Make your bot look more appealing by choosing a theme for it.



2.Chat header: You get multiple options to customize your chat header.



• Chat header type: You can set a header as an icon or text with an icon.
• Header icon: Upload an image from your storage or enter the image URL as the header icon.
• Header text: You can add a tagline/header which would be displayed below the bot title text.
• Alignment: Set the position of your header text to left or in the centre.
• Background colour: Choose a background colour for your bot header.
• Font and Font colour: Select a font style and colour for your header.

3.Chat background: Customize the background of bot’s chat screen with an image, color gradient and video.



• Background type: Select the background type as a solid colour, image, gradient and video from the dropdown menu. You can set the transparency level of your background colour. 

Note: A Portrait image is recommended with a size of 1280*800 px. For the video mp4 format is recommended.

4.Response messages: Customize your chat header and colour of the text and text bubble.



5.Button Settings: Set a colour for the response buttons.



6.User messages: Customize the colour of users’ text messages and text bubble.

You can highlight the reply section by setting a suggestion text and background colour.



Settings

1.Message settings



• Enable fading-in of new messages: Enabling this option will ensure that the messages and options in the chat bubble, appear one after another each in a separate line fading-in. This behaviour will increase the time taken to load all the chat bubbles and will only be applicable for the Website chatbot widget and not on the Standalone bot or other social channels.
• Edit Previous User Message: Enabling this option allows bot users to modify their previous response to the bot. You can configure the following field by checking this box:
• Default Response: This is the message that will be displayed when the user clicks on the change response. You can enter text up to 100 characters.
• Notify users via sound on new messages from the agent: When in live chat, the user leaves the active page with the chatbot to browse other tabs or websites. They will hear the beep sound on the first unread message. This sound will only be played once and not on every new unread message, so as to make the user aware that an agent has sent a new message and also cause minimal distraction.

2.Voice settings



• Enable Voice Input: This allows users to interact with the bot using voice inputs. This feature is currently only supported for Chrome browsers.

3.Chat menu settings



• Enable ‘clear conversation history’ menu: Enabling this option allows user to clear the previous conversation and keep the chat screen clean.
• Show icons with chat menu: You can display pre-configured icons associated with the chat menu options.

4.Add Menu Option: You can upto 5 menu options excluding the two default options - Chat Settings and Clear Conversation History.

• Menu option settings:



• Button Name: Set names for your menu options.
• Action: Choose a triggering action between Path and URL.
• Option Icon: Set a customized icon for your menu option.