Webchat Channel

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.

How to access the webchat widget

To access the webchat widget you need to create a omni-Channel chatbot. Please note web chat is only available under Omni-Channel.

If you haven’t create omni channel, you can create the “Set up omni channel” button to create the omni channel as per screenshot below:

If you create the omni channel, give it a name, and then you will see the screenshot below:

You can create new bot or converting existing bot into omni channel.

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. 

Once pressed you will enter the main overview of available settings;

Content

The first section of the widget will be the content tab. Here you will find the following options;

• Chat Bubble

• Chat Header

• Conversation button

• Welcome message

• Out of office message

• Pre Chat form

• Default start flow

Let’s go over them 1 by 1.

Chat Bubble

With the chat bubble, you are able to select your preferred bubble icon. You will see that reflecting directly on the preview in the bottom right corner;

You can also choose between having the icon only or combining it with text from the top options of this screen. 

Conversation button

With the conversation button, you can create your own call to action (CTA’s) buttons to allow users to start, continue or start a new conversation;

Welcome message

You can add a welcome headline and tagline to get people to entice people to press on your webchat widget.

Out of office message

With the out of office message you will be able to add a notification to your widget. You will be able to set the reply message as well;

Pre Chat Form

With this setting, you can capture essential data before the chat even starts and save this to any system or custom user field available. 

First of all you will have the form Header where you can state the purpose of this form. After you will be able to insert a field form by pressing the button + Add Field.

You will then be able to select any of the following field types;

After you selected your type you will be able to edit it by pressing the edit button;

Once you are editing any of the fields you will have several options to choose from. Let’s take an email type field as an example;

First of all, you can select the system or custom user field you want to save the value given by the user to. Then you will be able to set the name of the form field label. Inside the placeholder, you will be able to give an example of the format you would like to receive the email in. The hint section will allow you to give additional information about this field type.

The last two options will allow you to determine if the field is required and what width you want the field to be. As a result, it will then look like this;

Once you have fully edited the field to your liking you can press the button done at the top of this field to save the changes. 

Lastly below the fields you will have an additional option to allow the user to write a message prior to entering the chatbot;

This will look like the following on the live view for the user;

This message will be saved in the system field called {{last text input}}.

Default Start Flow

If the pre-chat form is not enabled then you will be to set a default starting flow of your own choosing;

Once pressed you will be able to select any of the flows you have created beforehand;

Skip the conversation button

In the web chat, you can set up and then skip the need to click the button to initiate the conversation.

In order to do that, you need:

• make sure you don’t select other channels in the web chat widget.

• make sure the default start flow is connected.

You can find your connected channel settings here:

Also make sure the start flow is connected to any of your flow.

After you have made the changes, make sure you apply the changes, and then install the code, and test on your website.

You shouldn’t need to click the button to initiate the conversation now.

Greeting Messages

You can set up different greeting messages on different page of your website.

It will show up for the first time user,

And you can find the greeting message settings below:

You can set up which page or pages you want to trigger the greeting message, also you can set up the sender name & profile.

Watch the below video for more details:

Settings

Inside the settings tab you will have the following options to customize;

• Language

• Notification Sound

• Features

• Whitelist Domain

Let’s take a deeper look at each individual setting

Language

With the language setting you can change the display language of a few sections inside the widget;

Just select the language on the left-hand side and you will see the changes reflected in the preview on the right instantly. 

Notification sound

With this option, you will be able to set up your sound for new message notifications your users will hear when in conversation with your webchat widget. 

You can choose out of 21 sounds or select the no sound instead if you prefer.

Features

With this option you can enable or disable certain features inside your widget;

You will have access to the following options;

• 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;

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

https://www.youtube.com/watch?v=Iaz06T9iUsg

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. Web Chat Widget CSS Selectors