Website Theming
1. Introduction
Branding and theming enhance the look & feel of the bot and that adds to the overall user experience. Engati provides a range of configuration options to customize the look & feel of the website widget for your Chatbot. This includes placement, header colours, text style & colour, and more options which will go a long way in helping you get the right look & feel.
2. Availability
This functionality is available to all users irrespective of plans except Theme font, Font weight, Header Alignment, Header Description, Background, Input Area Colour and Input Area suggestion text which are available from the Professional Plan onwards.
To access this function follow the steps below
- Click on Configure
- Select deployment
- Click on “Edit Settings’ on the Website Chatbot and then click on ‘Display Settings’ in the bottom right corner.
Style your chat window. Use images and colours that reflect your brand.
1. Style
a. Theme: This option allows you to set a background theme from a set of pre-defined themes for your chatbots over the website.
b. Chat Header:
i) Font – A bot builder can select the font style of the chat widget for their website. There are 15 options to select from
ii) Font Colour: This is the colour selection for the text displayed in the header.
iii) Alignment: This aligns the header text. There are two options left-align and centre-align.
iv) Background colour: This is the colour of the background that the header is present in.
v) Header Text: The user can add text as a description for the bot. This will be displayed on top of the widget.
vi) Header Icon: The icon beside the Header text in the bot can be configured from this option.
c. Chat Background:
i) Background Type– You can select the background type to be anyone from a list of none, image, gradient and video. The UI adjusts and lets you upload the required media accordingly.
c. Response messages:
i) Avatar – This lets you upload an image that will be used as the Avatar for when the bot sends a message.
ii) Text bubble colour: This lets you select the colour of the bubble that the bot’s message will be displayed in.
iii) Text Color: This lets you choose the colour of the text that the bot’s messages will be in.
iv) Buttons colour – This lets you select the colour that the buttons sent by the bot would appear in.
d. User messages :
i) Text bubble colour – This lets you select the colour of the bubble that the user’s message will be displayed in.
ii) Text colour: This lets you choose the colour of the text that the user’s messages will be in. iii) Reply area suggestion text: This lets you input text that will be displayed to the user in the reply area.
iv) Reply area background colour – This lets you select the colour that the reply background area will be in.
2. Layout
Launch Icon: This lets you upload an image that the chatbot launch icon would then have. Chat close button: This lets you pick whether you want the chat close button to be on the top or at the bottom. Chat menu: You can opt to have a chat menu if you’d like. It would be displayed at the left end of the reply area. Once you have added a chat menu, you can add multiple buttons to it. The buttons will have the following fields:
1. Button name: Enter the name that you wish the button to have in this field. 2. Action: You can choose either to trigger a path or an external web URL at the click of the button. 3. Path/URL: Select the name of the path that you’d like to trigger with the click of the button in case you have chosen path as the action or enter a web URL that you’d like to open in case you have chosen URL as the action.
3. Launch Screen
Show Launch screen before the conversation: You can check this box if you want the chatbot to display a launch screen before the user has sent a message to the bot. If you decide to have the launch screen you can then configure the following parameters:
1. Show Agent Profile and Availability: Check this box if you’d like the launch screen to display the online agents that a user can interact with. 2. Show Agent Responsiveness: This text can be used to let the users know how soon they can expect to be attended to. 3. Agent Responsiveness Text: This is the text that will be displayed about agent responsiveness. 4. Query Card Title: This is the text that will be displayed as the title of the second card i.e. Query Card. 5. Query Placeholder: This is the text that will be displayed on the reply area of the query card.
Add New Card: This button allows you to enter a custom new card to the launch screen. The card can be configured with the following parameters:
a. Card Text: This will be the heading that’s displayed on the card. b. Card Action Title: This will be the text that’s displayed on the action button on the card. c. Card Acton Type: You can select to either trigger a path, open a web URL or trigger an FAQ d. Path/URL/FAQ: You can select the path you want to trigger or the web URL that you wish to open or the FAQ that you need to answer depending on the Card Action Type that was selected.
4. Settings
Chat Auto Pop-up: Enable this option to greet your website user with an immediate message pop-up. You can configure the following fields under it.1. Trigger: You can either set the trigger to immediate which makes the auto pop-up as soon as the webpage has finished loading or you can set it to delayed which introduces a delay in the pop-up. If you choose delayed you can then configure the delay in seconds under the delayed by field. Type: You can pick one type from Closed call out, minimized and normal.
2. Notify users via sound on new messages from 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.
3. 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.
4. 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.
5. Enable Voice Input: This allows users to interact with the bot using voice inputs. This feature is currently only supported for chrome browsers.
6. Enable Voice Conversations with Bot: When enables bot can have voice conversations with the users by listening for voice inputs and speaking back. By checking this box you can configure the following field:
Enable Continuous Voice mode: When enabled the bot can have a continuous conversation without switching to text mode after each message. By checking this box you can configure the following fields:
a. Voice Response Gender: You can select between a male or a female voice for the bot. b. Phrase Hints: You can enter up to 10 custom keywords or phrases that need to be recognized by the Voice Engine. For example domain-specific keywords like brand/product names etc.
