为匿名（未注册）用户嵌入 Amazon QuickSight Q 搜索栏

目标受众：Amazon QuickSight 开发人员

注意

嵌入式 QuickSight Q 搜索栏提供经典的 QuickSight 问答体验。QuickSight 与 Amazon Q 企业版集成，推出全新的生成式问答体验。建议开发人员使用全新的生成式问答体验。有关嵌入生成式问答体验的更多信息，请参阅嵌入 QuickSight 中的 Amazon Q 生成式问答体验。

在以下各节中，您可以了解有关如何为匿名（未注册）用户设置嵌入式 Amazon QuickSight Q 搜索栏的详细信息。

主题

步骤 1：设置权限
步骤 2：生成附带身份验证代码的 URL
步骤 3：嵌入 Q 搜索栏 URL
可选的 Amazon QuickSight Q 搜索栏嵌入功能

步骤 1：设置权限

注意

在以下部分中，您可以了解如何设置后端应用程序或 Web 服务器的权限来嵌入 Q 搜索栏。该任务需要具有 AWS Identity and Access Management（IAM）的管理访问权限。

访问 Q 搜索栏的每个用户均代入一个角色，该角色向其授予 Amazon QuickSight 访问权限和 Q 搜索栏权限。要实现该目的，请在您的 AWS 账户中创建一个 IAM 角色。将一个 IAM policy 与该角色相关联，以便为担任该角色的任何用户提供权限。IAM 角色需要提供权限才能检索特定用户群体的嵌入 URL。

借助通配符 *，您可以授予为特定命名空间中的所有用户生成 URL 的权限。您也可以授予为特定命名空间中的一部分用户生成 URL 的权限。为此，请添加 quicksight:GenerateEmbedUrlForAnonymousUser。

您可以在 IAM policy 中创建一个条件，限制开发人员可以在 GenerateEmbedUrlForAnonymousUser API 操作的 AllowedDomains 参数中列出的域。AllowedDomains 参数是可选参数。它允许开发人员覆盖在管理 QuickSight 菜单中配置的静态域，并最多可以列出三个可以访问生成的 URL 的域或子域。然后，此 URL 会嵌入开发人员的网站。只有参数中列出的域才能访问嵌入式 Q 搜索栏。如果没有此条件，开发人员可以在 AllowedDomains 参数中列出互联网上的任何域。

要限制开发人员可用于此参数的域，请在 IAM policy 中添加一个 AllowedEmbeddingDomains 条件。有关 AllowedDomains 参数的更多信息，请参阅《Amazon QuickSight API Reference》中的 GenerateEmbedUrlForAnonymousUser。

以下示例策略提供了这些权限。


{
    "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"
                    ]
            }
        }
}

您应用程序的 IAM 身份必须具有关联的信任策略，才允许访问您刚创建的角色。这意味着，在用户访问您的应用程序时，您的应用程序可以代表用户代入该角色，以打开 Q 搜索栏。下面演示了一个示例信任策略。


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowLambdaFunctionsToAssumeThisRole",
            "Effect": "Allow",
            "Principal": {
                "Service": "lambda.amazonaws.com"
            },
            "Action": "sts:AssumeRole"
        },
        {
            "Sid": "AllowEC2InstancesToAssumeThisRole",
            "Effect": "Allow",
            "Principal": {
                "Service": "ec2.amazonaws.com"
            },
            "Action": "sts:AssumeRole"
        }
    ]
}

有关信任策略的更多信息，请参阅《IAM 用户指南》中的 IAM 临时安全凭证

步骤 2：生成附带身份验证代码的 URL

注意

在下节中，您可以了解如何对用户进行身份验证，并获取应用程序服务器上的可嵌入 Q 主题 URL。

用户访问您的应用程序时，该应用程序代表用户代入 IAM 角色。然后，应用程序会将用户添加到 QuickSight 中（如果该用户尚不存在）。接下来，其会将标识符作为唯一角色会话 ID 进行传递。

