Integrasi

Menyematkan Dasbor di HTML

Anda dapat dengan mudah menyematkan dasbor ke situs web Anda sendiri, atau bahkan halaman HTML lokal. Hal ini dilakukan dengan menggunakan elemen iframe HTML standar. Dasbor harus dibagikan, baik di Cloud maupun On-premise, agar dapat dimuat dengan benar. Perlu dicatat bahwa dasbor On-premise hanya akan dimuat ketika klien yang mengaksesnya berada di jaringan korporat yang sama. Untuk integrasi yang lebih lanjut, Anda juga dapat menggunakan REST APIs kami.

Petunjuk:

1) Ekstrak tautan sematan dasbor - Pada halaman Dasbor, pastikan dasbor Anda telah dibagikan, lalu klik ikon untuk dasbor ini. Banner pop-up berwarna hijau akan memberi tahu Anda bahwa tautan telah disalin ke clipboard. Anda akan menggunakannya untuk mengganti konten src iframe HTML di bawah.

2) Sematkan dasbor dengan ukuran tetap

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

(atau) Sematkan dasbor dengan lebar dinamis - Secara otomatis menyesuaikan ukuran dasbor berdasarkan lebar dokumen induk

Anda dapat menggunakan parameter style aspect-ratio untuk menghitung ulang tinggi secara otomatis berdasarkan lebar.

<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) Opsi sematan berguna lainnya

Anda dapat menambahkan modifikasi style kustom ke blok style elemen iframe untuk menyesuaikan tampilan frame. Parameter ini mengikuti standar panduan HTML CSS. Contoh di bawah menambahkan border abu-abu di sekitar dasbor:

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