Step 3: Embed the Q search bar URL
Note
The embedded QuickSight Q search bar provides the classic QuickSight Q&A experience. QuickSight integrates with Amazon Q Business to launch a new Generative Q&A experience. Developers are recommended to use the new Generative Q&A experience. For more information on the embedded Generative Q&A experience, see Embed the Amazon Q in QuickSight Generative Q&A experience.
In the following section, you can find how to embed the Q search bar URL from step
3 in your website or application page. You do this with the Amazon QuickSight
embedding SDK
-
Place the Q search bar on an HTML page.
-
Pass parameters into the Q search bar.
-
Handle error states with messages that are customized to your application.
To generate the URL that you can embed in your app, call the
GenerateEmbedUrlForAnonymousUser
API operation. This URL is valid for
5 minutes, and the resulting session is valid for up to 10 hours. The API operation
provides the URL with an auth_code
value that enables a single-sign on
session.
The following shows an example response from 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" }
Embed the Q search bar in your webpage by using the QuickSight
embedding SDK
To do this, make sure that the domain to host the embedded Q search bar is on the allow list, the list of approved domains for your QuickSight subscription. This requirement protects your data by keeping unapproved domains from hosting embedded Q search bar. For more information about adding domains for an embedded Q search bar, see Managing domains and embedding.
When you use the QuickSight Embedding SDK, the Q search bar on your page is dynamically resized based on the state. By using the QuickSight Embedding SDK, you can also control parameters within the Q search bar and receive callbacks in terms of page load completion and errors.
The following example shows how to use the generated URL. This code is generated on your app server.
For this example to work, make sure to use the Amazon QuickSight Embedding SDK to load the embedded Q search bar on your website using JavaScript. To get your copy, do one of the following:
-
Download the Amazon QuickSight embedding SDK
from GitHub. This repository is maintained by a group of QuickSight developers. -
Download the latest embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
. -
If you use
npm
for JavaScript dependencies, download and install it by running the following command.npm install amazon-quicksight-embedding-sdk