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 and Button 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.