Overview: 

You’re installing Consolto and want to display the availability of agents on a customized part of your website? Not a problem!

The Consolto Plugin can transmit agents’ availability states to an element on your page. That way, you can show an indication that lets your customers know when you're online / offline / busy / standby**.

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

‍

Instructions

Find the agent id in the users tab: 

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>

‍

By doing this, you ensure that the Consolto plugin sets 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 want 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 new availability state of the agent.

To listen to such events,  add the following code to the HTML of your page: 

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.

‍