amazon-connect / amazon-connect-chat-ui-examples Goto Github PK

Can custom chat widget call directly without need for Lambda and API Gateway?
If yes, why API Gateway is required in your example.

Any Idea How do I supply initial message ? I'm referring this link - https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html.

"InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   }

I also tried this - #21 .

I can get Name or some value in amazon connect contact flows. Is there a specific way to get InitialMessage?

The problem I am facing is, where to place "<script src="js/amazon-connect-chat-interface.js"></script>" in the code. Since if I keep this script tag above the AWS SDK import script tag (<script src="https://sdk.amazonaws.com/js/aws-sdk-2.769.0.min.js"></script>) then there is an error TypeError: AWS.ConnectParticipant is not a constructor. If kept below then error Uncaught TypeError: AWS.DynamoDB is not a constructor appears. So there seems to be a conflict in terms of where to place <script src="js/amazon-connect-chat-interface.js"></script> tag in the code. Please if anyone encountered the same issue, what could be the probable solution?

When initiating the stack in the London region I (and my colleague) keep hitting an S3 error. I have checked in Frankfurt, N.Virginia and Oregon and there is no issue - just London eu-west-2.

The error appears very early - I click on the NEXT button in the screen below and the error message appears as per the screenshot

Any help appreciated !

When integrate the UI to my own web app.
How can i check which chat tab is selected and who i am talking to in my own code?
(i mean which contact id)
How can i catch the event when agent switch to another chat tab?

It was me being a bit thick - closing !

Hi there,

I am trying to implement the chatui example and am experiencing two cases of chat initiation failures.

What i've found is that the only way to get another chat to initiate is to delete the entry from dynamodb and then it works. Im not sure why but after the first chat it never creates another item in the DDB for the next chat and the current chat stays as the previous one.

The initiateChatFailure varies between 1 and 2.

Nice to see the new chat feature. I've deployed these quickstarts and started playing around. I have a good idea of how the contact flows and the agent integration will work, but the pre-built widget (for the chat customer) is leaving me with some questions.

