Integratie

Dashboards insluiten in HTML

U kunt eenvoudig een dashboard insluiten in uw eigen website of zelfs in lokale HTML-pagina's. Dit gebeurt met het standaard HTML iframe-element. Het dashboard moet gedeeld zijn — zowel in de Cloud als On-premise — om correct te kunnen worden geladen. Houd er rekening mee dat On-premise-dashboards alleen worden geladen wanneer de client die ze opent zich binnen hetzelfde bedrijfsnetwerk bevindt. Voor een meer geavanceerde integratie kunt u ook onze REST APIs gebruiken.

Instructies:

1) Haal de embed-link van het dashboard op - Op de pagina Dashboards controleert u of uw dashboard is gedeeld en klikt u vervolgens op het -icoon voor dit dashboard. Een groene pop-upbanner meldt dat de link naar het klembord is gekopieerd. U gebruikt deze om de inhoud van het HTML iframe-src-attribuut hieronder te vervangen.

2) Sluit het dashboard in met een vaste grootte

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

(of) Sluit het dashboard in met dynamische breedte - Past de grootte van het dashboard automatisch aan op basis van de breedte van het bovenliggende document

U kunt de stijlparameter aspect-ratio gebruiken om de hoogte automatisch opnieuw te berekenen op basis van de breedte.

<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) Andere handige insluitopties

U kunt aangepaste stijlwijzigingen toevoegen aan het style-blok van het iframe-element om de uitstraling van het frame aan te passen. Deze parameters volgen de standaard HTML CSS-richtlijnen. Het onderstaande voorbeeld voegt een grijze rand rond het dashboard toe:

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