How to emit custom events from Amazon Connect to Frontend?

Question

I see that Amazon Connect has some out of the box event content types for the below APIs. 
1. Send Event - e.g. `application/vnd.amazonaws.connect.event.message.read`
2. GetTranscript - e.g. `application/vnd.amazonaws.connect.event.participant.joined`

Is there a way to send a custom event to the Frontend (mobile app)? When the System/Bot transfers the contact to a queue, I would like to notify the frontend and based on this event do customisations on the app, e.g. display rotating circle, disable button or start a timer.

re:Post Agent · Answer

To send custom events from Amazon Connect to your frontend application, you have several options depending on your specific implementation:

1. **EventBridge Integration**: Amazon Connect sends various events directly to Amazon EventBridge. You can create event patterns to match specific Connect events (like contact transfers) and then trigger actions based on these events. You could set up a Lambda function that gets triggered by these events and communicates with your frontend through a WebSocket or API Gateway endpoint.

2. **Contact Events Stream**: You can subscribe to contact events from Amazon Connect. When contacts are transferred to queues or other status changes occur, these events can be captured and forwarded to your frontend application.

3. **Agent Event Streams**: If your use case involves agent interactions, you can enable agent event streams and process these events to notify your frontend application.

4. **Custom Implementation with AWS SDK**: For a more direct approach, you can use the AWS SDK to implement custom event handling. The PutEvents API allows you to send custom events to EventBridge with specific detail types and payloads that your application can process.

5. **Amazon Connect Agent Workspace SDK**: If you're building a third-party application that runs within the Amazon Connect Agent Workspace, you can use the Connect SDK to subscribe to agent and contact events directly.

For your specific use case of notifying the frontend when a contact is transferred to a queue, you would likely want to use the Contact Events Stream via EventBridge, set up a serverless backend to process these events, and then relay the relevant information to your frontend application through WebSockets or a similar real-time communication channel.

The implementation approach will vary based on whether your frontend is a standalone application, a custom CCP (Contact Control Panel) using Stream API, or a third-party app integrated with Amazon Connect Agent Workspace.  
**Sources**  
[Use PutEvents with an AWS SDK or CLI - AWS SDK Code Examples](https://docs.aws.amazon.com/code-library/latest/ug/eventbridge_example_eventbridge_PutEvents_section.html)  
[How to subscribe the agent and contact events to my third party application page | AWS re:Post](https://repost.aws/questions/QUjs4ScuKcQEiKTeVv-ZT28w/how-to-subscribe-the-agent-and-contact-events-to-my-third-party-application-page)  
[Amazon Connect events - Amazon EventBridge](https://docs.aws.amazon.com/eventbridge/latest/ref/events-ref-connect.html)

How to emit custom events from Amazon Connect to Frontend?

Add your answer

Relevant content