Consolto

Categories

Getting Started
Installation
Widget Center
Troubleshooting
Triggering the Consolto widget programatically

You’re installing Consolto but you prefer to trigger the widget by your own frontend code.

The widget can trigger one of the following five actions: 

  • Open widget ==> open-widget
  • Start chat ==> start-chat
  • Start video call ==> start-call
  • Start audio call ==> start-audio-call
  • Start scheduling ==> start-scheduling
  • Close widget==> close-widget

IMPORTANT NOTE: Before you continue, please note there are separate instructions for “Multi-agent” widget and “Single-agent”. 

If you embed in your website the script from the “Account Center’ (available in our Enterprise plan), use the “Multi-agent widget” instructions.

Path 1: Single-Agent widget

Example: 

window.addEventListener('consoltoEvent', (e) => { // Listen to events sent from Consolto

   if (e.detail.consoltoReady) { // Will be true only when Consolto becomes ready

   var event = new CustomEvent('consolto_h2w', { // Create a custom event that will be dispatched and will trigger one of the actions.

  detail: {

         'et-click-type': 'open-widget', // One of the 5 available actions

  },

   });

   window.dispatchEvent(event); // Here we practically trigger the Consolto widget

   }

});

Explanation: 

  1. In order to start an action programmatically we first need an indication Consolto is ready. List to a consoltoEvent where the detail.consoltoReady is true.
  2. Create a new CustomEvent of type "consolto_h2w" -- host to widget if you stumbled upon the abbreviation :) Make sure to inidicate which action should be triggered by adding the et-click-type as above.
  3. Dispatch the event and it will trigger the Consolto widget. In the example above we've triggered this immediately after the page loads. Feel free to trigger this at a later occasion.

Path 2: Multi-Agent widget

Example: 

window.addEventListener('consoltoEvent', (e) => {

   if (e.detail.consoltoReady) { // need to wait until Consolto is ready

   const event = new CustomEvent('consolto_h2w', { // dispatch an event that will trigger one of the actions.

  detail: {

         'et-click-type': 'open-widget',

         'et-agent-id': '13213212313131',

  },

   });

   window.dispatchEvent(event);

   }

});


Explanation: 

  • The main difference between the multi-agent triggers and the single-agent triggers is the agentId that needs to be added to the customEvent. The agentId can be found in the Consolto-backoffice, under the Account Center ==> Agents ==> Specific agent ==> agentId
  • In order to start an action programmatically we first need an indication Consolto is ready. Listen to a consoltoEvent where the detail.consoltoReady is true.
  • Create a new CustomEvent of type "consolto_h2w" -- host to widget if you stumbled upon the abbreviation :) Make sure to inidicate which action should be triggered by adding the et-click-type as above.
  • Dispatch the event and it will trigger the Consolto widget. In the example above we've triggered this immediately after the page loads. Feel free to trigger this at a later occasion.

Notes

  1. To open the widget on the list of agents (rather than a single agent): use the open-widget action and data-et-agent-id="multi". Otherwise, provide the agentId
  2. If things don't work as expected - make sure the agentId you've provided is right.