# Advisor Desktop Widget Event APIs

Advisor Desktop Widget Event APIs enable the Advisor Desktop to be used in tandem with another third-party browser-based application. The third-party application would most likely be a CRM system for an at the pane integration use case. It involves a fully client (browser) side integration.

A JavaScript file served from an eGain installation is included in the third-party application. This file enables a two-way message exchange between the Advisor Desktop and the third-party application. A few lines of code in the third-party application allows it to receive various types of messages from Advisor Desktop, as well as allow for sending messages to Advisor Desktop. E.g., whenever the user selects a new activity in the Inbox in Advisor Desktop, the information about it can be broadcasted and it can be received by an interested third-party application.

# What needs to be done on eGain side?

In eGain Administration Console, add the origin of the third-party application URL in the CORS configuration. Refer the section Enabling Cross-Origin Resource Sharing in Administration user guide on how to add the origin. E.g., if want to use Duo with your MS Dynamics which has the URL like https://mycrm.crm.dynamics.com, you should enable CORS for https://mycrm.crm.dynamics.com.
What needs to be done on third party application side?

1. Include a JavaScript file from the eGain installation from where Advisor Desktop is served.
The URL to the JS file is `https://youregaindomain/<context-root>/web/apps/resources/js/egainremotesolve.js`


For example:


```
 <script src="https://www.mydomain.com/system/web/apps/resources/js/egainremotesolve.js" type="application/javascript"></script>
```

1. If the third-party application restricts iframe insertion using content-security-policy directives like child-src and frame-src, it needs to be changed to allow for the eGain application domain e.g., https://youregaindomain.
2. Write JavaScript code to receive and send messages to Advisor Desktop. Sample code will be published.
3. Take action based on messages received. For example, load customer details locally in the third-party application when a new activity is selected in Advisor Desktop.


# Events published by Advisor Desktop to Third party

The following events are published by the Advisor Desktop when the eAdvisor Desktop Widget Event library is included in a third party application UI.

## All events


```
	egainSolve.init(function(){
        //subscribe to all events
        var listener =    egainSolve.subscribeAll(function(message){
			console.log("event name", message.type);
            console.log("event data",message.data );
        });
        //listener will get destroyed if called unsubscribeAll
        //listener.unsubscribeAll();

    });
```

## activityselected

This event is generated when an activity is selected in the Advisor Desktop. The event is supported for following channels:

+ Chat
+ Email
+ Secure message
+ Task
+ Calltrack



```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('activityselected', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

##### Payload


```
{
	"activity": {
 	   "type": type,
    	"id": activity id,
    	"subject": subject,
    	"caseId": case id,
    	"customerId": customer id,
    	"subType": activity sub type,
    	"channel": channel name in case of messaging chat
  },
}
```

## chatmessage

This event is generated when a chat message is received or sent


```
egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('chatmessage', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	author: author,
	authorType: type of author i.e. SYSTEM, AGENT or CUST,
	content: message content,
	originalMsgObject: original message object with all message parameters,
	activity: An object of all activity data
}
```

## chatcomplete

This event is generated when a chat is completed.


```
egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('chatcomplete', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	"activity": {
    	"type": type,
    	"id": activity id,
    	"subject": subject,
    	"caseId": case id,
    	"customerId": customer id,
    	"subType": activity sub type,
    	"channel": channel name in case of messaging chat
  }
}
```

## caseselected

This event is generated when a case is selected on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('caseselected', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
{
	case: {

	id: case id
}
}
```

## folderchanged

