Consolto

Categories

Getting Started
Installation
Widget Center
Troubleshooting
Using Website Custom Buttons

Overview: 

You’re installing Consolto but you prefer to trigger the widget by buttons on your own website (rather than the widget icon provided by Consolto). 

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. 

Otherwise, use the “Single-agent widget” instructions. 


Single-Agent Widget


Path 1: Button triggers:

Your consolto plugin can be triggered by your own custom buttons on your website.

Live example: https://www.consolto.com/demos/external-buttons-demo

 

In order to trigger the widget from an external button on your HTML page, simply add the following attribute to your element: data-et-click-type="start-chat"  

Example:

<div data-et-click-type="start-chat"> Start chat</div>

Notes: 

  1. In order to hide the widget from being presented (such that customers see only your buttons), toggle the “Widget” button on the Consolto backoffice menu to “OFF”
  2. The widget can trigger one of the following 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

Path 2: use the onclick event: 

Example: 

onclick="triggerConsoltoAction('open-widget')”

Explanation: 

  • In order to start an action programmatically, add to any HTML element the onClick handler - triggerConsoltoAction as below:

           onclick="triggerConsoltoAction('open-widget')”

  • The action will not start unless the Consolto widget is ready. If you are sure the button will be clicked after Consolto has been fully loaded and ready, this is an easy way to trigger actions. Otherwise, you'd need to verify the Consolto widget is ready. This can be done programatically. Refer to the "Trigger the widget programmatically" section.

Multi-Agent Widget


Path 1: Button triggers:

Your consolto plugin can be triggered by your own custom buttons on your website.

Live example: https://www.consolto.com/demos/external-buttons-demo

 

In order to trigger the widget from an external button on your HTML page, simply add the following attribute to your element: data-et-click-type="start-chat"  

Example:

<div data-et-click-type="start-chat"data-et-agent-id="13213212313131"> Start chat</div>

Notes: 

  1. In order to hide the multi-widget from being presented (such that customers see only your buttons), toggle the “Hide the multi-agent-widget” switch on the “Account Center”
  2. The widget can trigger one of the following 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
  1. To open the widget on the list of agents (instead of a specific agent): use the open-widget action and data-et-agent-id="multi"

Path 2: use the onclick event: 

Example: 

onclick="triggerConsoltoAction('open-widget', 'AgentIdHere-123123123')"

Explanation: 

  • In order to start an action programmatically, add to any HTML element the onClick handler - triggerConsoltoAction as below:

          onclick="triggerConsoltoAction('open-widget', 'AgentIdHere-123123123')"

  • The action will not start unless the Consolto widget is ready. If you are sure the button will be clicked after Consolto has been fully loaded and ready, this is an easy way to trigger actions. Otherwise, you'd need to verify the Consolto widget is ready. This can be done programatically. Refer to the "Trigger the widget programmatically" section.