Webchat Script

Customise the display of a Webchat popup on a webpage.

The Webchat popup is embedded into webpage bodies with the script provided in its settings.

These Javascript commands control the popup in various ways:

Script	Description
window.proto.open()	Opens the popup
window.proto.close()	Closes the popup
window.proto.hide()	Hides both the toggle button and popup
window.proto.show()	Shows both the toggle button and popup
window.proto.startchat()	Starts a chat
window.proto.isOpen()	Checks if the popup is open
window.proto.hideToggleButton()	Hides the toggle button
window.proto.triggerProactiveMsg('Proactive message ID')	Triggers the Proactive message ID

Check Toggle State

To check if the popup is open or closed, you can also use the following code:

Webchat embed script

<script type="text/javascript">
   window.protoSettings = {
      id,
      ...
      onOpen: () => console.log('Webchat opened'),
      onClose: () => console.log('Webchat closed'),
   };
</script>

---

Hide Toggle Button

A showToggleButton property can keep the popup toggle button permanently hidden:

Webchat embed script

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

---

Identify a Person

To send your audience member's custom ID to Proto so they are correctly created—or matched with an existing one—add a new line with the ID as shown below.

Webchat embed script

<script type="text/javascript">  
  window.protoSettings = {
    id: 'CHANNEL ID',
    onInit: function () {
      window.proto.identify('YOUR CUSTOM 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 register people in Proto, make sure the ID in the snippet exactly matches the format of the one you're sending via API. A new person is created if the IDs are not a precise match.

Make sure to only send the window.proto.identify('') line when the person is authenticated on your website and the ID is not empty. If the person is not authenticated and/or you don't have their ID, this line should not be included or will send an empty ID value. All people with an empty ID will be identified as the same person.

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

---

Updating Customer Details via Webchat

The Webchat SDK allows you to identify a person using a unique ID and optionally update their existing details during a chat session. This helps keep user information accurate and provides additional context to the AI.

You may include standard fields such as phone number and email, as well as approved custom fields that already exist in your Proto configuration.

window.proto.identify("CUSTOM_ID", {
  phone_number: "xxxxx",
  email: "[email protected]",
  custom_fields: {
    Token: ""
  }
});

Updates are applied to the existing person profile associated with the provided ID. Only custom fields that already exist can be updated. All updates are sent securely and validated before saving.

Backward Compatibility

This enhancement is fully backward compatible. Existing implementations using window.proto.identify("CUSTOM_ID") continue to work without changes.