Deploy to Your Website

The Webchat channel enables chatbots and agents to engage with customers directly on your website. This allows seamless communication and support in real time, making it a vital touchpoint for customer engagement.

Create and Deploy a Webchat Channel

1. Navigate to the Chatbots Module:

   • Go to the Chatbots module and click on Channels.

2. Create a Webchat Channel:

   • Click + Create Channel.

   • In the new window, select Webchat as the channel type.

   • Provide a Name for the channel (this will be visible to customers when deployed).

   • Select the Default Language for the channel.

3. Enable and Deploy:

   • Click the toggle button to Enable the channel.

   • Open the newly created channel and navigate to the Setup tab.

   • Copy the code snippet provided in the Setup tab.

   • Paste the code snippet before the </body> tag on your website.

Ensure the channel is enabled before testing it on your website. The toggle button must be active for the Webchat to function.

Identify the Customer

To identify and match customers through Webchat:

1. Add the customer’s unique internal ID to the code snippet:

   htmlCopy code<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>

2. Match Customer IDs:

   • Ensure the ID sent in the snippet matches the format of the one sent via the API to prevent duplicate customer creation.

3. Only Send Customer ID When Authenticated:

   • Include the window.proto.identify('YOUR INTERNAL CUSTOMER ID') line only when the customer is authenticated and has a valid ID.

   • Avoid sending an empty ID ("") to prevent all users from being identified as the same customer.

4. Reset Identified Users:

   • You must reset the identified user when they log-out. To reset a previously identified user, include:

     javascriptCopy codewindow.proto.reset();

Customising the Webchat Widget

Basics

Modify fundamental settings to enhance customer interactions:

• Change the App Name and Default Language.

• Enable or disable Voice, Emojis, or Attachments.

• Choose to hide the Webchat widget when no agents are online.

Brand

Customise text and style elements to align with your branding:

• Text Elements: Update title, description, message placeholder, and start chat button placeholder.

• Style Elements: Adjust borders, colours, widget icon, shape, and position.

Pre-chat Form

The Pre-chat Form collects essential information before a conversation starts:

1. Enable the Pre-chat Form:

   • Navigate to the Pre-chat Form tab and toggle the switch to enable it.

2. Add Fields:

   • Include fields such as Name, Email, Phone Number, or custom fields from your setup.

   • Mark fields as Required by checking the respective checkbox.

3. Save Changes:

   • Click Save to apply updates.

Mobile Behaviour

Configure Webchat for mobile devices:

1. Mobile Screen Width Threshold:

   • Set the width threshold to classify devices as mobile.

2. Mobile Display Options:

   • Choose whether to display Webchat in Fullscreen Mode or Hide Webchat on Mobile devices.

This setup ensures optimal customer engagement across all devices and provides a highly customisable support experience through your website.

Related Guides That Might Be Useful

Proactive MessagesAdditional Webchat Script ControlsTelegramLINE