Website Theming
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.
This functionality is available to all users irrespective of plans as long as 'Website' as a channel is enabled.
To access this function, navigate to Configure > Web Display
Bot Position: Choose where the bot appears on your screen, either the bottom right or bottom left corner.
Bot Launch Type: This option lets you launch the icon with or without a launch message.
- Callout Message: If you choose with callout, you can enter the auto pop-up greeting message here (max 40 characters).
Launch Icon: This lets you upload an image that the chatbot launch icon would then have.
Chat Auto Pop-up: Enable this option to greet your website user with an automatic pop-up message
- Callout Mode: Choose whether the auto pop-up greeting message appears immediately, 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.
- Delayed By: If you choose delayed you can then configure the delay in seconds under this field.
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:
- Title: This would show up on the header section as a title
- Body Text: This would show up on the header section as a sub-title
- Query Card Title: This is the text that will be displayed as the title of the second card i.e. Query Card.
- Query Placeholder: This is the text that will be displayed on the reply area of the query card.
- Card Layout: Horizontal or vertical
- 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:
- Card Image: This lets you upload an image that the card would then have.
- Card Headed Text: This will be the heading that’s displayed on the card.
- Card Body Text: This would show up on the card as a sub-title.
- Button Name: Enter the name that you wish the button to have in this field.
- Card Action Type: You can select to either trigger a path, open a web URL or trigger an FAQ
- 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.
Choose from theme: This option allows you to set a background theme from a set of pre-defined themes for your chatbots over the website.
Chat Header:
- Chat Header Type: Choose between a header icon with text or a header image.
- Header Icon: The icon beside the Header text in the bot can be configured from this option.
- Header Text: The user can add text as a description for the bot. This will be displayed on top of the widget.
- Header Image: This lets you upload an image that the chat header would then have.
- Alignment: This aligns the header text. There are two options left-align and centre-align.
- Background colour: This is the colour of the background that the header is present in.
- Font: A bot builder can select the font style of the chat widget for their website. There are 15 options to select from
- Font Colour: This is the colour selection for the text displayed in the header.
Chat Background:
- Background Type: You can select the background type to be anyone from a list of none, solid, image, gradient and video. The UI adjusts and lets you upload the required media accordingly.
Response Messages:
- Avatar: This lets you upload an image that will be used as the Avatar for when the bot sends a message.
- Text bubble colour: This lets you select the colour of the bubble that the bot’s message will be displayed in.
- Text Color: This lets you choose the colour of the text that the bot’s messages will be in.
Button Settings:
- Buttons colour: This lets you select the colour that the buttons sent by the bot would appear in.
User messages:
- Text bubble colour: This lets you select the colour of the bubble that the user’s message will be displayed in.
- Text colour: This lets you choose the colour of the text that the user’s messages will be in.
- Show reply area: Enable or disable the reply area for users to input their messages.
- Reply area suggestion text: This lets you input text that will be displayed to the user in the reply area.
- Reply area background colour: This lets you select the colour that the reply background area will be in.
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.
- Disable CTA response preview: Disables the preview of the button text when the user clicks on it.
- 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.
- Disable SMO Options: Enable this option to not allow bot users to modify their previous SMO response to the bot.
- Enable respond box for Request User Data node: Enabling this will make respond box as an input area instead of the dedicated space that comes with the RUD node
- 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.
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.
Chat Menu Settings:
- Enable 'Clear Conversation History' menu: Allow users to clear their conversation history through a menu option.
- Show icons with chat menu: Display icons alongside menu options in the chat interface.
- + Add Menu Options: This button allows you to add additional options to the menu.
- Button name: Enter the name that you wish the button to have in this field.
- Action: You can choose either to trigger a path or an external web URL at the click of the button.
- 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.
- Option Icon: This lets you upload an image that the option icon would then have.
