インテグレーション

ダッシュボードをHTMLに埋め込む

ダッシュボードを自社のウェブサイトやローカルのHTMLページにも簡単に埋め込めます。これは標準のHTML iframe要素を使って実現します。ダッシュボードを正しく読み込むには、クラウドまたはオンプレミスで共有しておく必要があります。なお、オンプレミスのダッシュボードは、アクセスするクライアントが同じ社内ネットワーク内にある場合にのみ読み込まれます。より高度なインテグレーションには、REST APIsもご利用いただけます。

手順:

1) ダッシュボードの埋め込みリンクを取得する - ダッシュボードページで、ダッシュボードが共有されていることを確認したうえで、対象のダッシュボードのアイコンをクリックします。緑色のポップアップバナーで、リンクがクリップボードにコピーされたことが通知されます。これを下記のHTML iframeのsrcの内容と置き換えて使用します。

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) その他の便利な埋め込みオプション

iframe要素のstyleブロックにカスタムスタイルを追加して、フレームの見た目をカスタマイズできます。これらのパラメータは標準の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>