Intégration

Intégration de tableaux de bord en HTML

Vous pouvez facilement intégrer un tableau de bord dans votre propre site web, voire dans des pages HTML locales. Cela se fait à l'aide de l'élément iframe HTML standard. Le tableau de bord doit être partagé, dans le Cloud ou On-premise, pour pouvoir se charger correctement. Notez que les tableaux de bord On-premise ne se chargent que lorsque le client qui y accède se trouve sur le même réseau d'entreprise. Pour une intégration plus avancée, vous pouvez également utiliser nos REST APIs.

Instructions :

1) Récupérer le lien d'intégration du tableau de bord - Sur la page Tableaux de bord, vérifiez que votre tableau de bord est partagé, puis cliquez sur l'icône correspondante. Une bannière contextuelle verte vous indiquera que le lien a été copié dans le presse-papiers. Vous l'utiliserez pour remplacer le contenu de l'attribut src de l'iframe HTML ci-dessous.

2) Intégrer le tableau de bord avec une taille fixe

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

(ou) Intégrer le tableau de bord avec une largeur dynamique - Redimensionne automatiquement le tableau de bord en fonction de la largeur du document parent

Vous pouvez utiliser le paramètre de style aspect-ratio pour recalculer automatiquement la hauteur en fonction de la largeur.

<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) Autres options d'intégration utiles

Vous pouvez ajouter des modifications de style personnalisées au bloc style de l'élément iframe pour adapter l'apparence du cadre. Ces paramètres suivent les directives HTML CSS standard. L'exemple ci-dessous ajoute une bordure grise autour du tableau de bord :

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