Integração

Incorporando dashboards em HTML

Você pode incorporar facilmente um dashboard em seu próprio site, ou até mesmo em páginas HTML locais. Isso é feito utilizando o elemento HTML iframe padrão. O dashboard precisa estar compartilhado, na nuvem ou on-premise, para que seja carregado corretamente. Observe que dashboards on-premise só serão carregados quando o cliente que estiver acessando estiver na mesma rede corporativa. Para uma integração mais avançada, você também pode utilizar nossas REST APIs.

Instruções:

1) Obter o link de incorporação do dashboard - Na página Dashboards, certifique-se de que seu dashboard esteja compartilhado e clique no ícone referente a este dashboard. Um banner pop-up verde notificará que o link foi copiado para a área de transferência. Você o utilizará para substituir o conteúdo do atributo src do iframe HTML abaixo.

2) Incorporar o dashboard com tamanho fixo

<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) Incorporar o dashboard com largura dinâmica - Redimensiona automaticamente o dashboard com base na largura do documento pai

Você pode usar o parâmetro de estilo aspect-ratio para recalcular automaticamente a altura com base na largura.

<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) Outras opções úteis de incorporação

Você pode adicionar modificações de estilo personalizadas ao bloco style do elemento iframe para customizar a aparência do quadro. Esses parâmetros seguem as diretrizes padrão de HTML CSS. O exemplo abaixo adiciona uma borda cinza ao redor do 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>