有关更多信息，请参阅 AnonymousUserQSearchBarEmbeddingConfiguration。


        import java.util.List;
        import com.amazonaws.auth.AWSCredentials;
        import com.amazonaws.auth.AWSCredentialsProvider;
        import com.amazonaws.auth.BasicAWSCredentials;
        import com.amazonaws.regions.Regions;
        import com.amazonaws.services.quicksight.AmazonQuickSight;
        import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
        import com.amazonaws.services.quicksight.model.AnonymousUserQSearchBarEmbeddingConfiguration;
        import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
        import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
        import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
        import com.amazonaws.services.quicksight.model.SessionTag;


        /**
        * Class to call QuickSight AWS SDK to generate embed url for anonymous user.
        */
        public class GenerateEmbedUrlForAnonymousUserExample {

            private final AmazonQuickSight quickSightClient;

            public GenerateEmbedUrlForAnonymousUserExample() {
                quickSightClient = AmazonQuickSightClientBuilder
                    .standard()
                    .withRegion(Regions.US_EAST_1.getName())
                    .withCredentials(new AWSCredentialsProvider() {
                            @Override
                            public AWSCredentials getCredentials() {
                                // provide actual IAM access key and secret key here
                                return new BasicAWSCredentials("access-key", "secret-key");
                            }

                            @Override
                            public void refresh() {
                            }
                        }
                    )
                    .build();
            }

            public String GenerateEmbedUrlForAnonymousUser(
                final String accountId, // YOUR AWS ACCOUNT ID
                final String initialTopicId, // Q TOPIC ID TO WHICH THE CONSTRUCTED URL POINTS AND SEARCHBAR PREPOPULATES INITIALLY
                final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL
                final List<String> authorizedResourceArns, // Q SEARCHBAR TOPIC ARN LIST TO EMBED
                final List<String> allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
                final List<SessionTag> sessionTags // SESSION TAGS USED FOR ROW-LEVEL SECURITY
            ) throws Exception {
                AnonymousUserEmbeddingExperienceConfiguration experienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration();
                AnonymousUserQSearchBarEmbeddingConfiguration qSearchBarConfiguration = new AnonymousUserQSearchBarEmbeddingConfiguration();
                qSearchBarConfiguration.setInitialTopicId(initialTopicId);
                experienceConfiguration.setQSearchBar(qSearchBarConfiguration);

                GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest = new GenerateEmbedUrlForAnonymousUserRequest()
                    .withAwsAccountId(accountId)
                    .withNamespace(namespace)
                    .withAuthorizedResourceArns(authorizedResourceArns)
                    .withExperienceConfiguration(experienceConfiguration)
                    .withSessionTags(sessionTags)
                    .withSessionLifetimeInMinutes(600L); // OPTIONAL: VALUE CAN BE [15-600]. DEFAULT: 600
                    .withAllowedDomains(allowedDomains);

                GenerateEmbedUrlForAnonymousUserResult qSearchBarEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);

                return qSearchBarEmbedUrl.getEmbedUrl();
            }

        }


global.fetch = require('node-fetch');
const AWS = require('aws-sdk');

function generateEmbedUrlForAnonymousUser(
    accountId, // YOUR AWS ACCOUNT ID
    initialTopicId, // Q TOPIC ID TO WHICH THE CONSTRUCTED URL POINTS
    quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
    authorizedResourceArns, // Q SEARCHBAR TOPIC ARN LIST TO EMBED
    allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
    sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY
    generateEmbedUrlForAnonymousUserCallback, // SUCCESS CALLBACK METHOD
    errorCallback // ERROR CALLBACK METHOD
    ) {
    const experienceConfiguration = {
        "QSearchBar": {
            "InitialTopicId": initialTopicId // TOPIC ID CAN BE FOUND IN THE URL ON THE TOPIC AUTHOR PAGE
        }
    };
    
    const generateEmbedUrlForAnonymousUserParams = {
        "AwsAccountId": accountId,
        "Namespace": quicksightNamespace,
        "AuthorizedResourceArns": authorizedResourceArns,
        "AllowedDomains": allowedDomains,
        "ExperienceConfiguration": experienceConfiguration,
        "SessionTags": sessionTags,
        "SessionLifetimeInMinutes": 600
    };

    const quicksightClient = new AWS.QuickSight({
        region: process.env.AWS_REGION,
        credentials: {
            accessKeyId: AccessKeyId,
            secretAccessKey: SecretAccessKey,
            sessionToken: SessionToken,
            expiration: Expiration
        }
    });

    quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) {
        if (err) {
            console.log(err, err.stack);
            errorCallback(err);
        } else {
            const result = {
                "statusCode": 200,
                "headers": {
                    "Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API
                    "Access-Control-Allow-Headers": "Content-Type"
                },
                "body": JSON.stringify(data),
                "isBase64Encoded": false
            }
            generateEmbedUrlForAnonymousUserCallback(result);
        }
    });
}


