Embed interactive dashboards in your application with AWS Quick Sight

August 2025: This post was reviewed and updated to include the latest APIs for embedding.

AWS Quick Sight allows you to quickly and efficiently enhance your application by embedding AWS Quick Sight dashboards within your Application. This means rich interactive data visualizations and analytics capabilities can be added to your application without any custom development. You won’t require specialized expertise on your team to develop, maintain, and evolve the analytics components for your applications, nor manage and scale your analytics servers, manage complex data engineering pipeline and infrastructure as your applications’ popularity grows. This saves you time and money and lets you focus on your core application functionality!

Embedded AWS Quick Sight dashboards allow you to utilize AWS Quick Sight’s serverless architecture and easily scale your insights with your growing user base, while ensuring you only pay for usage with AWS Quick Sight’s unique pay-per-session pricing model. Applications can authenticate the dashboard users with any identity provider of choice (example Active Directory, Cognito, or any SAML based federated SSO provider that your organization uses) and act on behalf of the user to get access to AWS Quick Sight dashboard. This means that every user receives a secure, personalized dashboard while requiring no user-facing Quick Sight-specific authentication. Dashboard embedding is available in AWS Quick Sight Enterprise Edition in all supported regions.

To facilitate an easy embedding experience, AWS has also launched the AWS Quick Sight JavaScript SDK, and a rich set of AWS Quick Sight API operations. The AWS Quick Sight JavaScript SDK lets you efficiently integrate AWS Quick Sight dashboards in your application pages, set defaults, connect controls and handle errors. The new user and group API operations allow you to programmatically manage users and groups. This helps you rollout AWS Quick Sight to your users faster, and makes it easier to manage AWS Quick Sight resources using groups. User API operations are available for both Standard and Enterprise Editions, while group API operations are available in Enterprise Edition.

Let’s now take a quick look at how you can embed a dashboard in your application. We’ll go over the embedding steps for both registered users and anonymous users. We’ll start with registered users. The following four steps describe how to embed a dashboard.

Step 1: In AWS Quick Sight, create your dashboards and whitelist your domains

In this step, you create the dashboards in AWS Quick Sight and then share it with the readers who you would like to access this in the embedded form. Each unique viewer of the embedded dashboard must be a member of the AWS Quick Sight account and can be either provisioned in the account ahead of time or at the point of access using the user API operations. To provide each viewer with access to the dashboard, share the dashboard with a group. Then add users to the group once they are provisioned in the AWS Quick Sight account.

Before publishing the dashboard, let’s first create an AWS Quick Sight group for Finance users. AWS Quick Sight groups can be created through the ‘create-group’ api. The following AWS CLI command shows how to achieve this.

aws quicksight create-group --aws-account-id 111122223333 --namespace default --group-name financeusers

When you publish a dashboard, there is an option that allows you to enable or disable the advanced filtering and download to CSV options on the dashboard, to provide a simplified dashboard experience if desired.

Share the dashboard with the financeuser group created above. You can find this group by searching in the ‘Select users in this account’ field. Grant ‘Viewer’ permissions to the group.

To avoid unauthorized embedding of dashboards from your account, an administrator in your account must explicitly enable domains where your AWS Quick Sight dashboards are embedded. You may also like to enable subdomains, which will allow embedded dashboards for all subdomains of this domain. For example if your domain is https://example.com, subdomains include https://blogs.example.com and https://salesinfo.corp.example.com. This is done by using the Manage Quick Sight option that is available to all administrators. All domains in use (dev/staging/production) must be whitelisted and must use https.

Step 2: In your AWS account, set up permissions for embedded viewers

To provision users of your application as members of your AWS Quick Sight account, create an AWS Identity and Access Management (IAM) role that your application can assume on behalf of the user. This role should grant the visitor permissions to retrieve the specific embedded dashboard (quicksight: GenerateEmbedUrlForRegisteredUser)

The following is a sample policy with this permission:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "quicksight:GenerateEmbedUrlForRegisteredUser",
            "Resource": [
"arn:aws:quicksight:us-west-2:111122223333:dashboard/26a7dcad-7831-4266-9f75-ffd9265aa335",
"arn:aws:quicksight:us-west-2: 111122223333:namespace/default",
],
            "Effect": "Allow"
        }
    ]
 }

In the above policy, you can limit the resources to certain dashboards and namespaces, for which you allow to generate the embedding url. Next, while calling the embed url API, you can use “experience-configuration” parameter to specify the allowed dashboard(s) for which you want to generate the embedding url.

Your application’s IAM identity must have permissions to use the role you just created. This means that as a user accesses your application, your application can assume the QuickSightEmbed role on the user’s behalf, and provision the user in the AWS Quick Sight account. The following example shows a statement that can be added to your application’s IAM identity to allow it to assume the QuickSightEmbed role.

{
    "Version": "2012-10-17",
    "Statement": {
       "Effect": "Allow",
       "Action": "sts:AssumeRole",
       "Resource": "arn:aws:iam::111122223333:role/QuickSightEmbed"
   }
}

Step 3: On your application server, authenticate the user and get the embedded dashboard URL

