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

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: "CHANNEL_ID",
      showToggleButton: false	
      onInit: function () { }
   };
   var prs = document.createElement('script');
   prs.src = 'https://embed.yola.ai/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 Player

To send your audience member's custom ID to Playcom 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",
  };
  var prs = document.createElement("script");
  prs.src = "https://embed.yola.ai/index.umd.js";
  prs.type = "text/javascript";
  prs.async = true;
  prs.onload = function () {
    window.proto.init(window.protoSettings);
    window.proto.identify("CUSTOM_ID", {
      phone_number: "xxxxx", //Optional
      email: "[email protected]",  //Optional
      custom_fields: {
        Token: "VALUE",  //Optional
      },
    });
  };
  document.head.appendChild(prs);
</script>

If you're using API to register players in Playcom, make sure the ID in the snippet exactly matches the format of the one you're sending via API. A new player is created if the IDs are not a precise match.

Make sure to only send the window.proto.identify('') line when the player is authenticated on your website and the ID is not empty. If the player 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 players with an empty ID will be identified as the same player.

Make sure the custom fields have been created under Workspace Settings > Players > Players Fields.

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