import json
import boto3
from botocore.exceptions import ClientError
import time

# Create QuickSight and STS clients
quicksightClient = boto3.client('quicksight',region_name='us-west-2')
sts = boto3.client('sts')

# Function to generate embedded URL for anonymous user
# accountId: YOUR AWS ACCOUNT ID
# quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
# authorizedResourceArns: TOPIC ARN LIST TO EMBED
# allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING
# experienceConfiguration: configuration which specifies the TOPIC ID to point URL to
# sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY
def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, experienceConfiguration, sessionTags):
    try:
        response = quicksightClient.generate_embed_url_for_anonymous_user(
            AwsAccountId = accountId,
            Namespace = quicksightNamespace,
            AuthorizedResourceArns = authorizedResourceArns,
            AllowedDomains = allowedDomains,
            ExperienceConfiguration = experienceConfiguration,
            SessionTags = sessionTags,
            SessionLifetimeInMinutes = 600
        )
            
        return {
            'statusCode': 200,
            'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
            'body': json.dumps(response),
            'isBase64Encoded':  bool('false')
        }
    except ClientError as e:
        print(e)
        return "Error generating embeddedURL: " + str(e)

以下示例演示了可以在应用程序服务器上使用以生成嵌入式控制面板 URL 的 JavaScript（Node.js）。您可以在网站或应用程序中使用该 URL 以显示控制面板。


const AWS = require('aws-sdk');
const https = require('https');

var quicksightClient = new AWS.Service({
    apiConfig: require('./quicksight-2018-04-01.min.json'),
    region: 'us-east-1',
});

quicksightClient.generateEmbedUrlForAnonymousUser({
    'AwsAccountId': '111122223333',
    'Namespace': 'DEFAULT'
    'AuthorizedResourceArns': '["topic-arn-topicId1","topic-arn-topicId2"]',
    'AllowedDomains': allowedDomains,
    'ExperienceConfiguration': { 
        'QSearchBar': {
            'InitialTopicId': 'U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f'
        }
    },
    'SessionTags': '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]',
    'SessionLifetimeInMinutes': 15
}, function(err, data) {
    console.log('Errors: ');
    console.log(err);
    console.log('Response: ');
    console.log(data);
});


//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
    { 
        Status: 200,
        EmbedUrl : 'https://quicksightdomain/embed/12345/dashboards/67890/sheets/12345/visuals/67890...',
        RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' 
    }

以下示例演示了可以在应用程序服务器上使用以生成嵌入式 Q 搜索栏 URL 的 .NET/C# 代码。您可以在网站或应用程序中使用此 URL 以显示 Q 搜索栏。


using System;
using Amazon.QuickSight;
using Amazon.QuickSight.Model;

namespace GenerateQSearchBarEmbedUrlForAnonymousUser
{
    class Program
    {
        static void Main(string[] args)
        {
            var quicksightClient = new AmazonQuickSightClient(
                AccessKey,
                SecretAccessKey,
                SessionToken,
                Amazon.RegionEndpoint.USEast1);
            try
            {
                AnonymousUserQSearchBarEmbeddingConfiguration anonymousUserQSearchBarEmbeddingConfiguration
                    = new AnonymousUserQSearchBarEmbeddingConfiguration
                    {
                        InitialTopicId = "U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f"
                    };
                AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
                    = new AnonymousUserEmbeddingExperienceConfiguration
                    {
                        QSearchBar = anonymousUserQSearchBarEmbeddingConfiguration
                    }; 
                
                Console.WriteLine(
                    quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
                    {
                        AwsAccountId = "111122223333",
                        Namespace = "DEFAULT",
                        AuthorizedResourceArns '["topic-arn-topicId1","topic-arn-topicId2"]',
                        AllowedDomains = allowedDomains,
                        ExperienceConfiguration = anonymousUserEmbeddingExperienceConfiguration,
                        SessionTags = '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]',
                        SessionLifetimeInMinutes = 15,
                    }).Result.EmbedUrl
                );
            } catch (Exception ex) {
                Console.WriteLine(ex.Message);
            }
        }
    }
}

要担任该角色，请选择以下 AWS Security Token Service (AWS STS) API 操作之一：

AssumeRole – 在使用 IAM 身份代入角色时使用该操作。
AssumeRoleWithWebIdentity – 在使用 Web 身份提供者对用户进行身份验证时使用该操作。
AssumeRoleWithSaml – 在使用 SAML 对用户进行身份验证时使用此操作。

