Webchat
Your chatbot works great and want to integrate it to your website?
We get you covered with our native webchat integration.
How it looks like?
Here is some screenshots on how our off the shelf looks like on real websites.
On Desktop
On Mobile
And here is how these bots looks like on mobile devices.
Love what you have seen so far? Let's see how you can get and customize yours now!
Where to find it?
From the Builder, click on the Integrations button.
A panel with all the available integrations will appear, click on Webchat.
A window will appear with everything you need to customize your webchat 🎅
If you are opening this menu for the website, you will notice that the Webchat service is turned off, so the first thing to do is to click on the Launch Webchat
button.
Once the service launched, you will notice 3 different control buttons on the bottom right:
Stop webchat
: Allows you to stop the webchat service and hide it from a website until next launch.
This is very practical in case of maintenance for example.Demo page
: Allows you to try your bot on a simple web page.Save
: Allows you to save your configuration. Do it everytime you change something and refresh the target website in your browser to see them in the webchat.
Now that the service is up, lets go through the different sections to customize our webchat!
The Main settings section
Head Title
Allows you to control the title of the chat box
Restart message
Allows you to customize the message showing when the user mouse goes on hover the restart button
Input placeholder
Allows you to control the message shown in the input field before the user start typing his message
Bot Avatar
Allows you to customize the photograph of your bot avatar. Can be a JPG, PNG or GIF image.
The Colors section
Image that your website has a specific colort chart you want to follow.
We do offer many customizations from the integration, let's check them out.
Primary color
Is the color of:
- the title bar background
- the user text background
- the chatbox opener button background.
Primary text color
Is the color of:
- the title bar text
- the user text
- the chatbox opener button icon.
Secondary color
Is the background color of the bot messages
Secondary text color
Is the text color of the bot messages
Button primary color
Is the color of:
- the background of the quick replies
- the background of the text buttons
- the background of the carousel buttons
Button secondary color
- the text color of the quick replies
- the text color of the text buttons
- the text color of the carousel buttons
Background color
The main background color of the chatbox
Note
When the mouse is on hover a button,
Button primary color
andButton secondary color
will be inverted.
The Behavior section
This section will allow you to manage the behavior of your webchat once installed on your website.
Here is the available behaviors you can tweak:
Open on load?
Defines whether the webchat should be automatically opened each time a user comes to your website.
Display a pop up?
If you go for the popup option you will be able to configure all the pop up fields:
- Pop up title
- Pop up description
- Pop up button call to action
Maximum input length
Because sometimes you dont want to let the user ask for very long requests, we allow you define the limit of the text input, so the user is forced to focus on the most important facts of his requests.
Drive engagement with a popup
From our experience, a well crafted popup can drive more engagement with your chatbot.
The Demo page section
In order to give you a quick look at the final result of your webchat before it goes in production, the platform allows you to play with your bot on a web page created and hosted automatically for you.
Here is what the Demo page looks like.
To activate a demo page for your bot:
- Make sure you have launched the webchat service for this bot
- Click the Demo Page section like shown below then open the url provided (1)
- Or click on the
Demo Page
button (2).
Your webchat demo is easy to share
Happy with what you have built, share it!
You can send the demo page link to your colleagues, beta testers, customers,...
They will be able to chat with your bot with no other requirement than having an internet connection🕺
The Code section
Developers, here you go!
Integration Code
In this section you will a very important piece of code, wich is basically on line of javascript that will add your chatbot to any website 😎
The integration code is available in the first field of the Code section.
The best place for the integration code
This code should go to the HEAD section of your web site.
Custom CSS
While we do offer a generic and configurable webchat, you can can go further in customizing it so it can perfectly match the design of your website.
To so, here is the steps you can follow:
1/ Inspect the CSS code of the element of the webchat you want to change
In this case, we want to change the shape of the quick replies from rounded to squared
2/ Change the code until you get the desired result
3/ Copy paste the modified classes into the Custom CSS
field of the Webchat integreation.
Hit save.
Important
Don't forget to add the
!important
instruction so you new class will override the old one.
4/ Refresh the your demo page, your changes are live!
Customizing the webchat font
In the process of design uniformisation, it can be interesting to use the webxite font family in your chatbox.
Here is how you can customize the font of your webchat.
You can try yourself by adding the following code in the CSS section of your webchat integration:
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
.smartly-font-family {
font-family: 'Metal Mania', cursive !important;
}
If you have a custom font, change the url and font family name in the code below.
Don't have a custom font yet? You can find many fonts in this website.
Updated 6 months ago