To add the widget to your website and configure the Web channel, see Web channel.

To customize the appearance of the chat widget, you can go to Settings > Channels > Web > Appearance.

Web or voice

Widget	Description
Web chat widget	A text-based chat widget that visitors use to interact with your agent on your website.
Voice chat widget	A browser-based voice experience that allows visitors to talk to your agent instead of typing messages.

The two experiences use different interaction modes, so some settings apply only to text chat while others apply to voice.

Branding and visual design

Customize the appearance of the widget to match your website and brand.

Config	Description
Accent color	Customize the theme of the chat widget by choosing an accent color. This is applied to the header area, user message bubbles, and other widget elements.
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 customizable text next to the widget icon.
Header text	The name of the chatbot displayed in the widget header.
Widget icon	The image displayed as the floating chat bubble.
Header image	The image displayed in the header when the chat widget is opened.
Bot image	The image displayed next to bot messages in the chat screen.

Information displayed on the chat widget’s footer.

Config	Description
Remove “powered by”	Enabling this removes the “Powered by WotNot” branding from the footer of the chat widget. Available on the Premium plan
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.

The Widget + text style allows you to customize the text displayed next to the widget icon. Keep the text short so it displays correctly across different screen sizes.

Control how the widget behaves on your site, including positioning, animation and typing speed.

Config	Description
Orientation	Displays the chat widget in the bottom-left or bottom-right corner of the webpage.
Scroll behaviour	Scroll to end: Automatically scrolls to the latest bot message. Scroll to first unread message: Keeps the user’s current position and displays a “New messages” badge at the bottom. Clicking the badge takes the user to the first unread message.
Hint text	Placeholder text displayed in the chat widget input box.
Typing speed	Adjusts how quickly the bot sends 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.

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.

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.

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.

When Manually added is selected, chat retention and related-chat matching will not work until the WotNot cookie is allowed.

To check if a WotNot cookie is present in your browser:

Go to Inspect →Application → Cookies
Search for keyword “cuid” under domain “app.wotnot.io”

If you use a consent manager, verify the cookie after the visitor gives the required consent. If the cookie is not present, chat retention may not work.For more information about matching visitors to previous conversations, see Related chats.

Sounds and animations

Control how the notification sounds and animation preferences are used.

Config	Description
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.

Image dimensions

Following are the action blocks in WotNot that supports using images and gifs:

Image	Recommended dimensions	Supported formats
Widget icon	Use a square image	Common image formats
Header image	Use a wide image suitable for the widget header	Common image formats
Bot image	Use a square image	Common image formats

Action block	Recommended size
Send Message	16:9, 4:5 & 1:2
Carousal	16:9
Image Carousal	16:9

IMPORTANT

All images are clickable so that you can view the full image on an overlay.
If you provide larger images, then the system will automatically cut & only show part of that image that fits the dimension.
The image size cannot exceed 5 MB

Pop-up messages

Pop-up messages are small snippets of text shown on the chat widget before opening it. They can be used to attract attention and encourage visitors to start a conversation.

You can configure different pop-up messages for different pages of your website. A pop-up message can contain either one line of text or media.

Javascript functions to display and hide the chat widget on your webpage. Execute the following Javascript functions to trigger the chat widget on your web page.

wn.openWidget(); 

//Opens the chat window but minimizes it when clicked on the cross
wn.openWidget(true)

wn.hideWidget();

wn.showWidget();

//Shows the chat bubble but minimizes it when clicked on the cross.
wn.showWidget(true)  

Refer this videos for :

Advanced customisation with custom CSS

You can customize the CSS of the chat widget to suit your needs. You can add custom CSS from: Settings > Channels > Web > Appearance

Available on PREMIUM plan and above.

To make changes in the UI using the CSS, you need to go to ‘Channel Configuration -> Web -> Appearance’ Here are the classes that you can modify:

Field	Class Name
Pop-up message	`.avatar.popup-message.popup-close-button`
Header Text	`.bot-title`
Header Logo	`.avatar--title`
Meta date information	`.meta-info.meta-info--label`
Text message in the chat section	`.text-message`
Time-stamp & typing indicator	`.timestamp`
Options / Buttons dialog	`.option-button`
Carousel Title / Subtitle / Buttons	`.carousel-title.carousel-subtitle.carousel-button`
Calendar Submit Button	`.submit-button`
Carousel Image	`.card-view-image`
Slider title and submit button	`.popup-title.submit-button`
File Upload, Submit, Add more button	`.popup-title.submit-file.add-file`
Home Button	`.home--button.reset--button`
Action Buttons	`.action-button`
Input box on the chat widget	`.chat-input`
Avatar for title	`.avatar`
Header of the chat widget	`.message-screen-header`
Carousel Root, Image, Carousel slider frame	`.carousel.carousel-image.slider-frame.card-image`
File List item Root and Classes for title, icon	`.filepond--root.iconwrap.filepond--file-wrapper.filepond--action-remove-item`
Form Input	`.form-input`
Phone Input, Search box for country dropdown, Country list	`.phone-input.search-box-sub-container.country-list`
Google Calendar Drawer	`.google-calendar`

