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.