以下示例显示了用于设置 IAM 角色的 CLI 命令。该角色需要为 quicksight:GenerateEmbedUrlForAnonymousUser 启用权限。


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

assume-role 操作返回三个输出参数：访问密钥、私有密钥和会话令牌。

注意

如果在调用 AssumeRole 操作时遇到 ExpiredToken 错误，可能是因为之前的 SESSION TOKEN 仍在环境变量中。通过设置以下变量可以解决这一问题：

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_SESSION_TOKEN

以下示例说明了如何在 CLI 中设置这三个参数。对于 Microsoft Windows 计算机，请使用 set 而不是 export。


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"

如果运行这些命令，则会将访问您的网站的用户的角色会话 ID 设置为 embedding_quicksight_q_search_bar_role/QuickSightEmbeddingAnonymousPolicy。角色会话 ID 由 role-arn 中的角色名称和 role-session-name 值组成。每个用户使用唯一的角色会话 ID 可以确保为每个用户设置相应的权限。此外，它还能避免任何用户访问限制。节流是一项安全功能，可防止同一用户从多个位置访问 QuickSight。它还能使每个会话保持独立和独特。如果您使用一组 Web 服务器（例如用于负载平衡），并且会话重新连接到其他服务器，则会开始新的会话。

要获取控制面板的签名 URL，请从应用程序服务器中调用 generate-embed-url-for-anynymous-user。这会返回可嵌入的控制面板 URL。以下示例演示了如何使用服务器端调用为匿名访问您 Web 门户或应用程序的用户生成嵌入式控制面板的 URL。


aws quicksight generate-embed-url-for-anonymous-user \
--aws-account-id 111122223333 \
--namespace default-or-something-else \
--authorized-resource-arns '["topic-arn-topicId1","topic-arn-topicId2"]' \
--allowed-domains '["domain1","domain2"]' \
--experience-configuration 'QSearchBar={InitialTopicId="topicId1"}' \
--session-tags '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]' \
--session-lifetime-in-minutes 15

有关使用此操作的更多信息，请参阅 GenerateEmbedUrlForRegisteredUser。您可以在自己的代码中使用该 API 操作和其他操作。

步骤 3：嵌入 Q 搜索栏 URL

注意

在以下部分中，您可以了解如何将步骤 3 中的 Q 搜索栏 URL 嵌入网站或应用程序页面。您可以通过 Amazon QuickSight Embedding SDK（JavaScript）完成此操作。通过使用该开发工具包，您可以执行以下操作：

将 Q 搜索栏放置到 HTML 页面上。
将参数传递到 Q 搜索栏。
使用为应用程序自定义的消息处理错误状态。

要生成可嵌入应用程序的 URL，请调用 GenerateEmbedUrlForAnonymousUser API 操作。该 URL 的有效时间为 5 分钟，生成的会话有效时间为 10 个小时。该 API 操作为 URL 提供 auth_code 值以启用单点登录会话。

下面显示了 generate-embed-url-for-anonymous-user 的示例响应：


