Getting Started

Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

The easiest way to start learning about the Acqueon Workspace JavaScript API is to work with a sample application. The UI web application and any third-party web application can be integrated with Acqueon Workspace Core web application using Desktop Publisher and Subscriber (ADPS) API integration. The ADPS API interface sends and receives messages to and from Acqueon Workspace Core.

Integrate Acqueon Workspace Softphone in your Custom Web Application

To integrate Acqueon Workspace softphone with your custom web application, perform the following steps:

Include the following IFrame in your web page:

<iframe id="ADIframe" allow="microphone"/></iframe>

Include the following JavaScript code snippet in the HTML <head> section of your web page:

<script type="text/javascript">
    /** replace with the AD Softphone Layout URL for your Acqueon Desktop instance **/
    var adLayoutUrl = "https://adunittest.aecdevops.com/desktop/view/AmazonVX-AE";  
    function initAD(){
        document.getElementById("ADIframe").src = adLayoutUrl;
    }
</script>

Replace the above default Acqueon softphone layout URL with your Acqueon Workspace instance layout URL.
Call the initAD( ) JavaScript method either in the html body tag or at the end of html page.
Allowlist the Acqueon Workspace URL and your custom application URL as per below in your Amazon Connect Instance and Acqueon Workspace Admin application:

URL	Amazon Connect	Acqueon Workspace Admin	Example
«AD Layout URL»	Yes	No	https://adunittest.aecdevops.com/desktop/view/AmazonVX-AE
«Custom Application URL»	Yes	Yes	https://localhost:9009/

Sample Screenshot: Integration of Acqueon Workspace softphone using Iframe

Key points:

The Acqueon softphone iframe should be persistently open to receive the events. The custom application should not reload the Acqueon softphone iframe for any case (for example, during tethered call initiation, start of every call or when an Agent moves between tabs, etc.)
In case the custom application has the logout feature, it should call the Acqueon Workspace logout API before logging out.
The custom application should allow third party applications to access browser cookies.
The custom application should not allow microphone to access from multiple iframes, only one Iframe should be allowed to access the microphone in a page.
In case your application needs an integration with your Amazon Connect instance, the allowFramedSoftphone property value of connect stream should set to false either in your custom application or in the Acqueon Workspace layout. i.e., either set this property value to false in your application while using connect streams library or disable the “Enable Media” option under Configuration app of Acqueon Workspace Admin.
Refer: https://github.com/amazon-connect/amazon-connect-streams/blob/master/Documentation.md#initialization

Integrate Publisher/Subscriber Library

To integrate your web application with Acqueon Workspace Core, perform the following steps:

Include the pubsub.js file in your app or html file.

<script type="text/javascript" src="scripts/pubsub.js"></script>

 Or

 "scripts": 
 [
 "src/lib/pubsub.js"
]

Create an instance of pubSubLibrary class:

var pubSubObj = new window['pubSubLibrary']();

Registration for subscription of any channel with topic/subtopic is mandatory to send/receive the message from the given channel. To receive messages from any topic/subtopic use “*” for those. Use the below code snippet:
```
this.pubSubObj.register('Amazon', '*', '*');
```

To receive messages from Acqueon Workspace Core, use the below code snippet:

window.addEventListener('message', e => { if (e && e.data) {
        // e.data is the received message
}
})

To send messages to Acqueon Workspace Core, use the below code snippet:
```
this.pubSubObj.send(req);
```
De-registering the subscription of any channel with topic/subtopic is mandatory to stop receiving messages from the given channel name. To de-register the Channel from Acqueon Workspace Core, use the below code snippet:
```
this.pubSubObj.unRegister('Amazon', '*', '*');
```
Deploy your application on AD server.

Sample Application/Custom Widget Setup

Unzip “ad-pubsub.zip” into file system.
Deploy the unzipped files to the Acqueon Workspace server.
Open Acqueon Workspace Admin by navigating to the URL: https://FQDN/admin
Once successfully logged in, create a new Gadget.
Create a new layout. For more details, refer to Layout Designer
Add a Softphone and Pub Sub Widget into newly created Layout:
Access the layout as standalone application, for example, https://FQDN/desktop/view/PubSub_Sample/left.
Register to one of the Channels by select the relevant channel and click the Register button.
You can test the sample API by sending the API request sample in the text area like below:

Was this article helpful?

What's Next

API Structure

Table of contents

Integrate Acqueon Workspace Softphone in your Custom Web Application
Integrate Publisher/Subscriber Library
Sample Application/Custom Widget Setup