Yola Docs
  • Getting Started
    • Glossary
    • Signing-in
    • Main Dashboard
    • Yola AI
    • Data Privacy
  • AICX Modules
    • AI Agents
      • Manage AI Agents
      • Actions
        • Send Message
        • Send File
        • Show Carousel
        • Show Survey
        • Collect Feedback
        • Create Ticket
        • Human Handoff
        • External Handoff
        • Jump to Trigger/Action
        • If/Else
        • Set Chat Variable
        • Send API Request
      • LLMs
        • Cloudflare Training
      • Publishing
        • Webchat
          • Proactive Messages
        • Facebook Messenger
        • WhatsApp
        • Telegram
        • LINE
        • Africa's Talking
        • Bitrix24
        • Zendesk
    • Inbox
      • Find & View Conversations
      • Message Editor
      • Transfers & Takeovers
    • Livechats
    • Tickets
    • Players
    • Analytics
      • Winnow
  • General
    • Settings
      • Workspace
        • Plan & Billing
          • Interactions Amount
        • Roles & Permissions
        • Users
        • Teams
        • IP Allowlist
        • Whitelabelling
      • Teamspaces
        • Banning
        • Tags
        • Chat Assignment
        • Email Domains
        • Email Templates
        • Exports
        • Canned Replies
        • Custom Fields
        • Custom Profiles
        • Custom Analytics
      • User Account
        • User Aliases
        • Online Status
    • Plans & Pricing
    • VIP Club
  • Developers
    • Developer Tools
      • Chat Variables
      • Chat Scripts
      • Webchat Script
      • Developer API
      • On-Premise & Hybrid Hosting
Powered by GitBook
On this page
  • Check Toggle State
  • Hide Toggle Button
  • Identify a Player

Was this helpful?

  1. Developers
  2. Developer Tools

Webchat Script

Customise the display of a Webchat popup on a webpage.

PreviousChat ScriptsNextDeveloper API

Last updated 18 hours ago

Was this helpful?

The Webchat popup is embedded into webpage bodies with the .

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 Player

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 players in Yola, 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.yola.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.

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

script provided in its settings