Sprucely title background

インテグレーション

ダッシュボードを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>