Amazon Connect + Customer Profiles + Customer Card for Jira

Owned by Softlist Sp. z o.o.
Last updated: Sept 26, 2022
7 min read

First of all you need an Amazon Connect instance with basic settings. You may use Customer Profiles feature in Amazon Connect. Customer Profiles automatically brings together customer information from multiple applications into a unified customer profile. With Customer Profiles enabled you will be able to use customer email address to automaticly find customer in Jira, among other things. This part describes using Amazon Connect with Customer Profiles, otherwise, if you are not going to use Customer Profiles in your Amazon Connect instance, please, follow the second part of the article. If you still have no Customer Profiles enabled in your Amazon Connect please visit this link. This part of article describes how to set up the environment from scratch. If you already have configured Amazon Connect instance just modify your current system as described in our steps.

 

Contact Control Panel

The first thing you need is to find an entry point to Amazon Connect Streams API where your agents receives calls. Probably your agents uses built-in control panel, like https://<example>.my.connect.aws/agent-app-v2/. For our purpose (open Customer Card Jira plugin with current customer in new browser tab) we need an external resource with Contact Control Panel where we can manually work with Amazon Connect Streams API. Briefly we need to add a listener on inbound call, get attributes that passes from Customer Profiles and open new browser tab. So, ask your Amazon Connect administrator if your current agent control panel has direct access to Amazon Connect Streams API. Anyway we will describe how to setup external Contact Control Panel from the start below.

  1. Download html-template-example.html file. Let's describe this file in details.

    <!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <script type="text/javascript" src="connect-streams-min.js"></script> </head> <body onload="init()"> <main> <div id="ccp-container"></div> <div id="customerprofiles-container"></div> </main> <script type="text/javascript"> function init() { const connectUrl = "https://<example>.my.connect.aws"; const jiraUrl = "https://<example>.atlassian.net" connect.agentApp.initApp( "ccp", "ccp-container", connectUrl + "/ccp-v2/", { style: "width:400px; height:600px;" } ); connect.agentApp.initApp( "customerprofiles", "customerprofiles-container", connectUrl + "/customerprofiles-v2/", { style: "width:400px; height:600px;" } ); connect.contact(function(contact) { contact.onConnected(function(contact) { const attributeMap = contact.getAttributes() const phoneNumber = attributeMap.phoneNumber?.value const emailAddress = attributeMap.emailAddress?.value const searchParams = new URLSearchParams({phoneNumber, emailAddress}).toString() window.open(jiraUrl + '/plugins/servlet/ac/pl.softlist.customercard/home?' + searchParams) }); }); } </script> </body> </html>

    1. On line 5 we connect Amazon Connect Streams library, we will load this library in next step

    2. On line 14 you need to replace example link with your Amazon Connect access URL base, excluding anything after the base domain, for example:

      const connectUrl = "https://mycompanyname.my.connect.aws";

    3. Do the same on line 15 but with your Jira instance URL (NOTE: don’t type any '/' symbols at the end of URL), for example:

      const jiraUrl = "https://mycompanyname.atlassian.net"

    4. On lines 16-27 we initilalize Contact Control Panel and Customer Profiles accordingly

    5. On lines 28-29 we add onConnected listener to our Control Panel, code inside of this function will execute when agent picks up the call (NOTE: you can add onConnecting listener insted of onConnected, then our code will execute as soon as the call arrives).

    6. On lines 30-32 we extract customer properties that comes as call attributes.

    7. On line 34 we open new browser tab that refers to Customer Card Jira plugin with customer data that we extracted.

  2. Modify the HTML file to reference your Amazon Connect and Jira instances as described above and save it.

  3. Download connect-streams-min.js file or get the last version of package from github.

  4. Upload both files to your Amazon S3 bucket. To create new S3 bucket and upload files here follow the next steps:

    1. Open the Amazon S3 management console.

    2. Choose Create Bucket.

    3. Provide a unique bucket name. Leave the rest of the settings as they are. Click Create.

    4. When you return to list of bucket, choose the name of the bucket that you created.

    5. Choose Upload, then add your modified html-template-example.html file and the connect-streams-min.js file. Choose Upload.

    6. If upload was successed then close the status page.

  5. For now you need to provide web access to page that we uploaded on S3 bucket. We use Amazon Cloudfront for that purpose. To create a CloudFront distribution follow the next steps:

    1. Open the Amazon CloudFront console.

    2. Select Create distribution.

    3. For the Origin domain, choose the S3 bucket that you created before.

    4. In the S3 bucket access section, select Yes use OAI (bucket can restrict access to only CloudFront).

    5. Choose Create new OAI, then select Create.

    6. Select the Bucket policy option Yes, update the bucket policy.

    7. Leave all other options as their default, and select Create distribution. It will take a few minutes to deploy.

    8. On the Distribution detail page, note the Distribution domain name.

  6. Now we need to provide access for Amazon Connect to created Cloudfront distribution.

    1. Open the Amazon Connect console.

    2. Choose the name of the instance that you are using.

    3. On the left side of the console, choose the Approved origins.

    4. Choose Add domain.

    5. In the Enter domain URL box, enter the URL of the CloudFront distribution that you created, prefixed with https://. For example: https://yourcompanydistribution.cloudfront.net

    6. Choose Add domain.

 

Amazon Connect Contact Flow

You can import our example contact flow or edit your existing one. To import the contact flow:

  1. Log in to your Amazon Connect instance.

  2. Choose Routing, Contact flows, Create contact flow.

  3. Choose the Create contact flow button in the upper right

  4. Choose the arrow next to Save, Import flow (beta).

  5. Select the contact flow below.

  6. Choose your queue in Set working queue block (BasicQueue by default).

  7. Associate a phone number with a contact flow: choose Routing, Phone numbers, select your agent phone number, expand Contact flow/IVR, choose Customer-Profiles-Example-Contact-Flow.

If you want to edit your existing contact flow we have described the basic steps below of how it works.

  1. We use Customer profiles block to find customer, extract the necessary properties and pass them on. Add the Customer profiles block to your existing flow (after Entry point or Set logging behavior for example). Click on block to configure it. In Action selector choose Get profile. On Select a search key choose Phone number (you can choose Email address if you want to search by email).

  2. In Phone number section choose Use attribute, select System in Type selector and Customer Number in Attribute type (or Email address).

  3. In Response fields choose properties that you want to extract from customer (we choosed First name, Email address and Phone number)

  4. Connect Sucess output of Customer profiles block to Set contact attributes.

  5. Configure Set contact attributes like on screens below. Note destinations attributes names (emailAddress, phoneNumber), they should match variables names that we use in our html-template-example.html (lines 31-32). In Value fields we use construction like $.Customer.PhoneNumber. Thats let us to get properties from customer that we found in Customer profiles block.