Consolto

Categories

Getting Started
Installation
Widget Center
Troubleshooting
Availability Cues on website elements

Overview: 

You’re installing Consolto and you’d like to show the availability of agents on a customized part on your website? Not a problem!

The Consolto Plugin can transmit agent’s availability states to an element on your page. That way you could show an indication that you're online / offline / busy / standby**.

Live example: https://www.consolto.com/contact


Instructions

Once the agent's availability changes, we perform two actions: 

  1. Class Modification: We change the class of an element with id=<agentId>to one of the new classes as described below. 
  2. Event dispatching: We dispatch an event with information about the availability state change.

Class modification: 

Instructions: 

  1. Select an HTML element that will change its class.
  2. Set the id of that element to the agent's ID.

Example: 

<div id="123321123">Availability Cue </div>

As a result, the Consolto plugin will set the classes of this element based on the classes below: 

New Classes:

  1. consolto-agent-offline
  2. consolto-agent-available
  3. consolto-agent-busy
  4. consolto-agent-standby**

Troubleshooting:

  1. Verify that the "Website API Calls" feature is enabled to enjoy this feature! (Available based on plan)
  2. Make sure you put the agentId as the ID of the HTML element you would like to modify.
  3. Make sure that only one HTML element has that ID
  4. Make sure you style a css class that is named as the classes above

 

Event dispatching

Similar to other events sent by Consolto to the hosting website, you can also listen programmatically to changes in the availability state: 

We dispatch a custom event on the "window" element with an event named "consoltoEvent". An object with the following details is attached to that event:

  1. action = AVAILABILITY_STATE_CHANGE
  2. label = agentUserId - the id of the agent that has changed the availability state.
  3. value = newAvailabilityState - the availability state that was changed.

In order to listen to such events, you should place in the HTML of your page the following code to catch the event: 

Example: 

  window.addEventListener('consoltoEvent', function (e) {

   console.debug(e.detail); // will contain category, action, label, value. Make sure to listen to action=AVAILABILITY_STATE_CHANGE

   }); 


Notes: 

  1. Please note that this is a beta feature and we'd appreciate any feedback. 
  2. Verify that the "Website API Calls" feature is enabled to enjoy this feature! (Available based on plan)
  3. **Standby state will be used in the future, once we launch a mobile application. It is currently not supported.