...
| Note |
|---|
Please note only one root domain supported in the omni channel. |
...
...
Channels
The webchat widget
...
| overlay | youtube |
|---|---|
| _template | com/atlassian/confluence/extra/widgetconnector/templates/youtube.vm |
| width | 600px |
| url | https://www.youtube.com/watch?v=0PDGYOMu_PA&list=PLYV-IhQ_GwTPtdKW6YjWudBHH3eiWBo-r&index=5 |
| height | 300px |
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.
...
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
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.
...
Custom CSS
You can add your own custom CSS to customerize the web chat interface.
...
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 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...