Integration

Bädda in dashboards i HTML

Du kan enkelt bädda in en dashboard på din egen webbplats eller till och med på lokala HTML-sidor. Detta görs med standard HTML iframe-element. Dashboarden måste vara delad, antingen i molnet eller On-premise, för att den ska kunna laddas korrekt. Observera att On-premise-dashboards endast laddas när klienten som öppnar dem befinner sig inom samma företagsnätverk. För mer avancerad integration kan du även använda våra REST APIs.

Instruktioner:

1) Hämta dashboardens inbäddningslänk - På sidan Dashboards ser du till att din dashboard är delad och klickar sedan på -ikonen för dashboarden. En grön popup-banner meddelar att länken har kopierats till urklipp. Du använder den för att ersätta innehållet i HTML iframe src nedan.

2) Bädda in dashboarden med en fast storlek

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

(eller) Bädda in dashboarden med dynamisk bredd - Anpassar automatiskt dashboardens storlek baserat på det överordnade dokumentets bredd

Du kan använda style-parametern aspect-ratio för att automatiskt räkna om höjden utifrån bredden.

<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) Andra användbara inbäddningsalternativ

Du kan lägga till anpassade stilmodifieringar i style-blocket för iframe-elementet för att anpassa ramens utseende. Dessa parametrar följer standardiserade HTML CSS-riktlinjer. Exemplet nedan lägger till en grå ram runt dashboarden:

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