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>