Website Theming

1 introduction 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 2 availability 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 style your chat window use images and colours that reflect your brand style your chat window use images and colours that reflect your brand 1\ bot icon 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 2\ 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 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 3\ style 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 4\ settings 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