Read our blog for the latest insights on sales and marketing Take Me There

Webinar: Reduce Time & Automate Anything in Sugar with Custom Buttons Register

Webinar: Use Sugar Data to Easily Generate Complex Documents Register

Webinar: Advanced Calendar Solution for Sugar Register

Embed Interactive Dashboards in Your Application With Amazon QuickSight

by Jose Kunnackal on November 27, 2018

8 minute read

Starting today, you can embed Amazon QuickSight dashboards in your applications. This means you can now quickly and efficiently enhance your applications with rich interactive data visualizations and analytics capabilities without any custom development. You won’t require specialized expertise on your team to develop, maintain, and evolving the analytics components for your applications, nor manage and scale your analytics servers and infrastructure with your applications’ popularity. This saves you time and money and lets you focus on your core application functionality!

Embedded Amazon QuickSight dashboards allow you to utilize Amazon QuickSight’s serverless architecture and easily scale your insights with your growing user base, while ensuring you only pay for usage with Amazon QuickSight’s unique pay-per-session pricing model. Viewers of embedded dashboards are authenticated via Federated Single Sign-On (SAML, OpenID Connect or AWS IAM Federation). This means that every user receives a secure, personalized dashboard while requiring no user-facing QuickSight-specific authentication. Dashboard embedding is available in Amazon QuickSight Enterprise Edition in all supported regions.

To facilitate an easy embedding experience, AWS is also launching the Amazon QuickSight JavaScript SDK, and the first set of Amazon QuickSight API operations. The Amazon QuickSight JavaScript SDK lets you efficiently integrate Amazon QuickSight 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 Amazon QuickSight to your users faster, and makes it easier to manage Amazon QuickSight 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. The following four steps describe how to embed a dashboard.

Step 1: In Amazon QuickSight, Create Your Dashboards and Whitelist Your Domains

In this step, you create the dashboards in Amazon QuickSight 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 Amazon QuickSight 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 Amazon QuickSight account.

When you publish a dashboard, there is a new option which 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.

Publish Amazon QuickSight dashboard

To avoid unauthorized embedding of dashboards from your account, an administrator in your account must explicitly enable domains where your Amazon QuickSight dashboards are embedded. This is done by using the Manage QuickSight option that is available to all administrators. All domains in use (dev/staging/production) must be whitelisted and must use https.

Manage Domains for Amazon QuickSight embedded dashboards

Step 2: In Your AWS Account, Set Up Permissions for Embedded Viewers

To provision users of your application as members of your Amazon QuickSight account, create an AWS Identity and Access Management (IAM) role that a user can assume. This role should grant the visitor permissions to:

  • Become a reader in the Amazon QuickSight account (quicksight:RegisterUser).
  • Retrieve the specific embedded dashboards (quicksight:GetDashboardEmbedUrl).

The following is a sample policy with these permissions:

    "Version": "2012-10-17",
    "Statement": [
            "Action": "quicksight:RegisterUser",
            "Resource": "*",
            "Effect": "Allow"
            "Action": "quicksight:GetDashboardEmbedUrl",
            "Resource": "arn:aws:quicksight:us-west-2:293424211206:dashboard/26a7dcad-7831-4266-9f75-ffd9265aa335",
            "Effect": "Allow"

Your application’s IAM identity must have a trust policy associated with it to allow access 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 Amazon QuickSight account. The following example shows QuickSightEmbed as the role that has the previous policy associated with it. More details are available regarding trust policies for OpenID Connector SAML authentication.

    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Action": "sts:AssumeRole",
        "Resource": "arn:aws:iam::293424211206: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 assume the IAM role created in Step 2 (for example, QuickSightEmbed) on the user’s behalf, and provision the user in the Amazon QuickSight account. To ensure that each user of the application is uniquely provisioned in Amazon QuickSight and has permissions (row level security) or defaults (dynamic defaults for parameters) enforced, you must pass an identifier, such as a user name or email address, as the role session name.

The following shows an AWS CLI command that achieves this:

aws sts assume-role --role-arn "arn:aws:iam::293424211206:role/QuickSightEmbed" --role-session-name

The assume role API returns back 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/” This is also the user name in Amazon QuickSight.

You can use this pattern to provision your users in Amazon QuickSight ahead of time, or provision as they come in the first time. With Amazon QuickSight’s Pay-per-Session mode, you can provision thousands of users. You get charged only when they access Amazon QuickSight. The following is an AWS Command Line Interface (AWS CLI) command that can be used to provision a user.

aws quicksight register-user --aws-account-id 293424211206 --namespace default --identity-type IAM --iam-arn "arn:aws:iam::293424211206:role/QuickSightEmbed" --user-role READER --session-name --email

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

aws quicksight create-group-membership --aws-account-id=293424211206 --namespace=default --group-name=financeusers --member-name=”QuickSightEmbed/”

You now have a user of your application who is also a Amazon QuickSight user and has access to the dashboard. For the last part of Step 3, call the get-dashboard-embed-url to get a signed URL for the dashboard that can be embedded.

aws quicksight get-dashboard-embed-url --aws-account-id 293424211206 --dashboard-id 26a7dcad-7831-4266-9f75-ffd9265aa335 --identity-type IAM

Step 4: On your application page, use the Amazon QuickSight JavaScript SDK to embed the dashboard

You can download the Amazon QuickSight 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.

function embedDashboard() {
                var containerDiv=document.getElementById("dashboardContainer");
                var options={
                    url: "",
                    container: containerDiv,
                    parameters: {
                        country: 'United States'
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                dashboard.on('error', onError);
                dashboard.on('load', onDashboardLoad);

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 Amazon QuickSight dashboards in your application pages. When you integrate Amazon QuickSight dashboards in your application, you will repeat this sequence of steps for every user coming into the system, so that each has a unique identity that has the right permissions to the dashboard, and can be shown the right data.

Amazon QuickSight embedded dashboards

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

Amazon QuickSight embedding dashboards flow

Lastly, to make it easier to get up and running with embedding, see a sample that includes a Cognito-based user store. This can be found here.

This article originally appeared on the AWS Blog

Subscribe to our newsletter

Select the topics that interest you:
Sign up and stay updated on new W-Systems content and announcements. Read our privacy policy.