//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
{
     "Status": "200",
     "EmbedUrl": "https://quicksightdomain/embedding/12345/q/search...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

通过使用 QuickSight Embedding SDK 或将该 URL 添加到 iframe 中，将 Q 搜索栏嵌入网页。如果设置了固定高度和宽度数字（以像素为单位），QuickSight 将使用这些数字，并且在调整窗口大小时不会更改视觉对象。如果设置了相对百分比高度和宽度，QuickSight 将提供随窗口大小变化而修改的响应式布局。

为此，请确保托管嵌入式 Q 搜索栏的域位于允许列表中，即您的 QuickSight 订阅批准的域的列表。这一要求可阻止未经批准的域托管嵌入式 Q 搜索栏，从而保护您的数据。有关为嵌入式 Q 搜索栏添加域的更多信息，请参阅管理域和嵌入。

当您使用 QuickSight Embedding SDK 时，页面上的 Q 搜索栏会根据状态进行动态调整大小。通过使用 QuickSight Embedding SDK，您还可以控制 Q 搜索栏中的参数，并在页面加载完成和出现错误时收到回调。

以下示例演示了如何使用生成的 URL。此代码在您的应用程序服务器上生成。


<!DOCTYPE html>
<html>

    <head>
        <title>Q Search Bar Embedding Example</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            const embedQSearchBar = async() => {    
                const {
                    createEmbeddingContext,
                } = QuickSightEmbedding;

                const embeddingContext = await createEmbeddingContext({
                    onChange: (changeEvent, metadata) => {
                        console.log('Context received a change', changeEvent, metadata);
                    },
                });

                const frameOptions = {
                    url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                    container: '#experience-container',
                    height: "700px",
                    width: "1000px",
                    onChange: (changeEvent, metadata) => {
                        switch (changeEvent.eventName) {
                            case 'FRAME_MOUNTED': {
                                console.log("Do something when the experience frame is mounted.");
                                break;
                            }
                            case 'FRAME_LOADED': {
                                console.log("Do something when the experience frame is loaded.");
                                break;
                            }
                        }
                    },
                };

                const contentOptions = {
                    hideTopicName: false, 
                    theme: '<YOUR_THEME_ID>',
                    allowTopicSelection: true,
                    onMessage: async (messageEvent, experienceMetadata) => {
                        switch (messageEvent.eventName) {
                            case 'Q_SEARCH_OPENED': {
                                console.log("Do something when Q Search content expanded");
                                break;
                            }
                            case 'Q_SEARCH_CLOSED': {
                                console.log("Do something when Q Search content collapsed");
                                break;
                            }
                            case 'Q_SEARCH_SIZE_CHANGED': {
                                console.log("Do something when Q Search size changed");
                                break;
                            }
                            case 'CONTENT_LOADED': {
                                console.log("Do something when the Q Search is loaded.");
                                break;
                            }
                            case 'ERROR_OCCURRED': {
                                console.log("Do something when the Q Search fails loading.");
                                break;
                            }
                        }
                    }
                };
                const embeddedDashboardExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
            };
        </script>
    </head>

    <body onload="embedQSearchBar()">
        <div id="experience-container"></div>
    </body>

</html>


<!DOCTYPE html>
<html>

    <head>
        <title>QuickSight Q Search Bar Embedding</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.18.0/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            var session

            function onError(payload) {
                console.log("Do something when the session fails loading");
            }

            function onOpen() {
                console.log("Do something when the Q search bar opens");
            }

            function onClose() {
                console.log("Do something when the Q search bar closes");
            }

            function embedQSearchBar() {
                var containerDiv = document.getElementById("embeddingContainer");
                var options = {
                    url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode", // replace this dummy url with the one generated via embedding API
                    container: containerDiv,
                    width: "1000px",
                    locale: "en-US",
                    qSearchBarOptions: {
                        expandCallback: onOpen,
                        collapseCallback: onClose,
                        iconDisabled: false,
                        topicNameDisabled: false, 
                        themeId: 'bdb844d0-0fe9-4d9d-b520-0fe602d93639',
                        allowTopicSelection: true
                    }
                };
                session = QuickSightEmbedding.embedQSearchBar(options);
                session.on("error", onError);
            }

            function onCountryChange(obj) {
                session.setParameters({country: obj.value});
            }
        </script>
    </head>

    <body onload="embedQSearchBar()">
        <div id="embeddingContainer"></div>
    </body>

</html>

要使此示例起作用，请确保使用 Amazon QuickSight Embedding SDK 在网站上用 JavaScript 加载嵌入式 Q 搜索栏。要获取副本，请执行下列操作之一：

从 GitHub 下载 Amazon QuickSight Embedding SDK。此存储库由一组 QuickSight 开发人员维护。
从 https://www.npmjs.com/package/amazon-quicksight-embedding-sdk 下载最新版本的嵌入开发工具包。
如果将 npm 用于 JavaScript 依赖项，请通过运行以下命令下载并安装。
```
npm install amazon-quicksight-embedding-sdk
```

可选的 Amazon QuickSight Q 搜索栏嵌入功能

注意

以下可选功能可用于使用嵌入开发工具包的嵌入式 Q 搜索栏。

调用 Q 搜索栏操作

以下选项仅支持嵌入 Q 搜索栏。

设置 Q 搜索栏问题 – 此功能将问题发送到 Q 搜索栏并立即查询问题。它还可以自动打开 Q 弹出框。
```
qBar.setQBarQuestion('show me monthly revenue');
```
关闭 Q 弹出框 – 此功能将关闭 Q 弹出框并将 iframe 返回到原始 Q 搜索栏大小。
```
qBar.closeQPopover();
```

有关更多信息，请参阅 QuickSight Embedding SDK。

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

文档惯例

为注册用户嵌入 Q 搜索栏

其他嵌入 API 操作