Integracja

Osadzanie dashboardów w HTML

Możesz w prosty sposób osadzić dashboard we własnej witrynie internetowej, a nawet na lokalnych stronach HTML. Odbywa się to za pomocą standardowego elementu HTML iframe. Aby dashboard załadował się prawidłowo, musi być udostępniony — w chmurze lub on-premise. Pamiętaj, że dashboardy on-premise wczytają się tylko wtedy, gdy klient uzyskujący do nich dostęp znajduje się w tej samej sieci korporacyjnej. Aby uzyskać bardziej zaawansowaną integrację, możesz skorzystać również z naszych REST APIs.

Instrukcje:

1) Pobierz link do osadzenia dashboardu - Na stronie Dashboardy upewnij się, że dashboard jest udostępniony, a następnie kliknij ikonę obok tego dashboardu. Zielony baner powiadomi Cię, że link został skopiowany do schowka. Użyjesz go do zastąpienia zawartości atrybutu src elementu iframe HTML poniżej.

2) Osadź dashboard o stałym rozmiarze

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

(lub) Osadź dashboard z dynamiczną szerokością - Automatycznie dopasowuje rozmiar dashboardu do szerokości dokumentu nadrzędnego

Możesz użyć parametru stylu aspect-ratio, aby automatycznie przeliczać wysokość na podstawie szerokości.

<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) Inne przydatne opcje osadzania

Możesz dodać niestandardowe modyfikacje stylu w bloku style elementu iframe, aby dostosować wygląd ramki. Te parametry są zgodne ze standardowymi wytycznymi HTML CSS. Poniższy przykład dodaje szare obramowanie wokół dashboardu:

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