Skip to content

Dashboard embedding

Serenytics dashboards can be embedded in your web application.

There are two ways to embed a dashboard in your app:

  • embedding a public dashboard: the unsecure option for quick tests or public data
  • embedding a private dashboard: the secure way to embed a dashboard in your app (and to pass filters to a dashboard)

Embedding a public dashboard

To embed a public dashboard, just insert the below code snippet in your code (you just need to replace the example UUID 59c447af-6059-4208-88e1-91c0c06fb677 by your dashboard UUID):

<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>

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 app, 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 and usable only once).

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 explained here.