Your chatbot works great and want to integrate it to your website?
We get you covered with our native webchat integration.
Here is some screenshots on how our off the shelf looks like on real websites.
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!
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!
Allows you to control the title of the chat box
Allows you to customize the message showing when the user mouse goes on hover the restart button
Allows you to control the message shown in the input field before the user start typing his message
Allows you to customize the photograph of your bot avatar. Can be a JPG, PNG or GIF image.
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.
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.
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
The main background color of the chatbox
When the mouse is on hover a button,
Button primary colorand
Button secondary colorwill be inverted.
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.
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 Pagebutton (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🕺
Developers, here you go!
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.
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.
Don't forget to add the
!importantinstruction so you new class will override the old one.
4/ Refresh the your demo page, your changes are live!
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:
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 3 months ago