Integración

Incrustar dashboards en HTML

Puede incrustar fácilmente un dashboard en su propio sitio web, o incluso en páginas HTML locales. Esto se hace mediante el elemento iframe HTML estándar. Para que el dashboard se cargue correctamente, debe estar compartido, ya sea en la nube o en local. Tenga en cuenta que los dashboards locales solo se cargarán cuando el cliente que los acceda esté dentro de la misma red corporativa. Para una integración más avanzada, también puede utilizar nuestras REST APIs.

Instrucciones:

1) Extraer el enlace de incrustación del dashboard - En la página Dashboards, asegúrese de que su dashboard esté compartido y, a continuación, haga clic en el icono correspondiente a este dashboard. Un banner emergente verde le notificará que el enlace se ha copiado al portapapeles. Lo utilizará para reemplazar el contenido del atributo src del iframe HTML que se muestra a continuación.

2) Incrustar el dashboard con un tamaño fijo

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

(o) Incrustar el dashboard con ancho dinámico - Redimensiona automáticamente el dashboard según el ancho del documento principal

Puede usar el parámetro de estilo aspect-ratio para recalcular automáticamente la altura en función del ancho.

<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) Otras opciones útiles de incrustación

Puede añadir modificaciones de estilo personalizadas al bloque de estilo del elemento iframe para personalizar la apariencia del marco. Estos parámetros siguen las directrices estándar de HTML CSS. El siguiente ejemplo añade un borde gris alrededor del 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>