How to integrate and customize the Webchat channel?
This article describes the integration and customization of the webchat channel.
Webchat is a system that uses easily accessible web interfaces. By connecting this channel with Botmaker on your website to automate responses or provide support with live chat agents, you can communicate with users in real time, providing a better customer service experience.
Estimated reading time: 06 minutes
How to integrate the channel?
To integrate the webchat channel, log in to the platform and go to Configuration>Channels (https://go.botmaker.com/#/integrations/channels).
Select Webchat and click on Connect.
You can create and manage webchats in this Channels section, and integrate them into your website.
How to customize the channel with styles and colors and integrate it into your website?
The webchat channel interface offers a simplified version for integration into the website through the script code to be included in the body tag of your web page.
The webchat control panel thus presents three important tabs:
Install: You can integrate the channel with your website using the script code.
General: You can select the position of the web chat within your site, as well as the typography.
Personalization: You can customize it using different styles and colors by placing yourself in the webchat window on the left.
- In the Install tab you will be able to access the script code to integrate the webchat into your website.
Note: the blue slider bar allows you to enable or disable the webchat. Remember to activate it whenever you want the webchat to be available on your web page.
- The General tab allows you to define the position of the webchat, the display forms and the typography to be used in conversations with users.
- The Personalization tab allows you to change the colors and styles of your webchat by positioning yourself in it.
Additionally, by clicking on +New, you can access different themes with designs and colors. By clicking on Create webchat, a new webchat will be created with the selected theme, which you can customize according to your preferences.
How to customize webchat messages?
You can set up a persistent menu that is always visible in the webchat. This option allows the user to easily access the functionalities of your chatbot. To do this, enter options that direct the user to important flows of your chatbot by clicking on the Configure default messages button, which is located on the right side of the screen at the top.
In this case, we have configured three options for the persistent menu, as shown below:
Additional considerations
By clicking on Discard changes, it is possible to undo your webchat settings or style changes. On the other hand, to make the changes or style settings, fonts, messages, etc., visible to users, you must click on Publish changes.
Finally, in the Chatbots section, you will be able to select the chatbot of your interest and test your webchat in real time to see if it meets your needs.
Use of variables in the webchat channel
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.
How do you keep your system ID?
If you want to keep or use a unique system ID associated with the chat, you can send that data in the userIdOnBusiness variable inside the BOTMAKER_VAR.
<script>
<!-- All variables must be defined here-->
var BOTMAKER_VAR = {
userIdOnBusiness : 'myBusinessId',
...
};
(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>
MOBILE APP INTEGRATION
To integrate the webchat into your mobile, you can choose to:
- Embed the webchat in a webview. The same script as the web is used. For a better mobile experience, it is recommended to use the exposed methods of the webchat. Example:
- Integrate it into your mobile App's own chat by incorporating and processing the outgoing and incoming messages through the Botmaker API. In this case, the /intent/processMessage service is used (to process the user's question and receive the bot's response) and for manual support by agents, the /message/v3 service is used to send the agent's messages.
The webchat channel is a flexible and useful tool for your users since it does not require installing any specific software allowing them to chat directly from the website. In this way, you will have customer service according to the expectations of your audience in a digital channel that brings people who have already had contact with your business or are getting to know it for the first time.
Remember to visit our Help Center for further information.