...
After you create the omni channel, you will be able to find the webchat Widget from the left side bar.
...
...
WebChat Widget Setting
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Once you have located your widget you can press the pencil icon on the right of it to edit and customize the webchat widget to your liking.
...
Allow Emoji Picker -› let users pick from pre-set emojis
Allow Upload Attachments -› let users upload documents, images and or videos
Allow users to end chat -› this option will allow the user to close the chat conversation.
Allow popup Chat Window -› this allows users to change the chat widget into a pop up which results in a bigger display of the chat
Allow to Continue Chat in Mobile -› Users can scan a qr code to continue the conversation on their phone. Smooth experience if they start on a computer and want to continue the conversation with your business while being in the road
Enable Text Typing Effect → This will allow the response to show up word by word, if this is disabled, then the response will show up at once immediately.
Whitelist domain
In order to display the widget on your website, you will need to whitelist your domain. You only have to add your root domain and all subdomains that you may have will automatically be recognized;
| Note |
|---|
Please note only one root domain supported in the omni channel. |
...
...
Channels
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
With these options, you are able to customize your webchat to match your brand colors and preferences;
...
You have the following options to choose from;
Theme
Font
Colors
Start Chat Button
Theme
With themes you are able to customize the appearance of your webchat widget with pre-set values;
...
You have the following themes at your disposal:
Standard
Flat
Facebook
WhatsApp
WeChat
The great thing about these themes is that they give a look and feel that users are already familiar with like when using Messenger of WhatsApp. These themes will create a similar chat experience directly on the spot.
...
As you can see the experience makes it so that a user will feel right at home to start a conversation with your business because the experience is so similar.
Font
With fonts you can totally change the appearance of the webchat widget by matching it to your own brand, or to create a really unique experience.
...
Currently you can choose out of 25 fonts to really make the webchat widget your own personal experience.
Color
With this option you can change the color palette of your webchat widget
...
You can customize the following sections:
Widget Color
Bubble Icon & Text color
Start Chat Button Color
Header Background Color
Body Background Color
Start Chat Button
With this option you can change the border radius of the button “start conversation”;
...
You can also choose the option custom to add your own radius instead. It will help you keep things in sync with your own website buttons for example.
...
Display Style
The display style option will give you multiple ways of using the webchat on your website. Let’s take a look at the different options;
...
We have 3 main sections you can customize:
Style
Design
Install code
Style
You have 4 different styles to choose from as to how you would like to use the webchat channel on your website.
Floating Modal -› which will give you the live chat icon on the bottom on your page
Full Page -› allowing you to embed the chat widget as a full page instead
Embed Chat Window -› allows you to display the chat window anywhere on your page
Popup Modal -› Allows you to pop up a window with the conversation with your chatbot. Anything on your page can be the trigger as long as you apply a class to it.
The best part of it is that, for the same website, you can actually install different style of web chat on different pages.
Check this video for more details:The webchat widget allows you to seamlessly redirect users to multiple platforms such as WhatsApp, Facebook Messenger, Instagram, Telegram, and more. This feature ensures that users can connect with you through their preferred channels, enhancing their overall experience.
How It Works
When a user visits your webchat widget for the first time, they will be presented with a Get Started button, along with various channel options. These channels are integrated via Omni Channels.
If a platform like WhatsApp is linked to an Omni channel, and the user clicks on the WhatsApp icon instead of the Get Started button, they will be automatically redirected to that platform. This functionality is specific to Omni channels, allowing for a smooth transition between different communication platforms.
Where to Find It
To enable this feature, follow these steps:
Navigate to Webchat Widget Settings: Access the settings menu for your webchat widget.
Locate the Channels Option: You will find an option labelled Channels in the settings.
...
Activate the Desired Channels: Simply toggle on the channels you want to enable. Once activated, these channels will appear in the webchat widget, ready to redirect users as needed
...
For Example:
We have linked a page with Uchat for the testing purpose:
...
Also, we have a testing website where you can see that three channels are enabled, and the user can select any of the channels.
...
What happens when you click any channel:
Users who click the Messenger Channel will be redirected to the Facebook page.
...
Appearance
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
With these options, you are able to customize your webchat to match your brand colors and preferences;
...
You have the following options to choose from;
Theme
Font
Colors
Start Chat Button
Theme
With themes you are able to customize the appearance of your webchat widget with pre-set values;
...
You have the following themes at your disposal:
Standard
Flat
Facebook
WhatsApp
WeChat
The great thing about these themes is that they give a look and feel that users are already familiar with like when using Messenger of WhatsApp. These themes will create a similar chat experience directly on the spot.
...
As you can see the experience makes it so that a user will feel right at home to start a conversation with your business because the experience is so similar.
Font
With fonts you can totally change the appearance of the webchat widget by matching it to your own brand, or to create a really unique experience.
...
Currently you can choose out of 25 fonts to really make the webchat widget your own personal experience.
Color
With this option you can change the color palette of your webchat widget
...
You can customize the following sections:
Widget Color
Bubble Icon & Text color
Start Chat Button Color
Header Background Color
Body Background Color
Start Chat Button
With this option you can change the border radius of the button “start conversation”;
...
You can also choose the option custom to add your own radius instead. It will help you keep things in sync with your own website buttons for example.
...
Display Style
The display style option will give you multiple ways of using the webchat on your website. Let’s take a look at the different options;
...
We have 5 main sections you can customize:
Style
Design
Install code
Set Custom User ID
Custom CSS
Style
You have 4 different styles to choose from as to how you would like to use the webchat channel on your website.
Floating Modal -› which will give you the live chat icon on the bottom on your page
Full Page -› allowing you to embed the chat widget as a full page instead
Embed Chat Window -› allows you to display the chat window anywhere on your page
Popup Modal -› Allows you to pop up a window with the conversation with your chatbot. Anything on your page can be the trigger as long as you apply a class to it.
The best part of it is that, for the same website, you can actually install different style of web chat on different pages.
Check this video for more details:
...
Design
With the design tab, you will be able to set the conversation widget settings of the style of widget that you selected. Below is an example of embed chat window option;
...
Install code
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
The install code will generate your script of the desired style of chat widget you want to put live on your page;
...
The installation code will differ depending on the style of the widget that you selected.
Below is an example of the embed chat window;
...
Set Custom User ID
Chat now allows its users to pass bot user information from their website directly into the omnichannel bot via setting a custom user ID. This feature will enable users to send specific flows to guest users vs users who have given their information as well as be able to fetch chat history and other user specific flows which was not possible before.
Access “Set Custom User ID” Feature
Inside the omnibot, click on “Webchat Widget Settings” then click on “Display Style” tabs and then “Set Custom User ID”
The setup will look like the following:
Special Key
The special key is a set of strings that UChat uses to decrypt the hash you send to it from your website. This is important as it allows UChat to verify that the user is indeed created from your website and is authorized and authentic.
Identifier Hash
Identifier hash is a set of string composed of the user ID you want to set which is then encrypted to string using SHA256 algorithm with HMAC enabled. This hash is the unique signature that UChat then verifies to confirm and authorize that the request is being made from your website.
This hash needs to be created from the backend of your website. You will have to send this value in its encrypted form to UChat otherwise the request will be denied. A sample code written in PHP for such an encryption can be found below:
| Code Block |
|---|
$identifier_hash = hash_hmac('sha256', $user_id, 'b02612a8bdf5e736c41ce2002181d124'); |
Snippet Code
The code snippet for this will have to be pasted in the same area where you put the code snippet for the bot itself i.e in the header section of your website.
The snippet code contains the payload for the user details, along with mandatory fields of user_id and identifier hash.
| Code Block |
|---|
<script>
window.addEventListener("chatbot:ready", function () {
window.$chatbot.setUser("{user_id}", {
name: "full name",
email: "user@email.com",
identifier_hash: "{identifier_hash}"
});
});
</script> |
Here, you can enter custom details for users such as name and email, as well as you can set the user_id.
Note: The {user_id} and {indentifier_hash} variables need to be replaced with the variables where the values you want to set can be mapped.
Instructions
Copy the snippet code into the header of your website, the same place where you place the snippet code for the bot itself.
Replace the {user_id} variable with the custom user_id you want to set for the user. The value for this will most likely have to be fetched from your server or website’s backend.
Using the same user_id, create the identifier hash from your server or website’s backend using SHA256 algorithm with HMAC enabled.
Copy both to the snippet code, then publish it live to your website. You will then be able to create users with custom user IDs.
...
Design
With the design tab, you will be able to set the conversation widget settings of the style of widget that you selected. Below is an example of embed chat window option;
...
Install code
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
The install code will generate your script of the desired style of chat widget you want to put live on your page;
...
The installation code will differ depending on the style of the widget that you selected.
Below is an example of the embed chat window;
...
...
Custom CSS
You can add your own custom CSS to customerize the web chat interface.
You can find the webchat widget CSS selectors here:
These CSS Selectors can be used to further customize the chat widget iframe
CSS Selectors | Function |
|---|
CSS Selectors | Function |
|---|---|
mr-1 | targets the heading text on top beside the logo |
text-xs | targets the reply status text below the heading text |
custom_chat_header | targets the background section of the heading |
message-content | targets the text in conversation bubbles on the chatbot side |
chat-bubble | targets the text in conversation bubbles on the user side |
bot-widget-bubble | targets the chat bubble showing up on the bottom corner of the website |
text-slate-700 | targets the divider line and text that shows the date section of a conversation |
agent | targets the reply box from chatbot and live chat agents side of the conversation |
user | targets the reply box from the user’s side of the conversation |
chat-message--input | targets the box section where you type your message |
bg-white | targets the background behind the chatboxes |
button-wrap .icon-button[type="submit"] svg | targets the submit icon |
Advanced Section
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...