This event is generated when a folder is selected on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('folderchanged', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
	
{
folder: an object containing folder data like id, type , parent etc.
}
```

## nonchatactivitycomplete

This event is generated when activity(s) are completed on the Advisor Desktop. The event is supported for following channels:

+ Chat
+ Email
+ Secure message
+ Task
+ Calltrack



```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('nonchatactivitycomplete', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
	
{
activities: an array of object containing activity data like id, type, caseId, customerId, subject
}
```

## nonchatactivitysave

This event is generated when an activity is explicitly saved from reply pane on the Advisor Desktop. The event is supported for following channels:

+ Email
+ Task



```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('nonchatactivitysave' function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	"activity": {
        "type": type,
        "id": activity id,
        "subject": subject,
        "caseId": case id,
        "customerId": customer id,
        "subType": activity sub type
}
```

## emailsend

This event is generated when an email is sent on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('emailsend', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	"activity": {
        "type": type,
        "id": activity id,
        "subject": subject,
        "caseId": case id,
        "customerId": customer id,
        "subType": activity sub type
}
```

## emailsendandcomplete

This event is generated when an email is sent and completed on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('emailsendandcomplete', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	"activity": {
        "type": type,
        "id": activity id,
        "subject": subject,
        "caseId": case id,
        "customerId": customer id,
        "subType": activity sub type
}
```

## transferactivities

This event is generated when activities are transferred on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('transferactivities', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	activities: an array of object containing activity data like id, type, caseId, customerId, subject
}
```

## customerchanged

This event is generated when a customer of selected activity is changed through the info pane on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('customerchanged', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{customerId: customerId}
```

## casechanged

This event is generated when a field on the case of a selected activity is changed through info pane on the Advisor Desktop. If a new case is created then new case id is sent.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('casechanged', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{caseId: caseid}
```

## casecustomattributechanged

This event is generated when a custom attribute field on a case of a selected activity is changed through info pane on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('casecustomattributechanged', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	caseId: caseid,
	customAttributed: an array of modified custom attribute name value pair
}
```

## activitychanged

This event is generated when an activity field of a selected activity is changed through the info pane on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('activitychanged', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	activityId: activity id
}
```

## activitycustomattributechanged

This event is generated when a custom attribute field on a selected activity is changed through the info pane on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('activitycustomattributechanged', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	activityId: activity id,
    customAttributed: an array of modified custom attribute name value pair
}
```

## calltrackfieldchange

This event is generated when a when content or field of a call track reply pane is changed on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('calltrackfieldchange', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
{
	activityId: activity id,
    subject: subject,
    fieldName: name of field or editor in case of content,
    value: new value of field value pair
}
```

## replyfieldchange

This event is generated when any field except 'content' changes in reply pane on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('replyfieldchange', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
{
  "activity": {
    "type": type,
    "id": activity id,
    "subject": subject,
    "caseId": case id,
    "customerId": customer id,
    "subType": activity sub type.
    "channel": channel name in case of messaging chat
  },
  "fieldName": field name,
  "value": value of field,
  "displayValue": display value if combo or multiselect field,
  "custom": false
}
```

## pullchatblink

This event is generated when pull chat button start or stop event for a chat is received on the Advisor Desktop.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('pullchatblink', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
{
  "queueId": queue id
  "start": start or stop
}
```

## chatassigned

This event is generated when a chat is assigned.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('chatassigned', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
{
"activity": {
    "type": type,
    "id": activity id,
    "subject": subject,
    "caseId": case id,
    "customerId": customer id,
    "subType": activity sub type,
    "channel": channel name in case of messaging chat
  },
}
```

## nonchatassigned

This event is generated when a non chat activity is assigned.


```
	egainSolve.init(function(){
        //subscribe to activity section event

        var listener2 =    egainSolve.subscribe('nonchatassigned', function(message){
            console.log("event name", message.type);
            console.log("event data",message.data );
            
        });
        //listener will get destroyed if called
        //listener2.unsubscribe();

    });
```

#### Payload


```
	
{
"activity": {
    "type": type,
    "id": activity id,
    "subject": subject,
    "caseId": case id,
    "customerId": customer id,
    "subType": activity sub type
  },
}
```

## channelavailabilitychanged

Fires when an agent channel (chat/videochat/email/social/phone) status is changed

#### Payload


```
	
{
"activity": {
    "type": type,
    "value": true or false
    "status": success or fail
    "reasonCode": reason code id
  },
}
```

## incomingCall

Fires when call is coming in

#### Payload


```
	
{
callId: callId
}
```

## callPaused

Fires when call is paused

#### Payload


```
	
{
callId: callId
}
```

## callResumed

Fires when call is resumed

#### Payload


```
	
{
callId: callId
}
```

## callEnded

Fires when call ends

#### Payload


```
	
{
activityId: activityId,
callId: callId
}
```

## callHold

Fires when call is put on hold

#### Payload


```
	
{
activityId: activityId,
callId: callId
}
```

## callToggled

Fires when toggling between calls

#### Payload


```
		
{
activityId: activityId,
primaryCallInProgress:  primaryCallInProgress,
primaryCallId: primaryCallId,
secondaryCallInProgress: secondaryCallInProgress,
secondaryCallId: secondaryCallId
}
```

## callsMerged

Fires when primary and secondary call are merged

#### Payload


```
		
{
activityId: activityId,
primaryCallId: primaryCallId,
secondaryCallId: secondaryCallId
}
```

## leaveConference

Fires when leaving conference call

#### Payload


```
		
{
callId: callId
}
```

## triggerphoneavailability

Trigger phone availability

#### Payload


```
		
{
name: phone,
value: true or false,
reasonCode: reasonCode
}
```

# Events Subscribed by Solve Advisor

The following events are subscribed by the Advisor Desktop. Third party UI can publish these events using the Advisor Desktop Widget Event library to build custom functionality.

## addtoeditor

Publish event to add content to Advisor Desktop editor of currently selected activity.


```
	egainSolve.init(function(){
        egainSolve.publish('addtoeditor', {
			content: "<b>Hello world</b>"
		});

    });
```

#### Here is an example of a response


```
{
	content: content to add to editor
}
```

## showtoast

Publish event to show a toast notification.


```
	egainSolve.init(function(){
        egainSolve.publish('showtoast', {
			content: "<b>Hello world</b>"
		});

    });
```

#### Response example


```
{
title: title of toast,
html: html content of toast,
width: width of toast. Defaults to 280 px,
cls: any classes to be applied to toast. Default to eg-guidance-toast,
autoClose: Auto close toast or not. Applicable only if autoCloseDelay not set
autoCloseDelay: delay in seconds before toast closes,
align: Extjs alignment string to align toast. Defaults to 'br' meaning bottom right,
stickOnClick: make toast sticky on click. Default to false,
}
```

## cleartoast

Publish event to clear all previously shown toasts if still visible.


```
	egainSolve.init(function(){
        egainSolve.publish('cleartoast', {
			content: "<b>Hello world</b>"
		});

    });
```

## refreshmaininbox

Publish event to refresh main inbox on Advisor Desktop.


```
	egainSolve.init(function(){
        egainSolve.publish('refreshmaininbox', {
			content: "<b>Hello world</b>"
		});

    });
```

## refreshchatinbox

Publish event to refresh chat inbox on Advisor Desktop.


```
	egainSolve.init(function(){
        egainSolve.publish('refreshchatinbox', {
			content: "<b>Hello world</b>"
		});

    });
```

## refreshactivitypane

Publish event to refresh activity pane on Advisor Desktop.


```
	egainSolve.init(function(){
        egainSolve.publish('refreshactivitypane', {
			content: "<b>Hello world</b>"
		});

    });
```

## refreshcasepane

Publish event to refresh case pane on Advisor Desktop.


```
	egainSolve.init(function(){
        egainSolve.publish('refreshcasepane', {
			content: "<b>Hello world</b>"
		});

    });
```

## refreshcustomerpane

Publish event to refresh customer pane on Advisor Desktop.


```
	egainSolve.init(function(){
        egainSolve.publish('refreshcustomerpane', {
			content: "<b>Hello world</b>"
		});

    });
```

## selectactivity

Select an activity in the inbox


```
{
"type": type of activity (email, chat, etc.),
"activity": {"id":Id of activity}
}
```

## openctiwidget

Launch CTI Widget

## closectiwidget

Close CTI Widget

## changeavailabilitystate

Change agent availability state (chat/videochat/email/phone)


```
{
    "type": type,    (chat/videochat/email/phone)
    "status": true or false  (enable/disable)
    "reasonCode": reason code id
}
```

## aftertriggerphoneavailability

Event to change phone UI button from 3rd party system


```
{
    "type": 'phone',
    "value": true or false 
    "status": true or false  (enable/disable)
}
```

# Callbacks Available

These callbacks can be called on the object 'egainSolve' to fetch specific data actively.

## getCurrentActivityData

Publish event to show a toast notification


```
	egainSolve.getCurrentActivityData(function(message){
		var data = message.data;

    });
```

#### Returned Data Example of getCurrentActivityData callback


```
{
  "type": "email",
  "id": 1850,
  "subject": "sup [#1719]",
  "caseId": 1719,
  "customerId": 1007
}
```

## getActivityReplyData

Publish event to show a toast notification


```
	egainSolve.getActivityReplyData(function(message){
		var data = message.data;

    });
```

#### Returned Data Example of getActivityReplyData callback


```
{
  "activity": {
    "type": "email",
    "id": 1850,
    "subject": "sup [#1719]",
    "caseId": 1719,
    "customerId": 1007
  },
  "fields": [
    {
      "name": "from_email_address",
      "value": "kushal01@egain-corp.com",
      "dirty": true,
      "displayValue": "kushal01@egain-corp.com"
    },
    {
      "name": "to_email_address",
      "value": [
        "kkhandelwal@egain.com"
      ],
      "dirty": true,
      "displayValue": [
        "kkhandelwal@egain.com"
      ]
    },
    {
      "name": "cc_email_address",
      "value": [],
      "dirty": false
    },
    {
      "name": "subject",
      "value": "sup [#1719]",
      "dirty": true
    },
    {
      "name": "actcust",
      "value": "",
      "custom": true,
      "dirty": false
    },
    {
      "name": "actmul",
      "value": null,
      "custom": true,
      "dirty": false
    },
    {
      "name": "delay_time_in_min",
      "value": null,
      "dirty": false
    },
    {
      "name": "maxlength",
      "value": null,
      "custom": true,
      "dirty": false
    },
    {
      "name": "prasad1",
      "value": "",
      "custom": true,
      "dirty": false
    },
    {
      "name": "prasad2",
      "value": "aaa",
      "custom": true,
      "dirty": false
    },
    {
      "name": "testattr",
      "value": "testing",
      "custom": true,
      "dirty": false
    },
    {
      "name": "group_name",
      "value": "",
      "custom": true,
      "dirty": false
    }
  ]
}
```

## getAgentAvailabilityData

Event to get agent availability data


```
    egainSolve.getAgentAvailabilityData(function(message){
        var data = message.data;
    });
```

#### Returned Data Example of getCurrentActivityData callback


```
{
  "chat": true,
  "videochat": false,
  "mail": false
}
```

## Test Sample showing use of the Advisor Desktop Widget Event API


```
<!DOCTYPE  html>
<html>
<head>
<script src="/system/web/apps/resources/js/egainremotesolve.js" type="text/javascript"></script>
</head>
<body>
<p id ="demo" type="text/javascript">test</p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
var counter = 1;
egainSolve.init(function(){
    //subscribe to all events
    var listener =    egainSolve.subscribeAll(function(message){
        document.getElementById("demo").innerHTML = (counter++) +" "+message.type
    })
    //listener will get destroyed if called unsubscribeAll
    //listener .unsubscribeAll();
    //var listener2 =    egainSolve.subscribe('chatmessage', function(message){
    //    document.getElementById("demo").innerHTML = (counter++) +" "+message.type+" chat message: "+message.data.content
    //});
    //listener will get destroyed if called
    //listener2.unsubscribe();
 
});
function doMultiple(){
            //add content to editor
            egainSolve.publish('addtoeditor', {
                content: "<p><b> this is a bold line</b><br>&nbsp;</p>"
            });
             
            //clear previous toast
            egainSolve.publish('cleartoast');
            //add a new toast with given config
            egainSolve.publish('showtoast', {
                html: "A new toast got added",
                title: 'Toast Message',
                autoClose: false
            });
}
</script>
 
<p>
This is a new page;
</p>
<p>
<a onclick="doMultiple()">Click here to add to reply;</a>
</p>
 
</body>
 
</html>
```

## Remote Client


```
<!DOCTYPE  html>
<html>
 
<head>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>eGain Solve Advisor Desktop Messages Demo</title>
    <!-- Include the JS which exposes utility methods for publishing and subscribing events to and from eGain Solve Desktop -->
    <script src="http://localhost/system/web/apps/resources/js/egainremotesolve.js" type="application/javascript"></script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            color: #333333;
            margin: 20px;
        }
        div.eventBox {
            background-color: #e4e7f2;
            border-radius: 3px;
            margin: 16px auto;
            max-width: 75%;
            padding: 16px 20px;
            transition: background-color 2s;
        }
        div.eventBox.latest {
            background-color: #cff8f2;
        }
        div.eventBox .message-type {
            font-weight: 700;
            padding-right: 30px;
            display: table-cell;
        }
        div.eventBox .message-data {
            display: table-cell;
            word-break: break-word;
            padding-right: 0px;
        }
        div.eventBox .message-data p {
            display: inline;
            white-space: normal;
        }
        select:not([multiple]) {
            padding: 5px;
            margin-bottom: 10px;
        }
        option {
            padding: 6px;
        }
        textarea {
            width: 100%;
            padding: 10px;
            margin-right: 40px;
            box-sizing: border-box;
            resize: vertical;
        }
        fieldset {
            padding: 20px;
            margin-bottom: 20px;
        }
        legend {
            font-weight: 700;
        }
        span {
            display: table-cell;
            padding-right: 30px;
        }
    </style>
</head>
 
<body>
<!--Messages - subscribe -->
<h2>Incoming Messages</h2>
<label for="eventTypesToSubscribe"> Choose the event types to subscribe to. </label><br><br>
<select id="eventTypesToSubscribe" multiple>
    <option value="-1" selected>All</option>
    <option value="activityselected">Activity Selection</option>
    <option value="chatmessage">Chat Message Exchange</option>
    <option value="chatcomplete">Chat Complete</option>
    <option value="caseselected">Case Selection</option>
    <option value="emailsend">Email Send</option>
    <option value="emailsendandcomplete">Email Send And Complete</option>
    <option value="folderchanged">Inbox Folder Change</option>
    <option value="nonchatactivitysave">Non-Chat Activity Save</option>
    <option value="nonchatcomplete">Non-Chat Activity Complete</option>
    <option value="triggerphoneavailability">Trigger Phone Availability</option>
</select>
<!-- Clear - printed messages -->
<div id="clearEventsWrap">
    <hr>
    <button id="clearEvents">Clear</button>
</div>
<div id="allEvents"></div>
<hr>
<!-- Messages - publish -->
<h2>Publish Messages</h2>
<fieldset>
    <!-- Add to reply - publish -->
    <legend>Add to Reply Editor</legend>
    <textarea rows="4" cols="50" id="contentToAdd" placeholder="Type HTML content here..."></textarea><br>
    <button id="addContentToReply">Add</button><br>
</fieldset>
<fieldset>
    <!-- Toast - publish -->
    <legend>Show Toast Message</legend>
    <span>Title</span><span><input id="toastTitle" type="text"></span><br>
    HTML <textarea rows="4" cols="50" id="toastContent" placeholder="Type HTML content here..."></textarea><br>
    <span>Auto close</span><span><input id="toastAutoClose" type="checkbox"></span><br>
    <button id="showToast">Show</button><br>
</fieldset>
<fieldset>
    <!-- Other Messages - publish -->
    <legend>Refresh various parts of the Desktop</legend>
    <select id="otherPublishEvents">
        <option value="refreshmaininbox" selected>Refresh Main Inbox</option>
        <option value="refreshchatinbox">Refresh Chat Inbox</option>
        <option value="refreshactivitypane">Refresh Activity Pane</option>
        <option value="refreshcasepane">Refresh Case Pane</option>
        <option value="refreshcustomerpane">Refresh Customer Pane</option>
    </select><br>
    <button id="fireEvent">Publish</button><br>
</fieldset>
<div>
    <hr>
    <button id="getactivitydata">Get Activity Data</button>
</div>
<div id="privateevents"></div>
<script>
 
    (function () {
 
        var listeners = [],
            selections = -1,
            clearNotShown = true;
 
        // Init
        egainSolve.init(registerCallback);
 
        function registerCallback() {
            if (selections == -1) {
                // Subscribe to all egain solve messages and the listener to an array.
                listeners.push(egainSolve.subscribeAll(eventReceivedCallback));
            }
        }
 
        /*----------------------------------------------------------------------------*/
        // Messages - subscribe
        // Drop down to choose for message types to subscribe to
        var onSelectionChange = function (e) {
            var values = Array.prototype.slice.call(document.querySelectorAll('#eventTypesToSubscribe option:checked'), 0).map(function (v, i, a) {
                return v.value;
            });
 
            if (selections != values) {
                selections = values;
                unsubscribeAndSubscribe();
            };
        }
        document.getElementById("eventTypesToSubscribe").addEventListener('change', onSelectionChange);
 
        function unsubscribeAndSubscribe() {
            for (i in listeners) {
                if (listeners[i].unsubscribeAll) {
                    listeners[i].unsubscribeAll();
                }
                else if (listeners[i].unsubscribe) {
                    listeners[i].unsubscribe();
                }
            }
            listeners = [];
            if (selections == -1 || (selections.indexOf("-1") != -1)) {
                // Subscribe to all egain solve messages and the listener to an array.
                listeners.push(egainSolve.subscribeAll(eventReceivedCallback));
                if (selections != -1) {
                    document.getElementById("eventTypesToSubscribe").selectedIndex = 0;
                }
            }
            else {
                for (var k in selections) {
                    listeners.push(egainSolve.subscribe(selections[k], eventReceivedCallback));
                }
            }
        }
 
        function eventReceivedCallback(message) {
            // What to do when you receive a message
            var div = document.createElement('div');
            div.className = 'eventBox latest';
            div.innerHTML = '<span class="message-type">' + message.type + '</span>' + (message.data ? ('<span class="message-data"><pre>' + JSON.stringify(message.data, null, 2) + '</pre></span>') : '');
            document.getElementById("allEvents").prepend(div);
                if (clearNotShown) {
                    showClear();
                }
            setTimeout(function () {
                div.className = 'eventBox';
            }, 500);
 
            //postToWorker(message); // Also post to shared worker.
        }
 
        /*----------------------------------------------------------------------------*/
        // Add to reply - publish
        document.getElementById("addContentToReply").addEventListener('click', function () {
            // Publish event to add HTML content to reply editor of the selected activity if present and allowed.
            egainSolve.publish('addtoeditor', {
                content: document.getElementById("contentToAdd").value
            });
        });
 
        /*----------------------------------------------------------------------------*/
        // Toast - publish
        document.getElementById("showToast").addEventListener('click', function () {
            // Remove existing toast
            egainSolve.publish('cleartoast');
            // Show a new toast
            egainSolve.publish('showtoast', {
                title: document.getElementById("toastTitle").value,
                html: document.getElementById("toastContent").value,
                autoClose: document.getElementById("toastAutoClose").value
            });
        });
 
        /*----------------------------------------------------------------------------*/
        // Other Messages - publish
        document.getElementById("fireEvent").addEventListener('click', onOtherEventsPublish);
 
        function onOtherEventsPublish() {
            egainSolve.publish(document.getElementById("otherPublishEvents").value);
        }
 
        /*----------------------------------------------------------------------------*/
        // Clear button to remove printed messages
        hideClear(); // Hide intitially
        document.getElementById("clearEvents").addEventListener('click', function () {
            document.getElementById("allEvents").innerHTML = "";
            hideClear();
        });
        function showClear() {
            document.getElementById("clearEventsWrap").style.display = "block";
        }
        function hideClear() {
            document.getElementById("clearEventsWrap").style.display = "none";
        }
 
        document.getElementById("getactivitydata").addEventListener('click', getActivityCall);
 
        function getActivityCall(){
            egainSolve.getCurrentActivityData(privateEventReceivedCallback);
        }
        function privateEventReceivedCallback(message) {
            // What to do when you receive a message
            var div = document.createElement('div');
            div.className = 'eventBox latest';
            div.innerHTML = '<span class="message-type">' + message.type + '</span>' + (message.data ? ('<span class="message-data"><pre>' + JSON.stringify(message.data, null, 2) + '</pre></span>') : '');
            document.getElementById("privateevents").prepend(div);
 
            setTimeout(function () {
                div.className = 'eventBox';
            }, 500);
 
            //postToWorker(message); // Also post to shared worker.
        }
 
        /* Utility polifill */
        (function (arr) {
            arr.forEach(function (item) {
                if (item.hasOwnProperty('prepend')) {
                    return;
                }
                Object.defineProperty(item, 'prepend', {
                    configurable: true,
                    enumerable: true,
                    writable: true,
                    value: function prepend() {
                        var argArr = Array.prototype.slice.call(arguments),
                                docFrag = document.createDocumentFragment();
 
                        argArr.forEach(function (argItem) {
                            var isNode = argItem instanceof Node;
                            docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
                        });
 
                        this.insertBefore(docFrag, this.firstChild);
                    }
                });
            });
        })([Element.prototype, Document.prototype, DocumentFragment.prototype]);
    })();
 
</script>
</body>
 
</html>
}
```