Chatbot Appearance
Customize the look and feel of the chat widget.
To customize the appearance of the chat widget, you can go to Settings > Channels > Web > Appearance.
There are multiple customization options offered:
Branding & visual design
Accent color
Customize the theme of the chat widget by choosing a accent color. This is applied to the header area, user message bubbles etc.
Font color
Defines the color of the font in the chat widget.
Style
Widget Displays a floating chat bubble with a widget icon at the bottom corner. Widget + text Displays a rectangular floating chat bubble with a text next to the widget icon. The text is customizable upto
Header text
The name of the chatbot
Widget icon
Image to be displayed as the floating chat bubble.
Header image
Image to be displayed on the header when the chat bubble is opened.
Bot image
Image to be placed next to the bot messages in the chat screen.
Footer
Information displayed on the chat widget's footer.
Remove "powered by"
Enabling this removes the "powered by WotNot" branding on the footer of the chat widget.
Footer text
You can add a privacy policy text next to the powered by branding. This will be a clickable link which can open your desired webpage.
Widget behaviour
Control how the widget behaves on your site, including positioning, animation and typing speed.
Orientation
Displays the chat widget on the bottom left corner OR the bottom right corner of the webpage.
Scroll behaviour
Scroll to end
Each new message from the bot, auto scrolls the page to that new page.
Scroll to first unread message
User position is not changed. Instead a "New messages" badge is displayed at the bottom, which when clicked takes the user to the first unread message.
Hint text
Placeholder text to be shown on the chat widget input box.
Typing speed
Adjust how quickly you want the bot to send its responses.
Show historical chats
Enabling this will show a back button next to the Header image, clicking on which will show all the historical chats of the user.
Disclaimer banner
Display an informational banner above the chat (e.g. availability or legal notices)
Enabling this will allow user to define the message to be displayed.
Privacy banner
Displays a privacy banner at the start of the chat.
Chat session behaviour
On page refresh
Start new chat Always start a new chat session when the page is reloaded. Retain existing chat Always retain the chat session where it was when reloaded, or when navigating to another page. Note: Chat is retained only if the WotNot cookie is stored.
Cookies
When using WotNot's chatbots on your website, a cookie is placed by default when users begin interacting.
You can disable automatic addition of the cookie by going to:
Always added - this means the cookie is always added to the client when a chat session starts.
Manually added - this means cookie is not automatically added until a JS method is fired.
// JS method to manually add the cookie
wn.cookieSettings({“is_allowed”:true})
// "true" means the cookie is added, "false" the cookie is removed if any present. And if the JS method is not used, no cookies are added.To check if a WotNot cookie is present in your browser:
Goto Inspect -> Application -> Cookies
Search for keyword "cuid" under domain "app.wotnot.io"
Sounds & animations
Control how the notification sounds and animation preferences are used.
Play sound
Enabling this plays a sound for each message being sent/received in the chat screen.
Stop bouncing animation
Enabling this will stop the bouncing animation displayed on the chat widget icon before it is opened on the webpage.
Advanced customization
To customize chat widget even further, you need to define the custom CSS code you want to apply to the chat widget styling and add it here.
Last updated
Was this helpful?