Page Comparison

...

With the webchat widget, you will be able to add a chatbot to any website without the dependency of any other channel. This will help you unlock the power of conversational marketing without the downsides or restrictions other channels might have.

...

After you create the omni channel, you will be able to find the webchat Widget from the left side bar.

...

...

WebChat Widget Setting

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;

...

...

Channels

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. 

...

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

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;

...

Advanced Section

There are many customizations you can do with the webchat button. Some are a bit more advanced hence why we are going to be putting them down in this section instead. 

Installing multiple widget types and different starting flows on your website

With the webchat widget, you are able to install as many types as you wish on any of your pages inside your domain. 

Once you generated your desired widget type you can add a ref parameter to it. This allows you to start any flow of your preference with ease.

Create your ref URL

The way to do this is you can create any kind of ref URL inside the tool section;

...

Once you have created your ref URL you will have also connected it to your flow of preference. You can now use this ref URL by copying the ref parameter;

...

 Adding the ref parameter to your webchat installation code. 

Now that you have created your ref URL and copied the ref parameter it is time to add it to your webchat installation script. 

The way to do that is very easy;

...

If you have pasted in your webchat installation script the only thing you will need to do is by adding a question mark after .js, and add ref=, then add your copied ref parameter from the ref URL you created.

This will override the existing default starting flow and with this, you will be able to start your preferred flow instead. 

It opens up the way to use the same widget on different pages but with different starting flows. 

Use cases for this could be;

• A landing page requires a specified sales flow

• Customer support starts with a support flow 

But it gets even better!

Since you are using the ref URL parameter you are also able to add payloads to the widget as well. 

Payloads help you add specific pieces of data directly to the user’s custom fields without the user even needing to give them to you. Example could be you want to know from which section of the website the user is coming from. Let’s say he or she came from a landing page, you can then add this inside the widget as a payload to be saved to the user profile. 

Adding payloads to the webchat widget

In order to add a payload we need to return to the ref URL we used inside the webchat widget. 

Once there you can add up to 10 payloads to be used directly to the user's profile;

...

Let’s take the example of adding the source the user came from, so the page on your website. 

On the first payload, line let’s add the custom user field “traffic_source”

...

Once done do not forget to press the Save button in the top right corner. 

When returning to your webchat installation script you can now add your preferred data to the ref parameter.

Let’s say you have added this widget to your landing page. The traffic source can then be the name of your landing page or whatever works for you. It could then look something like this;

...

To add a payload you go with 2 Hyphens and then your value so in this case, it is “--ebook-7figure-income”

Once a visitor interacts with this webchat widget on that page you will see that this value will then be added to their user profile;

...

As mentioned you will be able to save up to 10 different kinds of payloads this way. 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:

1. Navigate to Webchat Widget Settings: Access the settings menu for your webchat widget.

2. Locate the Channels Option: You will find an option labelled Channels in the settings.

...

3. 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

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

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”

Image Added

The setup will look like the following:

Image Added

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:

$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.

<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

1. Copy the snippet code into the header of your website, the same place where you place the snippet code for the bot itself.

2. 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.

3. Using the same user_id, create the identifier hash from your server or website’s backend using SHA256 algorithm with HMAC enabled.

4. 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.

You can find the webchat widget CSS selectors here:

These CSS Selectors can be used to further customize the chat widget iframe

Advanced Section

There are many customizations you can do with the webchat button. Some are a bit more advanced hence why we are going to be putting them down in this section instead. 

Installing multiple widget types and different starting flows on your website

With the webchat widget, you are able to install as many types as you wish on any of your pages inside your domain. 

Once you generated your desired widget type you can add a ref parameter to it. This allows you to start any flow of your preference with ease.

Create your ref URL

The way to do this is you can create any kind of ref URL inside the tool section;

...

Once you have created your ref URL you will have also connected it to your flow of preference. You can now use this ref URL by copying the ref parameter;

...

 Adding the ref parameter to your webchat installation code. 

Now that you have created your ref URL and copied the ref parameter it is time to add it to your webchat installation script. 

The way to do that is very easy;

...

If you have pasted in your webchat installation script the only thing you will need to do is by adding a question mark after .js, and add ref=, then add your copied ref parameter from the ref URL you created.

This will override the existing default starting flow and with this, you will be able to start your preferred flow instead. 

It opens up the way to use the same widget on different pages but with different starting flows. 

Use cases for this could be;

• A landing page requires a specified sales flow

• Customer support starts with a support flow 

But it gets even better!

Since you are using the ref URL parameter you are also able to add payloads to the widget as well. 

Payloads help you add specific pieces of data directly to the user’s custom fields without the user even needing to give them to you. Example could be you want to know from which section of the website the user is coming from. Let’s say he or she came from a landing page, you can then add this inside the widget as a payload to be saved to the user profile. 

Adding payloads to the webchat widget

In order to add a payload we need to return to the ref URL we used inside the webchat widget. 

Once there you can add up to 10 payloads to be used directly to the user's profile;

...

Let’s take the example of adding the source the user came from, so the page on your website. 

On the first payload, line let’s add the custom user field “traffic_source”

...

Once done do not forget to press the Save button in the top right corner. 

When returning to your webchat installation script you can now add your preferred data to the ref parameter.

Let’s say you have added this widget to your landing page. The traffic source can then be the name of your landing page or whatever works for you. It could then look something like this;

...

To add a payload you go with 2 Hyphens and then your value so in this case, it is “--ebook-7figure-income”

Once a visitor interacts with this webchat widget on that page you will see that this value will then be added to their user profile;

...

As mentioned you will be able to save up to 10 different kinds of payloads this way. 

Pre-fill user data for the web chat user

If you already have the user’s information like name or email, etc, you can pass that information directly to the web chat user.

Also you can pass extra parameters directly to the web chat user’s user custom field.

Passing user information

You can use add this script to pass the user information to the web chat user.

    <script>
    window.addEventListener("chatbot:ready", function () {
        window.$chatbot.setUser("XXXX", {
          email: "YYYYYY",
          name: "ZZZZ",
          avatar_url: "https://res.cloudinary.com/gmdigital/image/upload/v1618453871/profile/3636079236501557.jpg"
      });
});
</script>

You will need to make sure the userID XXXX is unique for each user.

Passing extra parameters to web chat user

If you want to pass the extra parameters to the web chat user, you can using the code below

    <script>
    window.addEventListener("chatbot:ready", function () {
        window.$chatbot.setCustomAttributes({
            user_fields: {
                provider: "XXXX",
                issue_title: "YYYY"
            }
        });
});
</script>

Please make sure the name of the user custom field is the same name you have in your UChat Chatbot.

In the example above, the name “provider” & “issue_title”, we have the exact same name in our chatbot.

...

You can watch the video tutorial here to learn more

...

Frequently Asked Questions:

1. Can I change the footer of the web chat widget?

2. Can webChat widget be opened by default without click?