When a user lands in your application you can check to see if the user is already registered in AWS Quick Sight or provision the user if they are accessing for the very first time. The following AWS Command Line Interface (AWS CLI) command can be used to check if the user is already provisioned in the system.

aws quicksight describe-user --aws-account-id 111122223333 --namespace default --user-name QuickSightEmbed/tom.smith@example.com

In the above example, ‘tom.smith@example.com’ is the session name of the user visiting your application, and ‘QuickSightEmbed’ is the role that application assumes on user’s behalf. Combination of the IAM role name and role session name determines how the user is registered in AWS Quick Sight.

If no result is returned, you can perform a just-in-time provisioning of the user using the command below. You can also use this pattern to pre-provision users in AWS Quick Sight ahead of time. With AWS Quick Sight’s Pay-per-Session mode, you can provision thousands of users. You get charged only when they access AWS Quick Sight.

aws quicksight register-user --aws-account-id 111122223333 --namespace default --identity-type IAM --iam-arn "arn:aws:iam::111122223333:role/QuickSightEmbed" --user-role READER --session-name tom.smith@example.com --email tom.smith@example.com

On the first access, you can also add this user to an AWS Quick Sight group with which the dashboard has been shared.

aws quicksight create-group-membership --aws-account-id=111122223333 --namespace=default --group-name=financeusers --member-name='QuickSightEmbed/tom.smith@example.com'

Next you can assume the IAM role created in Step 2 (QuickSightEmbed) on the user’s behalf by passing the session name of the user. Use the same session name (tom.smith@example.com) used while provisioning the in the previous step. The following shows an AWS CLI command that can achieve this:

aws sts assume-role --role-arn "arn:aws:iam::111122223333:role/QuickSightEmbed" --role-session-name tom.smith@example.com

The assume role API returns 3 parameters: access key, secret key and session token. You need to set these three parameters into your CLI:

export AWS_ACCESS_KEY_ID="access_key_from_assume_role"
export AWS_SECRET_ACCESS_KEY="secret_key_from_assume_role "
export AWS_SESSION_TOKEN="session_token_from_assume_role"

If you are using a windows PC, you can do the same using the commands below:

set AWS_ACCESS_KEY_ID="access_key_from_assume_role"
set AWS_SECRET_ACCESS_KEY="secret_key_from_assume_role "
set AWS_SESSION_TOKEN="session_token_from_assume_role"

Running this command sets the role session ID of the user visiting your website to “QuickSightEmbed/tom.smith@example.com.” This is also the user name in AWS Quick Sight.

aws quicksight generate-embed-url-for-registered-user 
    --aws-account-id 111122223333 
    --allowed-domains '["https://example.com", "https://www.example.com"]' 
    --experience-configuration 'Dashboard={InitialDashboardId=26a7dcad-7831-4266-9f75-ffd9265aa335}' 
    --session-lifetime-in-minutes 60 
    --region us-east-1 
    --user-arn "arn:aws:quicksight:us-east-1:111122223333:user/default/QuickSightEmbed /tom.smith@example.com"

You can download the AWS Quick Sight JavaScript SDK here. Use it to place the signed URL obtained in Step 3 in your application page. The SDK lets you place the dashboard on an HTML page, pass parameters into the dashboard and also handle error states with messages that are customized to your application.

<!DOCTYPE html>
<html>
<head>
    <title>QuickSight Dashboard</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
</head>
<body>
    <div id="dashboardContainer" style="width: 100%; height: 600px;"></div>
    
    <script>
        const embedDashboard = async () => {
            const { createEmbeddingContext } = QuickSightEmbedding;
            
            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Dashboard changed:', changeEvent);
                },
            });

            const frameOptions = {
                url: "<signed URL from Step 3>",
                container: document.getElementById("dashboardContainer"),
                scrolling: "no",
                height: "600px",
                width: "100%"
            };

            const dashboard = await embeddingContext.embedDashboard(frameOptions);
        };

        embedDashboard();
    </script>
</body>
</html>

The CLI commands referenced above are part of the AWS SDK. You can achieve the same result with all AWS SDK supported languages. For more information, see Tools for Amazon Web Services. 

These four steps walk through the steps involved in embedding AWS Quick Sight dashboards in your application pages. When you integrate AWS Quick Sight dashboards in your application, you will repeat this sequence of steps for every user coming into the system, so that each user has a unique identity that has the right permissions to the dashboard, and can be shown the right data.

The flow of steps when a user requests an application page with an embedded dashboard is captured below.

AWS Quick Sight also allows embedding dashboards for unauthenticated users. This option requires session packs with capacity pricing.

Let’s now take a quick look at how you can embed a dashboard for unauthenticated users in your application. The following four steps describe how to embed a dashboard.

Step 1: In AWS Quick Sight, create your dashboards and whitelist your domains

This step is same as Step 1 for embedding dashboards for registered users.

Step 2: In your AWS account, set up permissions for embedded viewers

