Website Chat
Last updated
Last updated
How to add a live chat widget to any website
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.
To discover the webchat widget you will need to open your Omnichannel bot and select the Webchat widget tab
Please note webchat is only available under Omni-Channel.
Great, now that you have selected the webchat widget you will now see your main editing pages as shown below. This is where you can configure your branding and so much more.
The first section of the widget will be the content tab. Here you will find the following options;
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
Let's go ahead and add our own branded logo, this example we're using the Monday.com logo. You will also see the changes to the icon in the lower right side of the screen too.
Adding text with your icon
If adding text to your chat bubble, be sure to make it intriguing. Not just a boring quote like chat with me. Make your website visitor take action.
And this is what the result will look like.
Note: If you cannot see the text in the display, don't panic... You can set up the font colour shortly under the appearance tab
Add your logo or a personalised image with a greeting message.
By default it already has our chatbot app logo and a basic greeting text message. Let's go ahead and make it look better
There are multiple media types you can use for your chat header image. So if you don't want to use a logo, maybe try an animated GIF 🕺
Great we have added an image to our header. Below the image tab you will see another tab called Header name. You can name this anything you want. Maybe a business name or even a catchy slogan.
Later on in the section we will show you how to add more greeting text. Note: If using welcome text it will replace the header name. "Just in case you see it disappear"
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. Any edits will be updated automatically. If left blank, the defaults text will be used.
You can add a welcome headline and tagline to get people to press on your webchat widget. Remember we mentioned if you use the welcome message it removes the chat header title.
With the out of office message you will be able to add a notification to your widget and set the reply message too
The out of office message will display when you are offline
With this setting, you can capture essential data before the chat even starts and save this to any system or custom user field available.
Let's take a look at all the pre chat form settings below
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:
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
And finally, this is how the pre-chat form will display 😊
If the pre-chat form is not enabled then you will be able 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
Inside the settings tab you will have the following options to customise:
Let's dive a little deeper in the settings tab
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. Below we changed the language to display French. As you can see some of the text components have automatically updated.
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 also mute if required.
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
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 recognised.
Channels enables you to take your website visitors to chat on their favourite messenger channel.
Select your channels, add the styling components and you are done.
Make sure you have already added your channels to your existing chatbot
With these options, you are able to customise your webchat to match your brand colours and preferences
You have the following options to choose from;
With themes you are able to customise the visual appearance of your webchat widget with pre-set values
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 with your visitors.
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.
Keep your chat widget on brand with multiple colour styling options to choose from.
With this option you can change the border radius of the button “start conversation” or choose the option custom to add your own radius instead. It will help you keep things in sync with your own website buttons.
A great way to really show your brand off or even being a little quirky with your design. Is to style your quick reply buttons. If you are not sure what quick reply buttons are click here
Quick reply buttons are designed to help your visitor navigate to what they want FAST!
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
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.
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 a floating Modal moved to the left side.
The install code will generate your script of the desired style of chat widget you want to put live on your page it will look something like this 👇
Trigger dedicated chatbot flows depending on what website page, landing page or even funnel steps that your web visitors are viewing.
