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.yola.open()	Opens the popup
window.yola.close()	Closes the popup
window.yola.hide()	Hides both the toggle button and popup
window.yola.show()	Shows both the toggle button and popup
window.yola.startchat()	Starts a chat
window.yola.isOpen()	Checks if the popup is open
window.yola.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.yolaSettings = {
      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.yolaSettings = {
      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.yola.init(window.yolaSettings);
   };  
   document.head.appendChild(prs);
</script>

---

Identify a Person

To send your audience member's custom ID to Yola 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.yolaSettings = {
    id: 'CHANNEL ID',
    onInit: function () {
      window.yola.identify('YOUR CUSTOM 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.yola.init(window.yolaSettings);			
  };
  document.head.appendChild(prs);
</script>

If you're using API to register people in Yola, 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.yola.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.yola.reset() to the script.