Amazon Connect: How to Configure Contact Center Agent Settings in a Custom Contact Control Panel

BY:

Sep 29, 2021

The Amazon Connect Streams API can now be used to change the visibility option on the settings page of the Contact Control Panel — bringing multiple benefits to contact center managers

Key Takeaways:

  • The Amazon Connect Streams API gives more control to contact center managers by allowing them to change visibility options in their Contact Control Panel 
  • The first step in the configuration of the API involves allowlisting of the pages where the API is to be incorporated
  • The second step is to download the API
  • The third step is initializing the API
  • Once successful initialization is done, API implementations can be created for managing the settings of the Contact Control Panel.

Many businesses use Amazon Connect for their omnichannel customer relationship management (CRM) and helpdesk needs. If you are one of those businesses, you should know about the latest update this Amazon service has brought forward for its customers. 

Amazon Connect has launched the Amazon Connect Streams API, which can be implemented to provide contact managers the choice to apply settings management and change visibility options in the Amazon Contact Control Panel (CCP). The Amazon Connect Streams API is a Javascript application programming interface that enables browser-based Amazon Connect contact center integrations. 

What does the Amazon Connect Stream API bring for contact center managers?

Contact center managers can now change the visibility options available at the settings page of the Amazon Connect CCP by using Amazon Connect Stream API. This allows managers to control the configuration sections displayed in the settings tab and hide others, which can be useful in many different ways. 

By applying the update, contact center managers will be able to make the new audio device settings visible. This option lets the user select the type of microphone, speaker, or ringer device they would like to use. With this displayed, customer service reps can respond to inbound calls even if they are away from the computer by selecting the option to hear the ringtone through the speaker. The default ringtone can also be overridden with any audio file that is supported by the browser.

The update also allows managers to hide the phone type option in the settings. This will prevent users from selecting a phone type that might be against the organization’s policy or result in increased costs. 

Some other changes can also be made, such as:

  • Login pop-up dimensions can be defined or even disabled
  • Login pop-ups can be set to the auto-close option
  • CCP size can be customized according to requirements
  • The built-in tone can be completely disabled

How to Configure the Amazon Connect Stream API

Here are the steps needed to configure the new Amazon Connect Stream API

1. Upgrade to the latest CCP

First, it is recommended that you migrate to the latest version of the CCP if you haven’t done so already. You can get more information about migration to the new version of CCP here.

2. Allowlisting

The next step in the implementation of the API is to make sure you have allowlisted the pages that you wish to embed. All domains that embed the CCP must be allowlisted for the API library to be used properly.

Log in to your Amazon Web Services account and go to the Amazon Connect console. Click the name of the instance for which you want to allow the page. Click the “Application Integration” link and then click the “Add Origin” option to enter a domain URL.

3. Download the API

Amazon Web Services do not provide any pre-built version of the API. The API source will have to be downloaded from GitHub

Once the API is downloaded, change the directory and build the API JavaScript file with make:

$ cd amazon-connect-streams
$ make

This will generate a file called connect-streams-${VERSION}.js. This is the complete Amazon Connect Stream API that you can incorporate into your page. However, this method will only work out on a Linux or Mac operating system. 

For Window, you have to first install the full version of cmder, a console emulator. Once the cmder is installed, you will also need the Windows make build tool, which can be downloaded here. Note that If you get an error message after feeding the command “make,” you probably need to update your PATH variable to include the path to make.

4. Initialize the API

Now comes the process of API initialization. A successful initialization will indicate that everything is in order and is properly set up. You can view the initialization script here.

After initialization, the API integrates with Connect by loading the pre-built CCP into an iframe and placing it into the provided containerdiv. The process enables all API requests to be funneled through the CCP. Contact and agent updates are now published through the CCP and made available to the JS client code. 

Once the initialization is complete, you can run different API implementations to manage the settings and change the visibility option in the Contact Control Panel per your requirements. 

CloudHesive makes Amazon Connect easy

Whether you are a business that wants to optimize your Amazon Connect implementation or needs to build a comprehensive cloud strategy, you can count on CloudHesive to make it easy for you and your teams.

CloudHesive’s Customer Connect platform takes care of all your Amazon Integration needs. We are an Amazon Managed Service Partner, which means that you get certified expert support in your cloud-based business transformation. Contact the CloudHesive team today to discuss how we can make your SaaS implementation and management as lite as a cloud.

Related Blogs

  • A contact center agent handling a call" alt="">
    Amazon Connect Introduces Audio Device Settings for Custom Contact Control Panel

    Amazon Connect now offers more freedom to agents in the selection of their preferred audio device setting in the Contact Control Panel — here’s how to go enable it Key Takeaways: The new audio...

    Learn More
  • This image shows a magnifying glass made up of people on a white background. This is meant to illustrate a close analysis of customers in order to serve them better." alt="">
    How to Use Amazon Contact Lens to Analyze Conversations

    Get real-time insight into customer sentiment and trends with Contact Lens for Amazon Connect Key Takeaways: Contact Lens for Amazon Connect gives contact center managers a better understanding of...

    Learn More
  • Bringing customers around the world together with an integrated contact center." alt="">
    Amazon Connect: How to Configure Contact Center Agent Settings in a Custom Contact Control Panel

    The Amazon Connect Streams API can now be used to change the visibility option on the settings page of the Contact Control Panel — bringing multiple benefits to contact center managers Key...

    Learn More