It is very helpful to have a pre-built widget to use, both to have it ready without having to build one ourselves, and to have an AWS-supported widget that will benefit from further improvements (that I don't have to add). It looks like it was added more as a way for us to get started quickly, and isn't quite in it's final form for public use. Is there a plan at some point to spin this off into a separate repository, or host it on CloudFront to be embedded more easily (kind of like the CCP)?

Here are a few initial points:

• On the asyncCustomerChatUX deployment, the widget first has a title of "Chat Demo - This is a demo of interacting with a Lex bot." After the first message it becomes "Chat Demo - This is a demo of a customer chat experience." I don't find either of these messages in the amazon-connect-chat-interface.js file. Maybe the stack deployed from the button in this repo uses a different version of that file.
• When using the startChatContactAPI deployment, that presents a title of "Hi there! - This is an example of how customers experience chat on your website." I do find that in the amazon-connect-chat-interface.js file.
• The 'chat-test' section of the Connect console gives a nice little floating button with a speech bubble icon. Any plans to build that into the widget interface?
• Our ideal solution would be able to provide a small snippet to embed on a client's website, without too much engineering on their end. Any plans for that?

Hello, We are trying to add asyncCustomerChatUX chat to a custom website and facing the above CORS issues. As part of adding chat widget to custom website i have done below things.

1. We have added website Url to initiateChatLambda function
2. We have created S3 bucket to host static website and imported 'amazon-connect-chat-interface.js'

we are using region "us-east-1" but i am not sure why this js is picking region as "us-west-2" and i am getting below error

"Access to XMLHttpRequest at 'https://participant.connect.us-west-2.amazonaws.com/participant/connection' from origin 'https://XX-XXXXX-XXXX.s3.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Could you please help on this issue.

Let me start by saying thanks for providing the async chat example - it's fantastic. I'm running in to one small problem with our instance of it, however.

Basically, whenever a chat is ended, either by the agent or the customer, the customer facing chat window goes blank and closes. I've modified the HTML to make the container keep displaying when it closes, but the chat goes blank. If possible, I'd prefer ending the chat to keep the chat conversation open rather than clearing the window - I'm not quite sure how to make this happen.

We've not made any edits to our deployment that would impact this, to my knowledge.

Hi, I have an issue where once the chat is ended, it is uploaded to the S3 bucket, though I believe it is then not being updated in DynamoDB. The items in DynamoDB show nextContactId as set to 'CURRENT_CHAT' and previousContactId as set to 'INITIAL_CHAT', which I suspect is wrong.

I have seen that your troubleshooting area mentions to make sure the S3 trigger is set up properly - are you able to provide step by step instructions on how to do this please? I have made sure that AmazonConnectS3BucketName and transcriptPath are the same in Amazon Connect and CloudFormation.

My 'ConnectChatBot-UpdateDdbWithS3LocationLambda-' lambda function has no trigger added to it, is that the issue? If it is, what trigger should be added? Thanks.

My Amazon Connect has configurations for "Hours of Operation"

1. How can I pass this information to the customer chat UI such that the chat widget shows some kind of 'chat is open/closed' functionality?
2. If the no agents are online, can the customer UI show whether chat as offline?

I am trying to create a component in reaction, but I have an error in initialization.
What is the best way to import js / amazon-connect-chat-interface.js?

  componentDidMount() {
    this.initChatInterface();
  }

  initChatInterface = () => {
    // this.connect = window.connect;
    connect.ChatInterface.init({
      containerId: 'root',
    });
  }

Trying to connect connectParticipant service using aws-sdk but it giving error like below.

TypeError: aws_sdk__WEBPACK_IMPORTED_MODULE_5___default.a.ConnectParticipant is not a constructor

Please find the sample request below.
var params = {
ParticipantToken: ParticipantToken, // ParticipateToken from StartContactChat response
Type: [
"WEBSOCKET","CONNECTION_CREDENTIALS"
]
};

var connectparticipant = new AWS.ConnectParticipant({apiVersion: '2018-09-07'});

    connectparticipant.createParticipantConnection(params, function(err, data) {
      if (err) console.log(err, err.stack); 
      else     console.log(data); 
    });

Could anyone help me with an example to resolve this issue.

Hi. I am successfully displaying a URL preview in a chat window on the Amazon Connect Omni-Channel Demo web page that comes with the URL Preview Cloudformation stack. However if I click on the preview it opens the link in the same tab, and I lose the chat - even if I click on the back button on the browser. I can right click on the link and open it in a new tab but I can't really expect the customer to do that.

Is there a way that I can configure the page or the chat UI or the response so that the link opens in a new tab or window and the chat can continue ?

(Just in case it is relevant ... In this specific case I am opening a web landing page that then uses javascript to automatically launch a Facebook login app in a popup, which, on successful login closes and the landing page then redirects the user to a web site in the same tab).

Thanks.

Maybe more of a question than an issue - though may be the root cause of an issue....why does the test web page ask for a username and agent name ? Does it use these ? What if a agent name is specified that doesn't exist ? I've tried following the code and just can't see where these are used (but them I admit to being a noob). I've spent many hours poring over the stack and code and feel that I could contribute in some [small] way ... if you can help me to help everyone else that would be great !

I got access denied for days after following all these instructions.

when i refresh the custom chat widget, the chat starts again instead of continue the previous ongoing chat and on agent side, previous chat not ended. So I need guidance about how to handle refresh scenario in chat widget, I run this repository code, it also not entertains the refresh thing. Can you guys please guide i will be very thankful to you!

Do browser notifications need to be manually implemented in this repo? If so, how?

Hello,

Here's some feedback revolving around the segregation of sections more clearly

• The "Prebuilt Chat Widget" section ends after point 3. Right after, the next topic "## Create Your Own Chat UX" starts without any heading. Clear demarcation would be helpful here.
• We jump straight to point number 7 after point number 3.

Hello, thank you for the time to implement this quick start solution for us. I am on the Ops side of things was was still able to figure out how to integrate this onto my site with very minimal JavaScript experience. We are currently working on turning this into a fully usable pop open chat box for our websites.

Where issue is encountered

I have found the below warning which causes about a 2 delay for the chatbot opening. When I click the button to open the chat bot this error pops up in the console, there is about a 2 second hangup, then the chat windows pops open.

jquery-3.1.0.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I think this is coming from when I call connect.ChatInterface.initiateChat in my javascript.

Potential issue in amazon-connect-chat-interface.js

I found this stack overflow post describing the exact issue. The answer by users Yann39 and Barmar says to get ride of async: false usages. I see this used in a few places in the repo.

I may have found exactly where I am encountering the issue. I located the below text in cloudformationTemplates\asyncCustomerChatUX\website\js\amazon-connect-chat-interface.js which I am using. I suspect that async:!1 is translating to async: false which is causing the issue.

$.ajax({url:e.apiGatewayEndpoint,type:"POST",async:!1,data:JSON.stringify(t),success:function(e){console.log("Success calling initiate chat!"),console.log(e)},error:function(e){console.log("There was a failure calling the start chat lambda function. Check your CORS policy and CloudWatch Logs for any errors."),console.log(e)}})}(e).then(function(i){console.log("response: "+JSON.stringify(i)),n.openChatSession(i.data,e.name,e.region,e.stage)

I am willing to work on writing and testing a fix for this if you document how to develop this file.

Hi,

We are facing with following issue in following scenario:

1. When we are using "customChatWidget" option,
2. and if Agent doesnt reply in time (misses call),
3. 3. and after missing call agent clicks on "Close contact" button,
4. and Agent Accepts next call on time,
5. but, a second call is also triggered on Agent Side, and on Agent Side, 1st accepted chat seems to be active, but not actually. That is a weird User Experience, and confuses Agent Side, because it seems as if Agent connected to Client, but not actually.

In above conditions, sometimes that bug doesnt appear, but usually appears. Could you please advice a solution?

Thanks

Hello Team,

Is there a way we can get a code for amazon-connect-chat-interface.js? Currently, we have a minified code. Any idea when it will go to open source?

Thanks,

When a user has interacted once and his chat is closed, if he tries to reconnect with the same First Name and Username I am seeing below error in the browser console. The page is stuck at "Loading" and chat never starts. I tried giving all the roles "Administrator" access that are deployed. But still seeing this error

passing chat details to create: {"username":"jane111","instanceId":"<hidden>","previousContactId":"INITIAL_CHAT","startChatResult":{"ContactId":"9512d7bf-612e-4f1e-8b46-887859e7f963","ParticipantId":"49bfcdff-4abf-4974-8431-52dfc45f7d6b","ParticipantToken":"hidden"}} amazon-connect-chat-interface.js:1:1539326
in open chat session. need to connect amazon-connect-chat-interface.js:1:1541737
initiating websocket connection amazon-connect-chat-interface.js:1:1539532
unsuccessful connection {"_debug":{"reason":"Failed to fetch connectionDetails with createParticipantConnection","_debug":{"message":"Access denied","code":"AccessDeniedException","time":"2020-03-06T18:20:13.152Z","requestId":"17a6b48d-71ab-4f90-9f60-0d13b1e1c9ef","statusCode":403,"retryable":false,"retryDelay":60.40873616985627}},"connectSuccess":false,"connectCalled":true,"metadata":null} amazon-connect-chat-interface.js:1:1541999
initiateChat failure1 amazon-connect-chat-interface.js:1:1571120
failed 
Object { _debug: {…}, connectSuccess: false, connectCalled: true, metadata: null }

Hello ,

Does anyone have any fix or Idea , why amazon-connect-chat-interface.js is not working in Internet Explorer 11.

jQuery.Deferred exception: 'connect' is undefined ReferenceError: 'connect' is undefined
Object doesn't support property or method 'values'

Is there a version of chat-interface.js that contains all latest features including urlpreview and interactive messages ?
Looking at file chat-interface.js from asyncCustomerChatUX and urlpreview they are not really from same master it seems. None of the files support both urlprevieiws and interactive messages.

In the CloudFormation template for asyncCustomerChatUX the resource S3BucketConfigurationLambdaExecutionRole doesn't have permissions to write logs to CloudWatch. I ran into this issue when I ran into an error with the S3BucketConfigurationLambda function which I am currently troubleshooting.

Please add the following lines to that lambda execution role so that it can write logs.

- Effect: "Allow"
                Action:
                  - 'logs:CreateLogGroup'
                  - 'logs:CreateLogStream'
                  - 'logs:PutLogEvents'
                Resource:
                  - !Sub "arn:${AWS::Partition}:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/*"

We are trying to execute the example chat application with lambda & API Gateway,

We are able to get the response from API Gateway, but when we tried to create the request, we are getting following errors as below,

Access to XMLHttpRequest at 'https://participant.connect.us-west-2.amazonaws.com/participant/connection' from origin 'https://amazonconnectchat.s3.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Could you please help on this issue.

After deploying asyncCustomChatUX Cf . Everything is fine but whenever i ended chat and reopen chat it shows initialization failed until i do page refresh. What i found is if dynamodb is not updated with s3 key it will show initialization failed error as it passes same params thinking that chat is not ended

Is there any way to disable all the console logs once the chat starts?

Hi
Just tried the startChatContactAPI cloud template. It failed with the following message

Resource handler returned message: "The runtime parameter of nodejs10.x is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs14.x) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: xxxxxxx, Extended Request ID: null)" (RequestToken: xxxxx, HandlerErrorCode: InvalidRequest)

Does anyone meet the same issue, after deploy asyncCustomerChatUX template, use the same FirstName and UserName to login and load the Chat UI, there can't load the transcript but just start a new contact session.

Hi, We have integrated Lex with chat and its displaying slots prompt in chat widget but it doesnot display slots prompt response cards as a option in widget. How can we achieve that. We want user to select those options. Any help would be greatly appreciated.

Hello, first off thanks for the example and solution , the step by step is very well written.

I'm currently having an issue when i try to create the stack on the "Set Up Steps" part 2. When i try to run , it displays the error "The specified bucket does not exist". It does create it on the S3 Bucket list and some files are created but the error make the entire thing rollback.

What could i do in this situation?

Thanks for any assistance.

Wed Jan 20 15:52:32 UTC 2021 : Endpoint response body before transformations: {"errorType":"TypeError","errorMessage":"Cannot read property 'Username' of null","trace":["TypeError: Cannot read property 'Username' of null"," at Runtime.exports.handler (/var/task/startChatContact.js:12:23)"," at Runtime.handleOnce (/var/runtime/Runtime.js:66:25)"]}

There is a bug in the startChatContact function. This statement that builds the var for start chat contact ignores Attributes, I had to change it to look like this to work (check the "Attributes" setting, the CFT only sets Customername and UserName parameters.

var startChat = {
"InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
"ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
"Attributes": body["Attributes"],
"ParticipantDetails": {
"DisplayName": body["ParticipantDetails"]["DisplayName"]
}
};

First off, thanks a bunch for providing this example implementation. It's really helped my team get off the ground much quicker than we otherwise could.

I love the asyncCustomerChatUX widget, but I'd like to be able to modify it a little to work better for my team's needs. It looks like amazon-connect-chat-interface.js defines the React components that render the widget. Would it be possible for you to open-source the unminified files you used to compile that?

@efh365 mentioned back in December on issue #3 that this was in the works but at that point there wasn't a timeline for it. Is there any update on this? I really want to use your widget as a good foundation instead of building my own.

I am trying to customize the default demo website and start the chat from customized website. I have changed the form, added few styles when i click on startchat . The website starts loading but it doesn't initiate chat. In inspect console it is "initiateChat failure2" error.

Installed via Cloudformation stack in us-east-1. All works fine apart from no preview. I return some text that contains a valid URL eg https://bbc.co.uk . The URL is recognised as such (different colour, underlined) and clickable however there is no preview when I hover over the link (or any other time). Unsure if its relevant but two other messages are (intentionally) generated by the bot after the one that contains the link .The related Dynamo DB caching table is empty. Tested in Chrome and Edge. If there is anything else I can tell you please let me know (but please spell it out in simple terms as I'm still a novice !) Thanks.

Please update the scripts to node14, node10 seem to be not supported anymore.

After having deployed the ASync solution as well as cloning/building the customChatWidget, I am able to start a chat without issue, but am not able to consistently start a 2nd chat after the 1st has ended (clicking end chat from widget) without refreshing the webpage.

I am using a unique name/username in the form each time, but subsequent chats after the first has ended seem to be working on the backend (the console shows messages being sent/received) but those messages never render in the widget. After refreshing the webpage, a new chat starts as expected.

Working

Not Working

One thing I'm noticing is that there is another "t" top-level React Component being instantiated each subsequent time a new chat is started. When looking at the source code for the amazon-connect-chat-interface.js file, I found that the "t" component is the minimized name for the BrowserRouter Component. Sometimes the issue presents itself on the 2nd attempt (2 t components), sometimes it takes a couple more tries (as in the screenshot). I'm not sure if having multiple "t" components is part of the issue or not, but thought it was worth mentioning.

Is there a way to send x-api-key in request header? (I have tried to guessing the parameter in initiateChat by adding parameters like accessKey, secretKey, clientConfig, but no luck.)

I can see in the minified amazon-connect-chat-interface.js file contains the keyword headers["x-api-key"], but it is difficult to find out what it does without source code.

@efh365 would you be able to share if it is possible to do?

Hi I have checked that all the details are correct in the troubleshooting section . However the widget remains in loading status. Any help to resolve this is really appreciated!

Thks

I found that ContactAttributes were not being passed via the Lambda behind the API to Connect.

From the Readme...

connect.ChatInterface.initiateChat({
  name: customerName,
  username: username,
  region: ${region},
  apiGatewayEndpoint: "https://${apiId}.execute-api.${region}.amazonaws.com/Prod",
  contactAttributes: JSON.stringify({
    "customerName": customerName
  }),
  contactFlowId: "${contactFlowId}",
  instanceId: "${instanceId}"
},successHandler, failureHandler)

I made the change bellow in the startChatContactAPI-StartChatLambda Lambda and it works now as i would have expected.
"Attributes": body["Attributes"],

return new Promise(function (resolve, reject) {
        var startChat = {
            "InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
            "ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
            // "Attributes": {
            //     "customerName": body["ParticipantDetails"]["DisplayName"]
            // },
            "Attributes": body["Attributes"],
            "ParticipantDetails": {
                "DisplayName": body["ParticipantDetails"]["DisplayName"]
            }
        };

and now works with

connect.ChatInterface.initiateChat({
                    name: customerName,
                    region: "eu-west-2", // TODO: Fill in
                    apiGatewayEndpoint: apiGatewayEndpoint,
                    contactAttributes: JSON.stringify({
                        "customerName": customerName,
                        "language_code": language_code
                    }),
                    contactFlowId: contactFlowId,
                    instanceId: instanceId
                }, successHandler, failureHandler);

Hope this might help others, i am using this to pass a language option in my case.
Could be this can be changed or perhaps it has a reason for being like this.

We are using AuthorizerLambdaFunction with CognitoUserPool to authorize ApiGateway. While trying initiateChat with apiGatewayEndpoint, we are receiving MissingAuthenticationTokenException. We have implement a way to get accesstoken from UserPoll but how do we pass while initiateChat. Or I am not sure if I am doing somethign wrong.

One more question, we already have amazon connect running and is being used in salesforce, do i have to run this cloudformation template to implement chat feature?

Please help.

I am using a pre-built chat widget in cloudformationTemplates/startChatContactAPI. I have deployed the compete stack and I can now link it to my website users. But, the problem is when the user refreshes the page the chat session disappears and on clicking, start chat a new chat session is established? How do I retain my previous chat session even on events like page refresh?

We are implementing the amazon connect streams API on a project. I used the connect.ChatInterface.initiateChat and it works fine in a separate popup window as the amazon connect contact Control panel.

I wanted to implement the customer chat on the iframe so that it can be implemented in the layout page and be used through out the application. My problem here is when i reload the page, the existing customer chat is losing its session and its starting a new Chat. Can you provide me a example of the customer chat that can be used in all the pages of the application with out losing the Existing Chat session as shown in the attached image?

Can anyone help me resolve this error.

caught error ResourceNotFoundException: Resource not found of Type: null

i got this error while initiating the chat contact from my lambda function in amazon connect.

Object I'm sending to initiate the chat:

var startChat = {
InstanceId: instanceId,
ContactFlowId: conactflowid,
Attributes: {
"customerName": body.customerName,
"firstName": body.firstName,
"lastName": body.lastname,
"Phone": SenderID,
"message": body.Message,
"channel": "FACEBOOK",
"phoneNumber": SenderID,
"username": body.username,
},
ParticipantDetails: {
DisplayName: "FACEBOOK",
},
};
// "Phone": body["Attributes"]["Phone"],
console.log("Object-Compiled", startChat);
connect.startChatContact(startChat, function (err, data) {
if (err) {
console.log("Error starting the chat.");
console.log(err, err.stack); // This is where I'm getting error.
reject(err);
}
else {
// console.log("Start chat succeeded with the response: " + JSON.stringify(data));
resolve(data);
}
});
});

Just noticed after deploying the stack that the TTL is being set in milliseconds and not seconds which DynamoDB doesn't support. I would recommend using Math.floor(Date.now() / 1000) instead of Date.now() in startChatContact.js in the asyncCustomerChatUX example

Every once in a while our demo chat client fails when we load the page:

Looking at the dev console, it shows a 403 connection error to: https://4agcjusx3k.execute-api.us-east-1.amazonaws.com/prod/participant/connection

The request being sent that yields the 403 is:

{"Type":["WEBSOCKET","CONNECTION_CREDENTIALS"]}

This Lambda function is not ours, so I checked amazon-connect-chat-interface.js, and it's embedded in there being set on a variable called invokeUrl for us-east-1:

d = {
    "us-west-2": {
        invokeUrl: "https://eap1w93j0k.execute-api.us-west-2.amazonaws.com/prod"
    },
    "us-east-1": {
        invokeUrl: "https://4agcjusx3k.execute-api.us-east-1.amazonaws.com/prod"
    },
    "ap-southeast-2": {
        invokeUrl: "https://v4u8oq0cve.execute-api.ap-southeast-2.amazonaws.com/prod"
    },
    "ap-northeast-1": {
        invokeUrl: "https://3fidunfyz7.execute-api.ap-northeast-1.amazonaws.com/prod"
    },
    "eu-central-1": {
        invokeUrl: "https://1gynaarm3e.execute-api.eu-central-1.amazonaws.com/prod"
    }
}

Any idea what this is, or why it's being invoked only every once in a while?