步骤 3：嵌入 Q 搜索栏 URL - Amazon QuickSight
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

步骤 3：嵌入 Q 搜索栏 URL

注意

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

在以下部分中，您可以了解如何将步骤 3 中的 Q 搜索栏 URL 嵌入网站或应用程序页面。您可以使用 Amazon QuickSight 嵌入软件开发工具包 (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"
}

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

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

当你使用 Emb QuickSight edding SDK 时，页面上的 Q 搜索栏会根据状态动态调整大小。通过使用 Em QuickSight bedding SDK，您还可以控制 Q 搜索栏中的参数，并接收有关页面加载完成和错误的回调。

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

SDK 2.0
<!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>
SDK 1.0
<!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 将嵌入式 Q 搜索栏加载到您的网站上 JavaScript。要获取副本，请执行下列操作之一：