Each user who accesses a dashboard assumes a role that gives them AWS Quick Sight access and permissions to the dashboard. To make this possible, create an IAM role in your AWS account. Associate an IAM policy with the role to provide permissions to any user who assumes it. Following is the sample policy:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Effect": "Allow",
        "Action": [
            "quicksight:GenerateEmbedUrlForAnonymousUser"
        ],
        "Resource": [
            "arn:{{partition}}:quicksight:{{region}}:{{accountId}}:namespace/{{namespace}}",
            "arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-1}}",
            "arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-2}}"
        ],
        "Condition": {
            "ForAllValues:StringEquals": {
                "quicksight:AllowedEmbeddingDomains": [
                    "https://my.static.domain1.com",
                    "https://*.my.static.domain2.com"
                ]
        }
    }
}

The application’s IAM identity must have a trust policy associated with it to allow access to the role that you just created. This means that when a user accesses your application, your application can assume the role on the user’s behalf to open the dashboard. The following example shows a sample trust policy.

{
    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Action": "sts:AssumeRole",
        "Resource": "arn:aws:iam::111122223333:role/QuickSightEmbeddingAnonymousPolicy"
    }
}

Step 3: On your application server, get the embedded dashboard URL

You can assume the IAM role created in Step 2 (QuickSightEmbed) on the user’s behalf by passing the role ARN.

The following shows an AWS CLI command that can achieve this:

aws sts assume-role --role-arn "arn:aws:iam::111122223333:role/QuickSightEmbeddingAnonymousPolicy" --role-session-name anonymous caller

The assume role API returns 3 parameters: access key, secret key and session token. You need to set these three parameters into your CLI:

export AWS_ACCESS_KEY_ID="access_key_from_assume_role"
export AWS_SECRET_ACCESS_KEY="secret_key_from_assume_role "
export AWS_SESSION_TOKEN="session_token_from_assume_role"

If you are using a windows PC, you can do the same using the commands below:

set AWS_ACCESS_KEY_ID="access_key_from_assume_role"
set AWS_SECRET_ACCESS_KEY="secret_key_from_assume_role "
set AWS_SESSION_TOKEN="session_token_from_assume_role"

Running this command sets the role session ID of the user visiting your website to “embedding_quicksight_dashboard_role/QuickSightEmbeddingAnonymousPolicy”. The role session ID is made up of the role name from role-arn and the role-session-name value.

To get a signed URL for the dashboard, call generate-embed-url-for-anonymous-user from the app server. The following example shows how to generate the URL:

aws quicksight generate-embed-url-for-anonymous-user 
    --aws-account-id 111122223333 
    --namespace default-or-something-else 
    --session-lifetime-in-minutes 15 
    --authorized-resource-arns '["dashboard-arn-1","dashboard-arn-2"]' 
    --allowed-domains '["domain1","domain2"]' --session-tags '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]' 
    --experience-configuration 'DashboardVisual={InitialDashboardVisualId={DashboardId=dashboard_id,SheetId=sheet_id,VisualId=visual_id}}'

Step 4: On your application page, use the AWS Quick Sight JavaScript SDK to embed the dashboard

You can download the AWS Quick Sight JavaScript SDK here. Use it to place the signed URL obtained in Step 3 in your application page. The SDK lets you place the dashboard on an HTML page, pass parameters into the dashboard and also handle error states with messages that are customized to your application.

<!DOCTYPE html>
<html>
<head>
    <title>QuickSight Dashboard</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
</head>
<body>
    <div id="dashboardContainer" style="width: 100%; height: 600px;"></div>
    
    <script>
        const embedDashboard = async () => {
            const { createEmbeddingContext } = QuickSightEmbedding;
            
            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Dashboard changed:', changeEvent);
                },
            });

            const frameOptions = {
                url: "<signed URL from Step 3>",
                container: document.getElementById("dashboardContainer"),
                scrolling: "no",
                height: "600px",
                width: "100%"
            };

            const dashboard = await embeddingContext.embedDashboard(frameOptions);
        };

        embedDashboard();
    </script>
</body>
</html>

We’ve added more capabilities to let you embed dashboards and more in your applications. Check out the new hands-on tutorial and more details in the blog post, Embed multi-tenant analytics in applications with AWS Quick Sight.

Additional Reading

If you found this post useful, be sure to check out Create AWS Quick Sight dashboards that have impact with parameters, on-screen controls, and URL actions, and Advanced analytics with table calculations in AWS Quick Sight.

To go further, you can visit Visualizing Amazon SageMaker machine learning predictions with AWS Quick Sight and learn and you can integrate Amazon SageMaker ML models with Quick Sight to analyze the augmented data and use it directly in your business intelligence dashboards.

About the Authors

Retina Satish is a Solutions Architect at AWS, bringing her expertise in data analytics and generative AI. She collaborates with customers to understand business challenges and architect innovative, data-driven solutions using cutting-edge technologies. She is dedicated to delivering secure, scalable, and cost-effective solutions that drive digital transformation.

Debaprasun Chakraborty is an AWS Solutions Architect, specializing in the analytics domain. He has around 20 years of software development and architecture experience. He is passionate about helping customers in cloud adoption, migration and strategy.

Jose Kunnackal is a principal product manager for AWS Quick Sight.