Integration

Embedding Dashboards in HTML

You can easily embed a dashboard into your own website, or even local HTML pages. This is done using the standard HTML iframe element. The dashboard need to be shared, either in the Cloud or On-premise for the dashboard to load successfully. Do note that On-premise dashboards will only load when the client accessing it is within the same corporate network.

Instructions:

1) Extract the dashboard embed link - In the Dashboards page, ensure your dashboard is shared and then click the icon for this dashboard. A green popup banner shall notify you that the link was copied to the clipboard. You will use this to replace the HTML iframe src contents below.

2) Embed the dashboard with a fixed size

<html>
  <head>
    <title>Sprucely.io Dashboard</title>
  </head>
  <body>
    <h1>Sprucely.io Dashboard</h1>
    <iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
            allow="clipboard-write"
            style="height: 500px; width: 700px;"
            title="Sprucely.io Dashboard"></iframe>
  </body>
</html>

(or) Embed the dashboard with dynamic width - Automatically resizes the dashboard based on the parent document's width

You can use the aspect-ratio style parameter to automatically recalculate the height based on the width.

<html>
  <head>
    <title>Sprucely.io Dashboard</title>
  </head>
  <body>
    <h1>Sprucely.io Dashboard</h1>
    <iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
            allow="clipboard-write"
            scrolling="no"
            style="width: 100%; aspect-ratio: 1.5; border: none;"
            title="Sprucely.io Dashboard"></iframe>
  </body>
</html>

3) Other useful embed options

You can add custom style modifications to the style block of the iframe element, to customize the look and feel of the frame. These parameters follow standard HTML CSS guidelines. The example below adds a grey border around the dashboard:

<html>
  <head>
    <title>Sprucely.io Dashboard</title>
  </head>
  <body>
    <h1>Sprucely.io Dashboard</h1>
    <iframe src="https://www.sprucely.io/service/dashboards/embed/[userId]/[dashboardId]/"
            allow="clipboard-write"
            style="height: 100%; width: 100%; border: 2px solid grey;"
            title="Sprucely.io Dashboard"></iframe>
  </body>
</html>