Integrasjon

Bygge inn dashboards i HTML

Du kan enkelt bygge inn et dashboard på din egen nettside, eller til og med på lokale HTML-sider. Dette gjøres ved hjelp av standard HTML iframe-element. Dashboardet må være delt — enten i Cloud eller On-premise — for at det skal lastes inn riktig. Vær oppmerksom på at On-premise-dashboards kun lastes inn når klienten som bruker det er på det samme bedriftsnettverket. For mer avansert integrasjon kan du også bruke våre REST APIs.

Instruksjoner:

1) Hent dashboardets innebyggingslenke - På siden Dashboards forsikrer du deg om at dashboardet ditt er delt, og klikker deretter på -ikonet for dette dashboardet. Et grønt popup-banner varsler at lenken er kopiert til utklippstavlen. Du bruker denne til å erstatte innholdet i HTML iframe src nedenfor.

2) Bygg inn dashboardet med 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) Bygg inn dashboardet med dynamisk bredde - Endrer automatisk størrelsen på dashboardet basert på bredden til det overordnede dokumentet

Du kan bruke stilparameteren aspect-ratio for automatisk å beregne høyden basert på 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 innebyggingsalternativer

Du kan legge til egendefinerte stilendringer i style-blokken til iframe-elementet for å tilpasse utseendet på rammen. Disse parameterne følger standard HTML CSS-retningslinjer. Eksemplet nedenfor legger til en grå kant rundt 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>