# Webchat Chatbot
* [1 How to access the webchat widget](#how-to-access-the-webchat-widget)
* [2 How to customize the webchat widget](#how-to-customize-the-webchat-widget)
* [2.1 Content](#content)
* [2.1.1 Chat Bubble](#chat-bubble)
* [2.1.2 Conversation button](#conversation-button)
* [2.1.3 Welcome message](#welcome-message)
* [2.1.4 Out of office message](#out-of-office-message)
* [2.1.5 Pre Chat Form](#pre-chat-form)
* [2.1.6 Default Start Flow](#default-start-flow)
* [2.1.7 Skip the conversation button](#skip-the-conversation-button)
* [2.1.8 Greeting Messages](#greeting-messages)
* [2.2 Settings](#settings)
* [2.2.1 Language](#language)
* [2.2.2 Notification sound](#notification-sound)
* [2.2.3 Features](#features)
* [2.2.4 Whitelist domain](#whitelist-domain)
* [2.3 Appearance](#appearance)
* [2.3.1 Theme](#theme)
* [2.3.2 Font](#font)
* [2.3.3 Colour](#colour)
* [2.3.4 Start Chat Button](#start-chat-button)
* [2.4 Display Style](#display-style)
* [2.4.1 Style](#style)
* [2.4.2 Design](#design)
* [2.4.3 Install code](#install-code)
* [2.5 Advanced Section](#advanced-section)
* [2.5.1 Installing multiple widget types and different starting flows on your website](#installing-multiple-widget-types-and-different-starting-flows-on-your-website)
* [2.5.1.1 Create your ref URL](#create-your-ref-url)
* [2.5.1.2 Adding the ref parameter to your webchat installation code.](#adding-the-ref-parameter-to-your-webchat-installation-code.)
* [2.5.1.3 Adding payloads to the Webchat widget](#adding-payloads-to-the-webchat-widget)
***
With the webchat widget, you can 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 an omni-Channel chatbot. \
Please note web chat is only available under Omni-Channel.
If you haven’t created an omni channel, you can use the “Set up omni channel” button to create the Omni channel as per the screenshot below:
Once you create the omni channel, give it a name, and then you will see the screenshot below:
You can create a new bot or convert an existing bot into Omni channel.
After you create the omni channel, you can find the webchat Widget from the left sidebar.
### How to customize the webchat widget
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**](#user-content-fn-1)[^1]
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.
Please note Pre Chat Form doesn’t work with embed & full page mode. You need to use a floating or pop-up style.
First of all, you will have the form Header where you can state the purpose of this form and you can 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 select 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.
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.
Also, you can’t have the pre-chat form enabled in order for this to work.
You shouldn’t need to click the button to initiate the conversation now.
#### **Greeting Messages**
You can set up different greeting messages on different pages of your website.
It will show up for the first-time visitor,
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.
#### 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
#### **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;
Please note only one root domain is supported in the Omni channel.
#### Appearance
With these options, you are able to customize your webchat to match your brand colours and preferences;
You have the following options to choose from;
* Theme
* Font
* Colours
* 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 or WhatsApp. These themes will create a similar chat experience 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.
#### **Colour**
With this option, you can change the color palette of your web chat widget
You can customize the following sections:
* Widget Color
* Bubble Icon & Text colour
* 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:
#### **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 website;
The installation code will differ depending on the style of the widget that you selected.
Below is an example of the embedded 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 generate 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 web chat installation script, the only thing you will need to do is add 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. An 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.
[^1]:
