Proto AICX Docs
  • Getting Started
    • Glossary
    • Signing-in
    • Main Dashboard
    • Platform Assistant
    • Data Privacy
  • AICX Modules
    • AI Assistants
      • Manage Assistants
      • 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
    • People
    • Analytics
      • Winnow
  • General
    • Settings
      • Company
        • Plan & Billing
          • Interactions Amount
        • Roles & Permissions
        • Users
        • Teams
        • IP Allowlist
        • Whitelabelling
      • Sub-Company
        • 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
    • Enterprise Max
  • 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 Person
  1. Developers
  2. Developer Tools

Webchat Script

Customise the display of a Webchat popup on a webpage.

PreviousChat ScriptsNextDeveloper API

Last updated 3 months ago

The Webchat popup is embedded into webpage bodies with the .

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: '',
      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.

script provided in its settings