Amazon Connect - Extended CCP Demo
After reading our Blog Post titled Amazon Connect and the Agent Desktop, you are now ready to use the extended CCP Demo with your own Amazon Connect instance. By following the steps below, you will be able to set-up your own Amazon Connect Instance using the provided sample extended CCP. You will be able to have an experience similar to this once you have completed the set-up:

Prerequisites
To test with this sample extended CCP you will need:
- An Amazon Connect Instance
- The permission to update the Amazon Connect Console (within the AWS Console)
Step 1 - Whitelisting the Site
Since we are going to host the CCP within our own web-page, we need to tell your Amazon Connect Instance to allow this request to request the CCP. Without this you will get a "paged refused to be displayed" error due to CORS.
- Login to AWS Console
- Navigate to the Amazon Connect instance settings, then click on the Application Integration link:
- Once here, click on the + Add origin link
- Within this box add the extended CCP link: https://d37m0u1h04z15l.cloudfront.net/ or https://extendedccp.vf-connect-demo.com
Step 2 - Load the Extended CCP
With your Instance setup to allow requested from the site, you can now go ahead and login:
- In Chrome or Firefox, navigate to https://d37m0u1h04z15l.cloudfront.net OR https://extendedccp.vf-connect-demo.com
- Enter your Instance Alias within the box and press enter. For example, mine from above is vf-connect-demo
- If you already logged into your Amazon Connect instance, then the below will be displayed
- If you are not already logged in, then a new page will open asking you to log in to your Amazon Connect instance. Log in and go back to the extended CCP tab/page.
Step 3 - Testing the Extended CCP
You are now ready to test the site.
- Change your agent state by using the Change status drop-down within the CCP.
- Notice how the website updates the state in real-time.
- Set your status to available, and place a call into your Amazon Connect Instance.
- Notice how the queue name is displayed and your agent state changes through various states.
Step 4 - Displaying Contact Attributes
You may notice that no information is displayed within the orange table. This table will display Contact Attributes that are set within the Contact Flows (IVR). However, this extended CCP is coded to only show Contact Attributes that begin with an underscore '_'
- Within your contact flows set 1 or 2 Contact Attributes to begin with an underscore '_'
- Make another test call and notice how these are now displayed.
It appears this way because you will likely have more Contact Attributes than you want to display to the agent.
Troubleshooting
- CCP is not loading
- Ensure that you entered the correct Instance Alias, refresh the page to try again.
- Ensure that you have whitelisted the extended CCP URL as per step 1.
- Attributes are not displayed within the table
- Ensure that you have 1 or more Contact Attributes that begin with an underscore '_'
Disclaimer
This page is for demonstration purposes only, and must only be used against a test instance. It can and may change without notice.
As always, if you have a project and need support, please feel free to Contact Us.