Smartly.AI

Website chat

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

Smartly.AI's webchat in a car manufacturer website

Smartly.AI's webchat in a car manufacturer website

Smartly.AI's webchat  in a retail banking website

Smartly.AI's webchat in a retail banking website

On Mobile

And here is how these bots looks like on mobile devices.

Full responsiveness of Smartly.AI webchat

Full responsiveness of Smartly.AI webchat

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.

Click here to activate the webchat service for your bot

Click here to activate the webchat service for your bot

Once the service is launched, new controls will appear

Once the service is launched, new controls will appear

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

The Basics

The Basics

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.

All the colors of the ๐ŸŒˆ

All the colors of the ๐ŸŒˆ

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.

Auto launch or popup message, which school are you?

Auto launch or popup message, which school are you?

Here is the available behaviors you can tweak:

Open on load?
Is the background color of the bot messages

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.

The demo page... Launch it, try it, break it, fix it share it.. Technologic.

The demo page... Launch it, try it, break it, fix it share it.. Technologic.

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 demo is ready!

Your demo is ready!

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.

This code should go to the HEAD section of your web site

This code should go to the HEAD section of your web site

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

In this example, we will change the quick replies shape to rectangular

In this example, we will change the quick replies shape to rectangular

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.

Add the CSS class(es) you want to override here

Add the CSS class(es) you want to override here

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!

the final result

the final result

Browser support

Below is the result of our ongoing tests with different browsers.

Browser

Version

Comment

Chrome - PC

72.0.3626.109

Tested OK

Chrome - Mac

Chrome - Android

Chrome - iOS

73.0.3683.68

Tested OK

Mozilla - PC

65.0.1

Tested OK

Mozilla - Mac

Mozilla - Android

Mozilla - iOS

Edge - PC

42.17134.1.0

Tested OK

Edge - Android

Edge - iOS

Internet Explorer - PC

11.590.17134

Tested OK

Safari - PC

Safari - Mac

Safari - iOS


Website chat


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.