AWS Logo
Menu
Amazon Connect 3rd Party Application Integration

Amazon Connect 3rd Party Application Integration

How to implement screen pop in customer application from Agent Workspace

Anatoly Klepikov
Amazon Employee
Published Oct 4, 2024
This article describes how to implement Contact Flow in Amazon Connect, so it will trigger screen pop in an external application with caller details, when contact center agent receives voice or chat communication request.
Overview
Amazon Connect has a number of CTI Adapters for native integration with market leaders, such as Salesforce, Zendesk, ServiceNow. When this approach covers large portion of customer needs, it does not cover cases where integration is needed with customer application or applications where such CTI Adapter does not exist.
Amazon Connect has recently introduced two new features, which allow to customize web interface of the Agent Workspace application making it tailored to the business process relevant to the specific customer inquiry, for launching external applications and navigating to the customer record in it. This approach fill in the gap mentioned above. In addition to the screen pop this approach also allows to take actions, such as provide caller self-service capabilities in an external application, such as make an inquiry, create or update case or ticket.
The key benefits of this solution are:
· Ability to integrate with one or more external applications, with which there is no native integrations from Amazon Connect. It is not uncommon scenario where agent must use use more than one application for handling different scenario, such as booking, billing, etc.
· Access to Amazon Connect features available in Agent Workspace
Solution description
The following AWS Services are used:
· Amazon Connect to provide the communication channel to the customer via voice or chat.
· AWS Lambda for integration with third party applications, such as inquiry customer record id used for the screen pop.
· AWS S3 for hosting web pages of third-party application. Alternatively, any HTTP Web Server or Application Server can be used, which can produce HTML Output. The requirements for 3rd party application apply, such as HTTPS access and ability to host in iFrame.
· Amazon CloudFront for providing HTTPS web access to 3rd party application web pages stored in AWS S3 bucket.
The solution can easily be expanded by leveraging other AWS services, for example Amazon Lex for implementing self-service voice/chat-bot.
NOTE: Because 3rd party application hosted within Amazon Connect Agent Workspace requires to be iFrame compatible (can be hosted in iFrame), a typical scenario for launching an external application, which is not iFrame compatible would be to implement screen pop (open in an external window) of this application, such as Salesforce or Zendesk, from within 3rd party application triggered by Javascript or hyperlink.
Below is the architecture diagram for possible implementation of the solution:
Solution Architecture
Solution Architecture
Customer calls in or initiates chat (1), which launches Contact Flow in Amazon Connect. This Contact Flow captures customer phone number or email address or other identity data, which later will be used for querying customer details (2). After capturing customer identity data Contact Flow launches Lambda function to identify customer and retrieve their data by invoking API request, or multiple requests, into the third-party application, or applications (3). Based on the retried data Contact Flow can make decision whether customer is identified and if necessary offer an authentication. Once the decision has been made that the call is legitimate, customer data, such as customer record id or URL in external system, are attached to the call as Contact Attributes (4). Call is than placed into a queue and routed to an appropriate agent based on the routing logic, such as agent with appropriate skills (5). An agent, whose status is Available, receives the call and Agent Workspace application loads the web form, which contains the data related to this call. This web form also allows to trigger screen pop in the third-party application using customer data passed as Contact Attributes (6). This triggering can be implemented as hyperlink or Javascript within 3rd party application loaded within Amazon Connect Agent Workspace. Code example showing how to implement 3rd party application with hyperlink to launch an external application showing customer data is presented further in this article.
Below is an example of Amazon Connect Contact Flow receiving an initial customer call or chat (1), retrieving customer data (2) and executing AWS Lambda function (3):
Amazon Connect Main Contact Flow
Amazon Connect Main Contact Flow
Below is an example of Lambda code simulating data retrieval from an external application (this code is an example for demonstration purposes only, reader is expected to modify it to accommodate their needs):
For launching web form in Amazon Connect Agent Workspace application we use Amazon Connect feature Step-by-step guide. Screen below shows how to set up Amazon Connect Contact Flow for using Step-by-step guide:
Amazon Connect Main Contact Flow
Amazon Connect Main Contact Flow
Amazon Connect Contact Flow used by Step-by-step guide launches the view where web form will be hosted. The screen below shows how it may look like:
Amazon Connect Step-by-step Contact Flow
Amazon Connect Step-by-step Contact Flow
The view will receive parameters, used for launching application, where application one of widgets in Step-by-step guide GUI designer. Below is an example how the parameters can be passed as JSON:
{"AppIdentifier":"Popup2cloudFront","Path":""}
AppIdentifier – this is the name of 3rd party application, which will be launched within Step-by-step application widget.
Below is the designer view of Step-by-step guide showing application widget where 3rd party application will be launched (4)
Amazon Connect Step-by-step View
Amazon Connect Step-by-step View
Below is an example how 3rd party application, which code is presented above in this article, can be configured in Amazon Connect. This 3rd party application will be loaded in Amazon Connect Agent Workspace when call is received by an agent and allow agent to launch an external application with customer data by clicking the hyperlink:
Amazon Connect 3rd Party Application Configuration
Amazon Connect 3rd Party Application Configuration
In this example Popup2cloudFron – is the name of application pointing to the Amazon CloudFront instance referencing to AWS S3 bucket with web pages for 3rd party application (5).
Below is an example AWS S3 bucket containing 3rd party application code generated from of REACT project:
3rd Party Application REACT code in Amazon S3 Bucket
3rd Party Application REACT code in Amazon S3 Bucket
When agent answers the call, they can initiate screen pop in external application as shown below (6):
Amazon Connect Agent Workspace executing screen pop
Amazon Connect Agent Workspace executing screen pop

 Below is an example of 3rd party application code executed in iFrame within Amazon Connect Agent Workspace allowing to launch an external application with customer data by clicking hyperlink. (this code is an example for demonstration purposes only, reader is expected to modify it to accommodate their needs):
Summary
In this post we described how to implement screen pop in an external application and its benefits.
References
· Cloudscape (Amazon Connect Agent Workspace follows patterns of this framework)
Tags
The team
The Team
The Team

 

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

2 Comments