Dashboard embedding¶
Serenytics dashboards can be embedded in your web application within an iFrame.
Embedding a public dashboard¶
To embed a public
dashboard, just insert the below code snippet in your code:
<iframe src="https://app.serenytics.com/viewer/webapps/59c447af-6059-4208-88e1-91c0c06fb677"
width="100%"
scrolling="no"
frameBorder="0"
id="my_dashboard"></iframe>
<script type="text/javascript" src="https://static.serenytics.com/js/iframeResizer.min.js"></script>
<script type="text/javascript">
$("#my_dashboard").iFrameResize({
heightCalculationMethod : 'grow'
});
</script>
Of course, you need to replace the URL used in this example with your dashboard URL. Note that you must use the viewer
URL of the dashboard (like app.serenytics.com/viewer/webapps/UUID
) and not the studio URL (like
app.serenytics.com/studio/webapps/UUID
).
Please, keep in mind that this embedding mode is not secure. Anyone can grab the dashboard URL from your website source code and send it to an unauthorized person.
The iFrameResizer module handles the iFrame resizing according to your dashboard size. Please, use the version hosted
by Serenytics to avoid compatibility issues (https://static.serenytics.com/js/iframeResizer.min.js
).
Embedding a private dashboard¶
For secure embedding, the sharing mode of the dashboard to embed must be set to embedded
in Serenytics. Then, the
dashboard is also embedded within an iFrame in your web site, but you must use a dynamically generated URL (a unique URL
generated each time you need to display the dashboard and valid only for a limited amount of time).
This dynamic URL can also be used to filter the data displayed in the embedded dashboard (e.g. to limit data to a user, a business-unit, a country...). We call such a dynamically filtered dashboard a template dashboard.
The full steps to create and securely embed a template dashboard are here.