Webchat

The Webchat channel enables chatbots and agents to engage in conversations with customers through your website.

How to Create and Deploy a Webchat Channel

To begin deploying using Webchat, navigate to the Chatbots tab and click on Channels. To create a new channel, click on + Create Channel.

A new window will open where you need to select Webchat. Add a name for the channel; this name will appear to users when the channel is deployed. Next, select the default language for the channel.

Once the new channel is created, click the toggle button to enable it. Then, click on the channel you just created and open the Setup tab. You will see a code snippet; copy this code and paste it before the </body> tag on your website.

Please note that the channel must be enabled before you can test it on your website. To do so, simply enable the toggle button that appears next to the channel created.

Identify the Customer

To send your external customer ID to Yola so the customer is correctly identified and matched with an existing one, add a new line with the customer's id as shown below.

<script type="text/javascript">
  window.protoSettings = {
    id: 'CHANNEL ID',
	onInit: function () {
	  window.proto.identify('YOUR INTERNAL CUSTOMER ID');
	},
  };
  var prs = document.createElement('script');
  prs.src = 'https://embed.proto.cx/index.umd.js';
  prs.type = 'text/javascript';
  prs.async = true;
  prs.onload = function () {	
    window.proto.init(window.protoSettings);			
  };
  document.head.appendChild(prs);
</script>

If you're using API to create Customers in Yola, make sure the ID in the snippet exactly matches the format of the one you're sending via API. Otherwise, a new customer will be created instead of matching with a new one.

Customizing the Bot

To customize the bot, open the window called Basics inside the channel. Here, you can change the app name, language, enable voice, emojis, attachments, and choose to hide the webchat when there are no agents online.

For further customization, open the window called Brand. In this section, you can modify text elements such as the title, description, message placeholder, and start chat button placeholder. You can also adjust style elements such as borders, colors, widget icon, widget shape, and widget position.

Prechat Form

To enable the prechat form, click on the Pre-chat form tab and enable the toggle button. In this section, you can add fields for the name, email, phone number, or custom fields that you have previously created. If you want certain fields to be required, simply check the "Required" checkbox. Remember to click Save to apply the changes.

Mobile Behaviour

For configuring the webchat appearance on mobile devices, adjust the settings in the Mobile screen width threshold. Specify the size threshold for mobile devices, and choose whether to display the webchat in fullscreen or hide it on mobile.

Control the Webchat widget

The following table shows the Proto script that can be used to control the display of the widget:

If you want to check if the widget is open or closed, you can also use the following code:

window.protoSettings = {
      id,
      ...
      onOpen: () => console.log('Webchat opened'),
      onClose: () => console.log('Webchat closed'),
    };

To hide the bot avatar when the widget loads, you can use the showToggleButton option to keep it hidden:

<script type="text/javascript">
  window.protoSettings = {
        id: '',
	showToggleButton: false	
	onInit: function () {			
	}
  };
  var prs = document.createElement('script');
  prs.src = 'https://embed.proto.cx/index.umd.js';
  prs.type = 'text/javascript';
  prs.async = true;
  prs.onload = function () {	
    window.proto.init(window.protoSettings);	
  };  
  
  document.head.appendChild(prs);
</script>

PreviousSetting your user statusNextMessenger

Last updated