Integration

Indlejring af dashboards i HTML

Du kan nemt indlejre et dashboard på din egen hjemmeside eller endda på lokale HTML-sider. Det gøres med standard-HTML iframe-elementet. Dashboardet skal være delt — enten i Cloud eller On-premise — for at det kan indlæses korrekt. Bemærk, at On-premise-dashboards kun indlæses, når den klient, der tilgår dem, befinder sig på samme virksomhedsnetværk. For mere avanceret integration kan du også bruge vores REST APIs.

Instruktioner:

1) Hent dashboardets indlejringslink - På siden Dashboards skal du sikre dig, at dit dashboard er delt, og derefter klikke på -ikonet for dette dashboard. En grøn pop-up-banner vil bekræfte, at linket er kopieret til udklipsholderen. Du skal bruge dette til at erstatte indholdet af HTML iframe src nedenfor.

2) Indlejr dashboardet med en fast størrelse

<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) Indlejr dashboardet med dynamisk bredde - Tilpasser automatisk dashboardets størrelse efter forældredokumentets bredde

Du kan bruge stilparameteren aspect-ratio til automatisk at genberegne højden ud fra 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) Andre nyttige indlejringsmuligheder

Du kan tilføje brugerdefinerede stilændringer til iframe-elementets style-blok for at tilpasse rammens udseende. Disse parametre følger standard HTML CSS-retningslinjer. Eksemplet nedenfor tilføjer en grå kant omkring dashboardet:

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