Code Monkey home page Code Monkey logo

amazon-connect-custom-ccp's Introduction

Amazon Connect Custom CCP

Introduction

amazon-connect-custom-ccp provides a way to build a custom ccp dashboard for your Amazon Connect contact center. These instructions focus on how to use the software to create a ccp dashboard. This dashboard will display:

  • A banner to indicate if a call is priority. This is set by a field in the API response when an agent connects to a call.
  • A section with the queue name, broker code and account name. This can be changed to suit the needs of your project
  • A section that will contain a drop down to list the possible intents for a call based on a queue
  • Start/Stop/Pause/Resume functionality. (Using this functionality will add fields with timestamps for these actions on the contact trace record on Amazon connect)
  • A button that will open a stats modal.
  • Stats modal displays daily call intent selections for the agent and daily queue stats (active agents, number of missed calls, number of customers in queue, longest wait time and average time in queue)
  • Cold transfer functionality (transfer to queue, quick connect or external number)
  • Update intent and secondary intent modal. At the end of a call, when an agent selects an intent and a secondary intent. This information is added to the agent table in Dynamo DB and is updated on the contact trace record on Amazon Connect.

First, you will need an Amazon Connect instance up and running. Next, you will need to deploy the CDK which will build the Lambda functions, DynamoDB table, API Gateway, S3 bucket, Cloudfront distribution and SQS queue components for you.

The DynamoDB table holds data that will be displayed on the dashboard such as, a list of possible call intents, and intents selected by the agent during the call). You can also collect historical and real-time data from multiple Connect instances. If you wish to collect agent events from multiple Connect instances you will need to configure Kinesis to deliver the events to Lambda manually (which will be processed by the agent event handler). The S3 bucket contains the React build and will be served from CloudFront.

Architecture

Screen Shot 2021-10-30 at 6 00 28 PM

AWS CDK stack to deploy Amazon connect CCP

Run npm install before running the commands below

Command Description
npm run bootstrap Bootstrap CDK
npm run deploy Deploy this stack to your default AWS account/region
npm run diff Compare deployed stack with current state
npm run synth Emits the synthesized CloudFormation template

Building

Before building the project, you need to set the AWS_REGION and AWS_PROFILE environment variables.

# set the aws region and the aws profile (profile is set in ~/.aws/credentials)
export AWS_REGION=<AWS REGION>
export AWS_PROFILE=<YOUR IAM USER PROFILE NAME>

Deployment

  • Update queue names and intents in: ccp-cdk-infra/lib/lambdaCode/populateDB

  • Change the "company" value in the project-config.json

  • Add the Amazon connect instance ID as an SSM param in the correct region before running npm run deploy. Use connect-id as the key and the connect Id as the value. The connect instance Id can be found on the edit queue page of the Amazon connect instance's dashboard, under additional queue information. The Amazon connect instance Id is a part of the ARN: arn:aws:connect:us-east-1:<account_id>:instance/<instance_id>/queue/<queue_id>

$ cd ccp-cdk-infra
$ npm run bootstrap
$ npm run deploy

Adding additional stats

if you would like to add additional stats. You can do so by following the steps below:

  1. Create a new directory in the ccp-cdk-infra/lib/lambdaCode directory the directory name is the name of the lambda. Inside the directory add an index.js file. Ensure this function follows the other lambads in returning the Access-Control-Allow-Origin and Access-Control-Allow-Credentials

  2. Update the dependsOnConnectPolicy array in ccp-stack.js by adding the name of your new lambda.

  3. Update the allresources array in ccp-stack.js for API Gateway by adding the following { Type: <method>, Name: <resource_name>, Lambda: <new_function_name> }. Method should be an HTTP method.

UI

Screen Shot 2022-06-30 at 3 10 46 PM

Local Development

To run the ccp locally first make these config changes

  • Update default values for CONNECT_NAME, API_GATEWAY_ID and CF_DISTRIBUTION_URL in ccp-ui/src/config.js
$ cd ccp-ui
$ npm install
$ npm run build
$ npm start

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License. See the LICENSE file.

amazon-connect-custom-ccp's People

Contributors

amazon-auto avatar dependabot[bot] avatar jjleigh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

amazon-connect-custom-ccp's Issues

@aws-sdk/shared-ini-file-loader - integrity checksum failed when using sha512

Getting the following error when attempting to install @awsui/components-react

npm ERR! code EINTEGRITY npm ERR! sha512-K5FHebfLt4zqeIM88ndfuVXnpDa5GTHINy/AcqYW/wkjk5+gxahMChYtvRBJaX/9sbf1g7YYhGXGuuCednWiQg== integrity checksum failed when using sha512: wanted sha512-K5FHebfLt4zqeIM88ndfuVXnpDa5GTHINy/AcqYW/wkjk5+gxahMChYtvRBJaX/9sbf1g7YYhGXGuuCednWiQg== but got sha512-Nyw4/PGMxm0VPEI3d+Aj0cRz/q/DSM83EyYTzjT0lbE7hgdNT1Y8NljkxfxTa2uQQLjDZUtmkIfVOJ42/HriMw==. (15085 bytes)

Empty bucket

Deployment executed with no error, all resources seem to have been recreated, but the S3 bucket has not content? What files are suppose to be in the bucket?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.