本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
步驟 3：內嵌 Q 搜尋列 URL
嵌入式 QuickSight Q 搜尋列提供經典的 QuickSight 問答體驗。 QuickSight 與 Amazon Q 商務版整合，以推出全新的生成式問答集體驗。建議開發人員使用新的生成問答體驗。如需嵌入式生成式 Q&A 體驗的詳細資訊，請參閱將 Amazon Q 嵌入 QuickSight 生成式問答體驗。
在下一章節，您可以了解如何將步驟 3 中的 Q 搜尋列 URL 內嵌到網站或應用程式頁面中。您可以使用 Amazon QuickSight 嵌入 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入 SDK 或將此 URL 添加到 iframe 中，將 Q 搜索欄嵌入到您的網頁中。如果您設置了固定的高度和寬度數字（以像素為單位），請 QuickSight 使用這些數字，並且在窗口調整大小時不會更改視覺效果。如果您設定了相對百分比高度和寬度，則會 QuickSight提供隨視窗大小變更而修改的自適應版面配置。
若要這麼做，請確定要託管內嵌 Q 搜尋列的網域位於允許清單中，也就是您 QuickSight 訂閱的核准網域清單中。這項要求將使未獲核准的域無法託管內嵌 Q 搜尋列，進而保護您的資料。如需為內嵌 Q 搜尋列新增域的詳細資訊，請參閱 管理域和內嵌。
當您使用 QuickSight 嵌入 SDK 時，會根據狀態動態調整頁面上的 Q 搜尋列大小。透過使用 QuickSight 嵌入 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 嵌入開發套件，在您的網站上使用載入內嵌式 Q 搜尋列 JavaScript。為獲得您的版本，請執行以下其中一項操作：
