Integrazione

Incorporare dashboard in HTML

Puoi incorporare facilmente una dashboard nel tuo sito web o anche in pagine HTML locali. Si effettua utilizzando l'elemento HTML iframe standard. La dashboard deve essere condivisa, in Cloud o On-premise, affinché venga caricata correttamente. Tieni presente che le dashboard On-premise verranno caricate solo quando il client che vi accede si trova nella stessa rete aziendale. Per un'integrazione più avanzata, puoi anche utilizzare le nostre REST APIs.

Istruzioni:

1) Estrai il link di incorporamento della dashboard - Nella pagina Dashboard, assicurati che la dashboard sia condivisa e poi fai clic sull'icona corrispondente. Un banner pop-up verde ti notificherà che il link è stato copiato negli appunti. Lo utilizzerai per sostituire il contenuto dell'attributo src dell'iframe HTML qui sotto.

2) Incorpora la dashboard con dimensione fissa

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

(oppure) Incorpora la dashboard con larghezza dinamica - Ridimensiona automaticamente la dashboard in base alla larghezza del documento principale

Puoi utilizzare il parametro di stile aspect-ratio per ricalcolare automaticamente l'altezza in base alla larghezza.

<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) Altre opzioni utili di incorporamento

Puoi aggiungere modifiche di stile personalizzate al blocco style dell'elemento iframe per personalizzare l'aspetto del frame. Questi parametri seguono le linee guida HTML CSS standard. L'esempio seguente aggiunge un bordo grigio attorno alla dashboard:

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