How to integrate your bot into your website? Webchat channel integration.

In this article, you will find information on integrating a Webchat channel into the platform.

Estimated Reading Time: 04 minutes

---

Accessing the menu

To understand how to add a WebChat channel to the platform, please take a look at the following tutorial:

• Step 1: To integrate a WebChat channel, you must access the Channels menu (Menu> Channels)

• Step 2: Enable the WebChat channel (default model) by leaving the option as “enabled.”

• Step 3: Once activated, copy the respective code from START to END, and follow the instructions to include the WebChat on your website. (Test Code)

• Step 4: When the integration is finished, click “save.”

WebChat customization

Customize your WebChat, editing various graphical properties to your liking.

If you have multiple WebChats connected to your Botmaker account, you can customize each one of them individually.

You can choose color, font, images and titles that you think will be the most appropriate according to what you need. The result will be a chat with its own unique style.

Doing so is easy!

Under the WebChat tab (in the Channels section), click on “styling”.

You will see this screen next. Click on “styles”.

First, choose a name for your new style.

Adjust all the graphical properties that you wish to modify

Define the bot’s position in your site, that way it will be displayed in the exact position of the lower edge of the screen.

Click on “save” and then on “apply”.

Done! You have successfully customized your WebChat.

Suggested answers

When the user types in the chat, the bot can display up to three suggested answers.

To be able to activate this feature, one of the intent triggers must be marked as a suggestion for the user.

Start menu

A persistent menu can be active with up to three buttons:

If you want to enable it, select the create ticket option or contact support@botmaker.com.

---

Use of variables in WebChat

Additionally, you can also edit the existing variables at the beginning of a WebChat conversation.

Establishing variables

Within the code snippet used to integrate the WebChat on your site, you can set variables with external information.

You must add a new object containing the variables with the values to be edited. The object is BOTMAKER_VAR.

<script>
<!-- All variables must be defined here -->
    var BOTMAKER_VAR = {
        firstName: 'newValueForFirstName', 
        lastName: 'newValueForLastName', 
        customVar: 'newValueForCustomVar'
        };
        
    (function () {
        let js = document.createElement('script');
        js.type = 'text/javascript';
        js.async = 1;
        js.src = 'https://go.botmaker.com/rest/webchat/p/XXXXX/init.js';
        document.body.appendChild(js);
    })();
</script>

You can edit your variables, such as firstName and lastName, or new variables. The only condition is that they already exist in the bot.

Methods

You can use these methods anywhere and call them with a javascript function.

• Hide webchat: bmHide()
• Show webchat: bmShow()
• Minimize webchat: bmMinimize()
• Maximize webchat: bmMaximize()

---

Botmaker

---