Chat Widget: Change Appearance

What is a Chat Widget?

It is a small icon typically visible on the bottom right/left corner of your screen that works as a trigger point to initiate the conversation with the bot/human.

Can I customise the look of the Chat Widget?

Certainly you can customise the look of the chat widget as per your preference. i-genie provides various options to customise the chat widget and make it more attractive as per their preference.

Below we have explained how the look of the chat widget can be changed with i-genie

Customisation is only supported with web channel

What can I customise on the Appearance screen?

1. Chat Widget Theme
2. Widget Icon
3. Header Text
4. Header Logo
5. Bot Icon
6. Hint Text
7. Accent Color
8. Font Color
9. Chat Interface Position
10. Notification Sound

How do I access the appearance screen to change the appearance of the chat widget?

To access the appearance screen, you can follow the following steps

1. Click on “Channel Configuration” on the left menu panel
2. Click on “Web” to see the available options
3. Click on “Appearance”

Chat Widget Themes:

i-genie offers two themes to the user to select from & give suitable look to their Chat Widget

1. Classic Theme
2. Modern Theme

Classic Theme:

Classic theme makes user nostalgic & takes back in 90’s when web pages displayed huge buttons to click on

Modern Theme:

Modern theme gives the user experience of how the technology has evolved over the time to get rid of the buttons and give attractive look to the web pages

Widget Icon:

You can now have your own widget icon that will appear on your webpage/website

The recommended size is 64 x 64

Header Text:

“Header Text” option in i-genie allows the users to name their bot as per their preference

For Instance, I have named my bot as “Spector” however you can name anything as per your preference like Jamie or Harvey etc

Header Logo:

“Header Logo” option with i-genie allows the user to have the profile image for the bot. This allows the user to set the photo that best suits the name of the bot

We recommend you to use 512 x 512 image size

Bot Icon:

Users will be able to set the bot icon that will be visible to the visitors. Using “Bot Icon” option under the Appearance menu, it will allow the user to set the bot icon

We recommend users to use 512 x 512 image size.
The Bot Icon can be the same as the bot header or different, as per the user preference

Hint Text:

“Hint Text” options allows the users to set the text they would like to make it visible to their visitors

Accent Color:

“Accent Color” option allows users to set the color of the bot & provides them the option to choose the color that complements their brand color on their website.

Users will also have the option to set the colors of the font and match with their primary colors. In-order to do so, users can use “Font Color” option provided by the i-genie to set the font colors

Chat Widget Position:

Yes you can change the position of the chat widget & set it either on the right or left depending upon your preference. i-genie provides the option “Chat Interface Position” to set the chat widget either on the bottom left of the screen or bottom right of the screen

We recommend to place it in area where it is easily visible as well as not overwriting the content

How does a visitor get notified when they receive a message from bot?

With i-genie, the users do have the option to turn on/turn off the notification sound however we do recommend our users to keep this on since the sound will support the bot to get better engagement and grab visitor’s attention.

Users can turn on or turn off the switch depending upon their preference

Click on ‘Apply Changes’ to save all the changes made in the appearance of the chat bot