Using Website Custom Buttons

CONTENTS

Overview: 

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

The widget can trigger one of the following six actions: 

  • Open widget ==> open-widget
  • Start chat ==> start-chat
  • Start video call ==> start-call
  • Start audio call ==> start-audio-call
  • Start scheduling ==> start-scheduling
  • Start contact form ==> start-form
  • 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 the script from the “Team Center’ in your website  (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 custom buttons on your website.

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

 

To trigger the widget from an external button on your HTML page, 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. To prevent the widget from being presented (so 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
  • Start contact form ==> start-form
  • Close widget==> close-widget

‍

Path 2: use the onclick event: 

Example: 

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

‍

Explanation: 

  • To start an action programmatically, add the onclick handler to any HTML element  - triggerConsoltoAction as per the example 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'll need to verify the Consolto widget is ready. This can be done programmatically. 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

 

To trigger the widget from an external button on your HTML page, 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. To prevent the multi-widget from being presented (so that customers see only your buttons), toggle the “Hide the multi-agent-widget” switch on the “Team 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
  • Start contact form ==> start-form
  • Close widget==> close-widget
  1. To open the widget on multiple agents (instead of a specific agent): use the open-widget action and data-et-agent-id="multi"
  2. To select a random AVAILABLE agent, put et-agent-id="AVAILABLE"

Path 2: use the onclick event: 

Example: 

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

‍

Explanation: 

  • To start an action programmatically, add the onclick handler to any HTML element - 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'll need to verify the Consolto widget is ready. This can be done programmatically. Refer to the "Trigger the widget programmatically" section.

‍

Q&A: 

Q: How can I select an available agent programmatically? 
A: in the et-agent-id field, put "AVAILABLE". We will select one of the available agents randomly.

‍