Implementation guide

This section describes the steps to integrate AWS-managed applications using Streams and AppManager. The Worklist AWS-managed application is used for demonstration purposes.

Prerequisites

The following prerequisites are required:

Step 1: Install required packages

Install the Amazon Connect AppManager package from npm into your web application:

npm install @amazon-connect/app-manager

Step 2: Add the AppManager plugin in CCP initialization

Update the existing CCP initialization code to include the AppManager plugin.

Before:

import "@amzn/amazon-connect-streams";

const containerElement = document.getElementById("ccp-container");
connect.core.initCCP(containerElement, {
    ccpUrl: "https://<connect-instance-alias>.my.connect.aws/ccp-v2/",
    // Other initialization parameters 
});

After:

import "@amzn/amazon-connect-streams";
import "@amazon-connect/app-manager";
import { AppManagerPlugin } from "@amazon-connect/app-manager";

const containerElement = document.getElementById("ccp-container");
connect.core.initCCP(containerElement, {
    ccpUrl: "https://<connect-instance-alias>.my.connect.aws/ccp-v2/",
    // Other initialization parameters 
    
    plugins: [AppManagerPlugin], // Enables AppManager
});

// Retrieve the provider for accessing AppManager
const provider = connect.core.getSDKClientConfig().provider;

Step 3: Embed a page for AWS-managed application

Add an iframe element to the desired location for displaying the Worklist AWS-managed application:

<iframe id="aws-app-iframe" height="1080px" width="1920px"/>

Step 4: Launch AWS-managed application

Launch the Worklist AWS-managed application using the AppManager launchApp API:

// Launch the Worklist AWS-managed application
const appHost = await provider.appManager.launchApp("Worklist");

// Retrieve the iframe element for displaying the Worklist AWS-managed application
const awsAppIframe = document.getElementById("aws-app-iframe");

// AppManager uses the iframe to render the AWS-managed application
appHost.setIFrame(awsAppIframe);

Step 5: Build and deploy

After you build and deploy your web application, verify that the Worklist application is loaded in the iframe and available for usage.