Restore previous version

Amazon Connect + Customer Card for Jira (without Customer Profiles)

Owned by Softlist Sp. z o.o.
Sept 26, 2022
6 min read

This 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> </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.contact(function(contact) { contact.onConnected(function(contact) { const attributeMap = contact.getAttributes() const phoneNumber = attributeMap.phoneNumber?.value const searchParams = new URLSearchParams({phoneNumber}).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 13 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 14 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 15-20 we initilalize Contact Control Panel.

    5. On lines 21-22 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 23-25 we extract customer phone number that comes as call attribute.

    7. On line 26 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 No-Customer-Profiles-Example-Contact-Flow file from this article.

 

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

 

Set contact attributes block passes system attribute “Customer phone number“ to call atributes. Note destinations attributes name (phoneNumber), it should match variable names that we use in our html-template-example.html (lines 31).

Take a call

For now everything set up. Lets log in and take a call using your modified Contact Control Panel.

  1. Open Chrome or Firefox.

  2. In the URL field, paste the full domain (with https://) of your CloudFrond distribution and add /html-template-example.html to complete the URL. It should looks like:
    https://yourcompanydistribution.cloudfront.net/html-template-example.html

  3. When the page is loading, it displays a second tab to authenticate your agent.
    NOTE: If the authentication window does not display, your browser’s pop-up blocker may be preventing it. For information about enabling pop-ups, check your browser.

  4. After the authentication completes, you are asked to allow notifications and microphone access. Grant both.

  5. Close the new tab.

  6. Make sure your agent are in the Available state.

     

  7. Call into the number that you associated with your new contact flow.

  8. As soon as the call is accepted (or delivered), a new tab or browser window (depending on your browser settings) should open and display Customer Card Jira plugin with customer information (NOTE: you need to have a Jira user with provided email or phone number in Customer Card, otherwise it would display start page).