Services or capabilities described in Amazon Web Services documentation might vary by Region. To see the differences applicable to the China Regions,
see Getting Started with Amazon Web Services in China
(PDF).
Step 3: Embed
the visual URL
In the following section, you can find out how you can use the Amazon QuickSight Embedding
SDK (JavaScript) to embed the visual URL from step 3 in your website or application
page. With the SDK, you can do the following:
-
Place the visual on an HTML page.
-
Pass parameters into the visual.
-
Handle error states with messages that are customized to your application.
Call the GenerateEmbedUrlForRegisteredUser
API operation to generate the URL that you can embed
in your app. 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
that enables a single-sign
on session.
The following shows an example response from generate-embed-url-for-registered-user
. The quicksightdomain
in this example is the URL that you use to access your QuickSight account.
//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"
}
Embed this visual in your webpage by using the QuickSight Embedding SDK or
by adding this URL into an iframe. If you set a fixed height and width number (in pixels),
QuickSight uses those and doesn't change your visual as your window resizes. If you set a
relative percent height and width, QuickSight provides a responsive layout that is modified as
your window size changes. By using the Amazon QuickSight Embedding SDK, you can also control parameters
within the visual and receive callbacks in terms of page load completion and errors.
The domain that is going to host embedded visuals and dashboards must be on
the allow list, the list of approved
domains for your Amazon QuickSight subscription. This requirement protects
your data by keeping unapproved domains from hosting embedded visuals and
dashboards. For more information about adding domains for embedded visuals
and dashboards, see Allow listing domains at runtime
with the QuickSight API.
The following example shows how to use the generated URL. This code is generated on your app
server.
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Visual 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 embedVisual = 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 = {
parameters: [
{
Name: 'country',
Values: ['United States'],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'CONTENT_LOADED': {
console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
break;
}
case 'ERROR_OCCURRED': {
console.log("Error occured while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
}
},
};
const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedVisualExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedVisual()">
<span>
<label for="country">Country</label>
<select id="country" name="country">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="experience-container"></div>
</body>
</html>
- SDK 1.0
-
<!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="./quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
let embeddedVisualExperience;
function onVisualLoad(payload) {
console.log("Do something when the visual is fully loaded.");
}
function onError(payload) {
console.log("Do something when the visual fails loading");
}
function embedVisual() {
const containerDiv = document.getElementById("embeddingContainer");
const options = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
height: "700px",
width: "1000px",
locale: "en-US"
};
embeddedVisualExperience = QuickSightEmbedding.embedVisual(options);
embeddedVisualExperience.on("error", onError);
embeddedVisualExperience.on("load", onVisualLoad);
}
function onCountryChange(obj) {
embeddedVisualExperience.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedVisual()">
<span>
<label for="country">Country</label>
<select id="country" name="country" onchange="onCountryChange(this)">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="embeddingContainer"></div>
</body>
</html>
For this example to work, make sure to use the Amazon QuickSight Embedding SDK to load the
embedded visual on your website using JavaScript. To get your copy, do one of the
following: