Integrating Amazon Connect Streams API: Building a Simple Web App with AWS Amplify

Introduction to Amazon Connect Streams API

The Amazon Connect Streams API (Streams) is a powerful tool that enables seamless integration between existing web applications and Amazon Connect. It offers two primary capabilities:

1. Embedding the Contact Control Panel (CCP) and Customer Profiles app UI into your web page.
2. Handling agent and contact state events through an object-oriented, event-driven interface.

Developers can choose to use the built-in interface or create a custom one from scratch, providing flexibility to meet specific business requirements.

Prerequisites

Before beginning the integration process, ensure you have the following:

• An active Amazon Connect instance
• AWS account with appropriate permissions to use AWS Amplify
• Basic knowledge of HTML and JavaScript
• Git installed on your local machine (optional, for cloning the repository)
• A code editor of your choice (e.g., Visual Studio Code, Sublime Text)
• (For Windows users) 7-Zip or an equivalent file compression tool

Step-by-Step Integration Guide

1. Obtain the Amazon Connect Streams API

You have two options to acquire the Amazon Connect Streams API:

a. Clone the repository:

git clone https://github.com/amazon-connect/amazon-connect-streams

b. Download the ZIP file:

• Visit https://github.com/amazon-connect/amazon-connect-streams
• Click on "Code" and select "Download ZIP"
• Extract the contents of the ZIP file

2. Prepare the Web App Files

1. Navigate to the release directory in the extracted folder.
2. Create a new file named index.html in this directory.
3. Open index.html with your preferred text editor.
4. Copy and paste the initialization code from the Amazon Connect Streams GitHub page into your index.html file.

Note: This initialization code serves as a starting point. You can customize and expand it based on your specific requirements.

3. Configure the Connect Instance URL

In the index.html file, locate the following line:

var instanceURL = "https://my-instance-domain.my.connect.aws/ccp-v2/";

Replace my-instance-domain with your Amazon Connect instance alias. To find your instance alias:

1. Open the Amazon Connect console.
2. Select your instance.
3. In the navigation pane, choose "Overview".
4. The instance alias is listed in the "Access URL" field.

For more detailed instructions, refer to the AWS documentation on finding your Amazon Connect instance name.

4. Prepare Files for Deployment

1. Ensure that both index.html and connect-streams-min.js are in the same directory.
2. Create a ZIP file containing these two files:
   • index.html
   • connect-streams-min.js

5. Deploy to AWS Amplify

1. Open the AWS Amplify Console.
2. Choose "Deploy without Git".

4. Provide an App name and Environment name.
5. Drag and drop the ZIP file you created in step 4.

6. Follow the prompts to complete the deployment.

6. Configure Amazon Connect Approved Origins

1. Once deployed, copy the Amplify app URL. It should look like: https://<envName>.<amplifyAppID>.amplifyapp.com

2. Open the Amazon Connect console.

3. Select your instance.

4. In the navigation pane, choose "Approved origins".

5. Click "Add origin" and paste the Amplify app URL.

6. Save the changes.

7. Access Your Web App

1. Navigate to your Amplify app URL, appending /index.html to the end.
2. A new tab will open, prompting you to log in with your Amazon Connect user credentials.
3. After successful login, the Contact Control Panel (CCP) will be displayed in your web app.

Additional Considerations and Best Practices

Security

• Implement AWS security best practices, including using IAM roles and policies to manage access to your resources.
• Regularly update your dependencies and review security bulletins related to Amazon Connect and AWS Amplify.

Browser Settings

• Some browsers may block pop-ups by default. Instruct users to allow pop-ups for your app's domain if the login window doesn't appear.

Enhanced Functionality

• Consider implementing additional features to enhance your integration. For example, you can add the ability to pause and resume call recordings using the API described in this AWS blog post.

Troubleshooting

• If you encounter issues during integration or usage:
  1. Check the browser console for error messages.
  2. Refer to the Amazon Connect Streams API documentation for troubleshooting tips.
  3. Ensure all prerequisites are met and steps are followed correctly.

Conclusion

By following this guide, you've successfully created a simple web app that integrates the Amazon Connect Streams API using AWS Amplify for hosting. This integration allows you to embed the Contact Control Panel and leverage the powerful features of Amazon Connect within your own web application.

As you become more familiar with the Streams API, you can expand your integration to include more advanced features and customizations to meet your specific business needs. Remember to keep your code and dependencies up-to-date, and always refer to the latest AWS documentation for best practices and new features that can enhance your Amazon Connect integration.