Integration

Dashboards in HTML einbetten

Sie können ein Dashboard ganz einfach in Ihre eigene Website oder sogar in lokale HTML-Seiten einbetten. Dies erfolgt mit dem Standard-HTML-iframe-Element. Damit das Dashboard erfolgreich geladen wird, muss es freigegeben sein — entweder in der Cloud oder On-Premise. Beachten Sie, dass On-Premise-Dashboards nur dann geladen werden, wenn sich der zugreifende Client im selben Unternehmensnetzwerk befindet. Für eine fortgeschrittenere Integration können Sie auch unsere REST APIs nutzen.

Anleitung:

1) Den Einbettungslink des Dashboards extrahieren - Stellen Sie auf der Seite Dashboards sicher, dass Ihr Dashboard freigegeben ist, und klicken Sie dann auf das -Symbol für dieses Dashboard. Ein grünes Pop-up-Banner bestätigt, dass der Link in die Zwischenablage kopiert wurde. Verwenden Sie diesen Link, um den Inhalt des HTML-iframe-src-Attributs unten zu ersetzen.

2) Dashboard mit fester Größe einbetten

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

(oder) Dashboard mit dynamischer Breite einbetten - Passt die Größe des Dashboards automatisch an die Breite des übergeordneten Dokuments an

Mit dem Stilparameter aspect-ratio können Sie die Höhe automatisch auf Basis der Breite neu berechnen lassen.

<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) Weitere nützliche Einbettungsoptionen

Sie können dem Style-Block des iframe-Elements eigene Stilanpassungen hinzufügen, um das Erscheinungsbild des Rahmens zu individualisieren. Diese Parameter folgen den Standard-HTML-CSS-Richtlinien. Das folgende Beispiel fügt einen grauen Rahmen um das Dashboard hinzu:

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