Passing in Attributes into request body doesn't work for reactNative example demo app about amazon-connect-chat-ui-examples HOT 6 CLOSED

The react app is calling an API Gateway method in your AWS account, which invokes a Lambda function, which calls the StartChatContact that you linked to. The place where the Lambda function makes its call (assuming you're using the startChatContact backend from the Readme steps) is at https://github.com/amazon-connect/amazon-connect-chat-ui-examples/blob/master/cloudformationTemplates/startChatContactAPI/js/startChatContact.js#L30 - and it only passes body.ParticipantDetails.DisplayName to the Attributes parameter. You'd need to change the Lambda function to use the Attributes (or contactAttributes) parameter you're passing and send it into connect.startChatContact.

from amazon-connect-chat-ui-examples.

@coderjonny can you please confirm the lambda that is invoked by the API Gateway method? Is it the startChatContact backend function linked above?

Can you please share the code snippet for that Lambda function so we can confirm? Thank you.

from amazon-connect-chat-ui-examples.

Hi all, Team needs more time to investigate this, will provide updates on this issue after taking further look.

For now, can you confirm the backend setup that is being used?

If using the startChatContact Lambda (like @lwarneminde explained), this code might be ignoring extra attributes, and you can update the lambda like so:

EXAMPLE DIFF: master...spenlep-attribute-diff-example-test

// cloudformationTemplates/startChatContactAPI/js/startChatContact.js

var AWS = require('aws-sdk');
AWS.config.update({region: process.env.REGION});
var connect = new AWS.Connect();

var startChat = {
    "InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
    "ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
    "Attributes": {
        "customerName": body["ParticipantDetails"]["DisplayName"],
+       "customAttribute": body["customAttributesPassedFromChatInterface"]["MyCustomAttribute"]
    },
    "ParticipantDetails": {
        "DisplayName": body["ParticipantDetails"]["DisplayName"]
    },
    // Enable rich messaging: https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html
    ...(!!body["SupportedMessagingContentTypes"] && { "SupportedMessagingContentTypes": body["SupportedMessagingContentTypes"] }),
    // Set optional chat duration: https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-ChatDurationInMinutes
    ...(!!body["ChatDurationInMinutes"] && { "ChatDurationInMinutes": body["ChatDurationInMinutes"] })
};

connect.startChatContact(startChat, function(err, data) {
    if (err) {
        console.log("Error starting the chat.", err);
        reject(err);
    } else {
        console.log("Start chat succeeded with the response: " + JSON.stringify(data));
        resolve(data);
    }
});

Please feel free to post further question, team will continue to track issue.

Thanks,
Spencer

from amazon-connect-chat-ui-examples.

Passing Custom Attribute to Contact Flow

When initializing the chat with a StartChatContact request, you can pass custom attributes to the the contact flow.

flowchart LR
    START["`Chat Widget
    StartChat Request`"] --> B["`Lambda (AWS-SDK)
    connect.startChatContact`"];
    B --> C["`Amazon Connect
    StartChatContact API`"];
    C --> END["`Amazon Connect
    Contact Flow`"];

Reference

• StartChatContact API - Documentation
• Admin Guide - "Use Amazon Connect contact attributes"
• Example startChatContactAPI Lambda - CloudFormation Template

Configuration

1. If using the GitHub AmazonConnectChatWidget, pass in custom contactAttributes to the ChatInterface.initiateChat() method. This will pass "Attributes" key in the request body

// https://github.com/amazon-connect/amazon-connect-chat-interface/blob/master/src/components/Chat/ChatInitiator.js

connect.ChatInterface.initiateChat({
  name: customerName,
  region: ${region},
  contactFlowId: "${contactFlowId}",
  instanceId: "${instanceId}",
  apiGatewayEndpoint: "${apiGatewayEndpoint}",
  contactAttributes: JSON.stringify({
    "customerName": customerName,
    "customAttribute": "myCustomAttribute". // <------ CUSTOM ATTRIBUTE HERE
  }),
  
},successHandler, failureHandler)

2. Update the lambda making the StartChatContact call, make sure to forward body["Attributes"] to connect.startChatContact()

/*
  Example `startChatContactAPI` lambda making a call to the Amazon Connect public StartChatContact API
  
  LINK: https://github.com/amazon-connect/amazon-connect-chat-ui-examples/blob/master/cloudformationTemplates/startChatContactAPI/js/startChatContact.js

  1) Chat Widget will make request to this Lambda
  2) Lambda will forward the request to the Amazon Connect Backend
*/

var AWS = require('aws-sdk');
AWS.config.update({region: process.env.REGION});
var connect = new AWS.Connect();

exports.handler = (event, context, callback) => {
    console.log("Received event: " + JSON.stringify(event));
    var body = JSON.parse(event["body"]);

    startChatContact(body).then((startChatResult) => {
        callback(null, buildSuccessfulResponse(startChatResult));
    }).catch((err) => {
        console.log("caught error " + err);
        callback(null, buildResponseFailed(err));
    });
};

function startChatContact(body) {
	return new Promise(function (resolve, reject) {
        var startChat = {
            "InstanceId": body["InstanceId"],
            "ContactFlowId": body["contactFlowId"],
            "Attributes": {
                "customerName": body["ParticipantDetails"]["DisplayName"],
                // ...
                ...body["Attributes"] // <------ CUSTOM ATTRIBUTE HERE
            },
            "ParticipantDetails": {
                "DisplayName": body["ParticipantDetails"]["DisplayName"]
            },
        };
        
        // https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html
        connect.startChatContact(startChat, function(err, data) {
            if (err) {
                console.log("Error starting the chat.", err);
                reject(err);
            } else {
                console.log("Start chat succeeded with the response: " + JSON.stringify(data));
                resolve(data);
            }
        });
    });
}

3. Consume the new attribute in the contact flow. Refer to the Admin Guide - "Use Amazon Connect contact attributes"

from amazon-connect-chat-ui-examples.

Hi @coderjonny, thank you for taking the time to raise this issue. Can you confirm if this has resolved unblocked your use case?

I have provided further explanation to enable passing a custom attribute in the startChatContact.js lambda function. Team will update documentation to avoid further confusion.

If there is no further problem, going to resolve this issue. Let us know if you have any questions.

Thanks,
Spencer

from amazon-connect-chat-ui-examples.

Hi @spencerlepine ,

Yes, updating our lambda resolved our issue!

Thank you.

from amazon-connect-chat-ui-examples.