Embed Quick Chat Agent in Salesforce¶

Embed an Amazon Quick Chat Agent into Salesforce as a Lightning Web Component (LWC).

Architecture¶

Salesforce User (logged in)
  → Lightning page loads LWC
  → LWC renders iframe with Quick Chat Agent embed URL
  → User authenticates via Quick (IDC-backed)
  → Chat Agent is interactive inside Salesforce

Prerequisites¶

AWS account with Amazon Quick Enterprise Edition
A Quick Chat Agent created and configured
IAM Identity Center with users provisioned in Quick
Salesforce org with Lightning Experience enabled
Salesforce CLI (sf) installed (brew install sf)

Setup¶

1. Get Your Chat Agent Embed URL¶

Go to the Quick console
Navigate to Explore → Chat agents
Click the three dots next to your Chat Agent → Embed
Copy the embed code — it will look like:

<iframe
    width="450"
    height="800"
    allow="clipboard-read https://us-east-1.quicksight.aws.amazon.com; clipboard-write https://us-east-1.quicksight.aws.amazon.com"
    src="https://<region>.quicksight.aws.amazon.com/sn/account/<account-alias>/embed/share/accounts/<account-id>/chatagents/<agent-id>?directory_alias=<account-alias>">
</iframe>

Note the src URL — you'll need it in step 3.

2. Add Your Salesforce Domain to Quick¶

Go to Quick console → Manage Quick → Domains and Embedding
Add your Salesforce Lightning domain:
```
https://<your-org>.lightning.force.com
```

3. Configure the LWC¶

Edit salesforce/force-app/main/default/lwc/quickChat/quickChat.html and replace the iframe src and allow URLs with your values from step 1:

<template>
    <lightning-card title="Quick Chat Agent">
        <div class="slds-p-around_medium">
            <iframe
                width="450"
                height="800"
                frameborder="0"
                allow="clipboard-read https://<region>.quicksight.aws.amazon.com; clipboard-write https://<region>.quicksight.aws.amazon.com"
                src="https://<region>.quicksight.aws.amazon.com/sn/account/<account-alias>/embed/share/accounts/<account-id>/chatagents/<agent-id>?directory_alias=<account-alias>"
            ></iframe>
        </div>
    </lightning-card>
</template>

4. Deploy to Salesforce¶

cd salesforce

# Authenticate to your Salesforce org
sf org login web --set-default

# Deploy the LWC
sf project deploy start --source-dir force-app

5. Configure Salesforce Security¶

In Salesforce Setup, add the following:

CSP Trusted Sites (Setup → CSP Trusted Sites → New Trusted Site): - Trusted Site Name: QuickChatAgent - Trusted Site URL: https://<region>.quicksight.aws.amazon.com - Check all context boxes (Connect, Font, Img, Media, Object, Script, Style, Frame)

6. Add the Component to a Page¶

Go to Setup → Lightning App Builder
Edit or create a Lightning page
Drag QuickChat from the Custom components panel onto the page
Save and Activate the page
Assign it to a Lightning app via App Manager → Navigation Items

Project Structure¶

salesforce-chat-embed/
└── salesforce/
    ├── sfdx-project.json
    └── force-app/main/default/
        ├── lwc/QuickChat/
        │   ├── QuickChat.html      # iframe with Chat Agent embed URL
        │   ├── QuickChat.js         # LWC controller (minimal)
        │   └── QuickChat.js-meta.xml
        └── classes/
            ├── QuickChatController.cls
            └── QuickChatController.cls-meta.xml

User Access¶

Users accessing the Chat Agent in Salesforce must have: 1. An IAM Identity Center account 2. A Quick registered user (same email as IDC) 3. Access to the Chat Agent's underlying topics/data in Quick

Production Considerations¶

The static embed URL requires users to authenticate with Quick separately
For SSO-based embedding with trusted identity propagation, use the generate_embed_url_for_registered_user_with_identity API when Chat Agent support is added — see the Quick Chat Agent Embedding Demo for the API-based approach
Consider storing the Chat Agent URL in a Salesforce Custom Metadata Type for easier updates