Applicable when
- You need to integrate the Contact Center Panel into your own Angular application to improve the user experience.
Implementation
The Amazon Connect CCP is a fully-featured tool that lets agents handle audio and text conversations with customers. It lets initiate three-way conferences with other agents / supervisors, put the caller on hold, among other features.
It is often necessary for agents to access a separate app to successfully serve customers requests. If you already have an Angular app for this purpose, this article will show you how to embed the CCP panel directly in your web app by making use of Amazon Connect Streams.
First, you will need to update the app's dependencies to include Amazon Connect Streams library. For this you can install via npm: "npm install amazon-connect-streams --save". Then, you need to whitelist the domain(s) where your app will be hosted by configuring your Amazon Connect instance (for local development mode, you can add https://localhost:<port> in this list).
Click on your instance, go to "Application Integration" and finally add the origins you wish to integrate to. Note this will only work for HTTPS-enabled origins.
Now, you can go to the Angular component where you wish to embed the panel and add an element which will contain the iframe where the CCP will reside. For example: <div #ccpDiv></div>.
Next, you can add the following code in the component's after init hook:
import 'amazon-connect-streams';
...
@ViewChild('ccpDiv')
public ccpDiv: ElementRef;
public ngAfterViewInit(): void {
const ccpUrl = 'https://<your-amazon-connect-instance>.awsapps.com/connect/ccp-v2/';
connect.core.initCCP(this.ccpDiv.nativeElement, {
ccpUrl,
loginPopup: true,
softphone: {
allowFramedSoftphone: true
}
});
}
That is all you need to get started!
Comments
1 comment
Hi Daniel Falla,
I am facing an issue while doing the setup,
Uncaught TypeError: Cannot set property 2011-06-15 of [object Object] which has only a getter
at Object.push../node_modules/amazon-connect-streams/release/connect-streams.js.105.../apis/connect-2017-02-15.min
It shows the above error. Much appreciate any help.
Please sign in to leave a comment.