Tích hợp

Nhúng bảng điều khiển vào HTML

Bạn có thể dễ dàng nhúng bảng điều khiển vào trang web của riêng mình hoặc thậm chí các trang HTML cục bộ. Việc này được thực hiện bằng phần tử iframe HTML chuẩn. Bảng điều khiển cần được chia sẻ, dù trên Đám mây hoặc On-premise, để bảng điều khiển có thể tải thành công. Xin lưu ý rằng các bảng điều khiển On-premise sẽ chỉ tải khi máy khách truy cập nằm trong cùng mạng nội bộ doanh nghiệp. Để tích hợp nâng cao hơn, bạn cũng có thể sử dụng REST APIs của chúng tôi.

Hướng dẫn:

1) Lấy liên kết nhúng bảng điều khiển - Trong trang Bảng điều khiển, đảm bảo bảng điều khiển của bạn đã được chia sẻ rồi nhấp vào biểu tượng cho bảng điều khiển này. Một biểu ngữ thông báo màu xanh lá sẽ hiện ra cho biết liên kết đã được sao chép vào bộ nhớ tạm. Bạn sẽ dùng nó để thay thế nội dung src của iframe HTML bên dưới.

2) Nhúng bảng điều khiển với kích thước cố định

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

(hoặc) Nhúng bảng điều khiển với chiều rộng linh hoạt - Tự động điều chỉnh kích thước bảng điều khiển dựa trên chiều rộng của tài liệu cha

Bạn có thể sử dụng tham số kiểu aspect-ratio để tự động tính toán lại chiều cao dựa trên chiều rộng.

<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) Các tùy chọn nhúng hữu ích khác

Bạn có thể thêm các tùy chỉnh kiểu vào khối style của phần tử iframe để tùy chỉnh giao diện của khung. Các tham số này tuân theo hướng dẫn HTML CSS chuẩn. Ví dụ bên dưới thêm viền màu xám xung quanh bảng điều khiển:

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