Common CSS customizations:

Change the background for the Chat Widget : To modify the chat widget icon’s background, use the following CSS:

#chat-bubble-open {
    background: url(https://www.hemfrid.se/_next/static/media/logo-chat.9d3ab5d1.png) 50% / cover no-repeat;
}

Adjust the Chatbot Size (Consistent on Web & Mobile) : To ensure the chatbot doesn’t take up the entire screen, you need to add the chat bubble code using widget-container-id and apply the following styles to the root element using a media query:

<script src="https://app.talkie.se/chat-widget/7JQoJfxPNVAd193002441108qMitvJJh.js" defer></script> widget-container-id="root" widget-height="500px" widget-width="600px" defer

Responsive chatbot sizing : To adjust the chatbot size for mobile screens, use this media query:

@media screen and (max-width: 499px) {
    iframe#widget-chat-window {
        width: 100% !important;
        height: 300px !important;
    }
}

Reduce the bot size through CSS below

.app-container{
width: 400px !important;
height: 425px !important;
}

Custom CSS depends on the widget’s underlying HTML and CSS classes. WotNot may change the widget markup or class names in future releases. Such changes can cause existing custom CSS to stop working or behave differently.

The voice chat widget allows visitors to talk to an agent instead of chatting through text.

Let’s look at how you can enable it:

Go to Settings
Navigate to Channels > Web > Appearance
Under Branding & Visual desing, choose the Widget mode as VOICE
choose from a variety of voice options on how you want your voice agent to sound.

When using VOICE mode, certain action blocks will not execute.

Provisional structure

Because voice mode uses the visitor’s microphone, the browser may ask the visitor to grant microphone access. If microphone access is denied, the visitor cannot use the voice experience until permission is granted in the browser. For voice-agent connection and channel configuration, see Voice channel.

Troubleshooting

Widget styling does not match the configured accent colour

Chat is not retained when visitors move between pages

Check the Chat session behaviour setting first.If Retain existing chat is selected, verify that the WotNot cookie is actually stored in the browser. Go to Inspect > Application > Cookies and search for cuid under app.wotnot.io.If your cookie setting is Manually added, make sure your consent flow calls:

wn.cookieSettings({"is_allowed":true})

Chat retention will not work until the WotNot cookie is available.

Images appear stretched or cropped

Check the image dimensions and file size before uploading the image.Images that are larger than the available display area may be cropped. Also make sure the image uses an appropriate aspect ratio and does not exceed the 5 MB file-size limit.

Custom CSS stopped working

Check whether the widget’s CSS classes or markup have changed.Custom CSS depends on the widget’s underlying classes, so a WotNot release that changes the widget structure may require your CSS to be updated.

JavaScript methods are not triggering the widget

Microphone permission is denied for the voice widget

Removing the Powered by WotNot branding is available on the Premium plan and above.If your account is not on an eligible plan, the branding cannot be removed from the widget

Getting started

Build

Operate

Deploy

Reports

Account

Chat Widget

Web or voice

Web chat widget

Branding and visual design

Footer

Widget behaviour

Disclaimer banner

Privacy banner

Chat session behaviour

Cookies

Sounds and animations

Image dimensions

IMPORTANT

Pop-up messages

Triggering the widget with JavaScript

Advanced customisation with custom CSS

Voice chat widget

Provisional structure

Troubleshooting

​Web or voice

​Web chat widget

​Branding and visual design

​Footer

​Widget behaviour

​Disclaimer banner

​Privacy banner

​Chat session behaviour

​Cookies

​Sounds and animations

​Image dimensions

IMPORTANT

​Pop-up messages

​Triggering the widget with JavaScript

​Advanced customisation with custom CSS

​Voice chat widget

​Provisional structure

​Troubleshooting

Web or voice

Web chat widget

Branding and visual design

Footer

Widget behaviour

Disclaimer banner

Privacy banner

Chat session behaviour

Cookies

Sounds and animations

Image dimensions

Pop-up messages

Triggering the widget with JavaScript

Advanced customisation with custom CSS

Voice chat widget

Provisional structure

Troubleshooting