Интеграция

Встраивание дашбордов в HTML

Вы можете легко встроить дашборд на собственный сайт или даже в локальные HTML-страницы. Это делается с помощью стандартного HTML-элемента iframe. Чтобы дашборд успешно загружался, он должен быть опубликован — либо в облаке, либо on-premise. Обратите внимание, что дашборды on-premise загружаются только в том случае, если клиент, обращающийся к ним, находится в той же корпоративной сети. Для более продвинутой интеграции вы также можете использовать наши REST APIs.

Инструкции:

1) Получение ссылки для встраивания дашборда - На странице Дашборды убедитесь, что ваш дашборд опубликован, затем нажмите значок для этого дашборда. Зелёная всплывающая полоса уведомит вас о том, что ссылка скопирована в буфер обмена. Используйте её, чтобы заменить содержимое атрибута src в HTML-элементе iframe ниже.

2) Встраивание дашборда с фиксированным размером

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

(или) Встраивание дашборда с динамической шириной - Автоматически изменяет размер дашборда в зависимости от ширины родительского документа

Вы можете использовать стилевой параметр aspect-ratio, чтобы автоматически пересчитывать высоту на основе ширины.

<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) Другие полезные опции встраивания

Вы можете добавить пользовательские стилевые модификации в блок style элемента iframe, чтобы настроить внешний вид рамки. Эти параметры соответствуют стандартным правилам HTML CSS. В примере ниже добавляется серая рамка вокруг дашборда:

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