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 Proto so the customer is correctly identified and created ot matched with an existing one, add a new line with the customer's id as shown below.

<script type="text/javascript">
  window.protoSettings = {
    id: '',
	onInit: function () {
	  window.proto.identify('');
	},
  };
  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 Proto, 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.

Make sure to only send the window.proto.identify('') line when the customer is authenticated on your website and the ID is not empty. If the customer is not authenticated and/or you don't have the customer ID, this line should not be included or it'll set customer ID = "" (empty) for all customers you send this line for. This means all customers will be identified as the same customer.

If you wish to reset a previously identified user, you can add window.proto.reset() to the snippet.

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.