API Gateway endpoint needed when setting up connect integration

[PiotrRut]

Hello.

I am trying to add Amazon Connect integration to an existing lex-web-ui instance running in a React app. The bot has not been created using the CloudFormation deployment template provided in this repo, and I am instead using one that has been manually created. Same goes for cognito and connect instances.

The connect configuration for this requires apiGatewayEndpoint (provisioned by CF template) - however, due to the above, this is not present in my current config. What exactly is this gateway endpoint, what is its purpose and what does it connect to? It looks like it's absolutely needed for the config otherwise it throws a refusal error.

I've configured the connect instance and contact flow ID, the last piece missing is this API GW url.

Thanks.

@bobpskier @chrislott

[PiotrRut]

@bobpskier @chrislott are you able to shed any light on this please?

[bobpskier]

@PiotrRut There is a template which creates the api gateway instance which is used to initiate a live connect chat. See templates/restapi.yaml from the root level in aws-lex-web-ui. This was added in the in more recent versions of aws-lex-web-ui. This template takes as input the ConnectContactFlowId, the ConnectInstanceId, and the ParentOrigin of the web app. The template is optional invoked if EnableLiveChat is enabled at the top level. The configuration including the api gateway endpoint is then configured in lex-web-ui-loader-config.json in the connect parent property. Without the api gateway endpoint, there is no mechanism available to initiate a live chat via connect.

[bobpskier]

@PiotrRut Also see the readme at https://github.com/aws-samples/aws-lex-web-ui/blob/master/README-connect-live-chat.md which goes into more depth the configuration and interaction with Connect live chat.

[PiotrRut]

@bobpskier thank you for responding - as I mentioned, I have not used any of the templates in this repo as I had integrated the lex-web-ui with an existing Lex v2 bot I had created beforehand.

What exactly is this API responsible of? From what I can see it is used to trigger some kind of lambda. Is there any way I could recreate that lambda manually (I assume the code is public somewhere?) and create a new endpoint on my existing API GW powered API (that I have running for other purposes) to trigger it, instead of going through creating it via the template you mentioned?

[bobpskier]

@PiotrRut The restapi.yaml template provides all the mechanisms needed to setup the api gateway required to use live chat from aws-lex-web-ui. If you open this cloudformation template up you will find that it creates a lambda function, InitiateChatLambda, from the S3Bucket named "aws-bigdata-blog" and the Key named "artifacts/aws-lex-web-ui/artifacts/initiate-chat-lambda.zip". This zip contains the code for the function. This function uses an execution role also created by the template. See InitiateChatLambdaExecutionRole that gives it permissions for the action "connect:startChatContact". You'd need to setup this function manually in a similar fashion. Initiating the chat with Connect is exactly what this function performs. The template next goes through setup of a new api using the resource "/livechat". A POST method and an OPTIONS method are declared. You'd need to set these up on your existing API in a similar fashion. You'd need to manually configure lex-web-ui-loader-config.json with the parameters for apigateway end point plus other connect info needed for live chat. Take some time to look at the restapi.yaml template. You can reverse engineer what it creates based on this template and implement manually.

[PiotrRut]

@bobpskier thanks again for the info - so is the code for this lambda at all accessible anywhere?I already have a serverless API running behind API GW, and would like not to have to deploy any additional stacks.

I did try to deploy the stack on a separate account just to get access to the code, however I get an error saying that the s3 buckes is only accessible from us-east-1 (I am in eu-west-2)

Resource handler returned message: "Error occurred while GetObject. S3 Error Code: PermanentRedirect. S3 Error Message: The bucket is in this region: us-east-1. Please use this region to retry the request (Service: Lambda, Status Code: 400, Request ID: 2e3894e7-02ca-46d6-b1b6-4df922174cae, Extended Request ID: null)" (RequestToken: 9c49ac30-1b41-4992-77e7-292d28e1a635, HandlerErrorCode: InvalidRequest)

[bobpskier]

For manually running the restapi.yaml template in eu-west-2 (London) you would launch a stack from

https://aws-bigdata-blog-replica-eu-west-2.s3.eu-west-2.amazonaws.com/artifacts/aws-lex-web-ui/artifacts/templates/restapi.yaml

And specify templates parameters using the following:

Fill in your Connect instance id, Connect contact flow id, the parent origin of your web site, and a parent stack name. You don't have a parent stack name so just use something unique. The parent stack name is only used to build a unique api gateway name.

Use the exact values for InitiateChatLambdaCodeObject and SourceBucket as shown in the image. This uses version 0.19.4 of the zip file which is available in eu-west-2.

[bobpskier]

The source code for the InitiateChatLambdaCode used in the lambda is available in this repo at:

src/initiate-chat-lambda/index.js

[PiotrRut]

Thanks for that information @bobpskier - this is definitely very helpful!! Appreciate it :)

[PiotrRut]

@bobpskier got it all working now, thanks again. Any idea why when trying to disconnect from live chat from within the lex-web-ui, upon calling https://participant.connect.eu-west-2.amazonaws.com/participant/disconnect the response is a 403 with this message:

{"message":"Access denied"}

[bobpskier]

The lex-web-ui makes use of the node module "amazon-connect-chatjs" using version "^1.1.7" to perform actions against connect. This is a dependency on code owned by another group in Amazon. I believe it is this module that is calling the /disconnect resource which is hitting the 403. The 403 error is described at https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html and seems to indicate the caller does not sufficient privilege to call this resource. I've not seen this error before on disconnect requests from lex-web-ui when setup using the templates. @chrislott can you see if the amazon-connect-chatjs library version being used is correct with respect to disconnect logic and Is there anything special on the Connect side that needs to be setup to handle disconnects correctly from the client?