Entegrasyon

Gösterge Panellerini HTML'e Gömme

Bir gösterge panelini kendi web sitenize ve hatta yerel HTML sayfalarına kolayca gömebilirsiniz. Bu işlem standart HTML iframe öğesi kullanılarak yapılır. Gösterge panelinin başarıyla yüklenebilmesi için Bulutta veya On-premise olarak paylaşılmış olması gerekir. On-premise gösterge panellerinin yalnızca erişen istemci aynı kurumsal ağ içindeyken yükleneceğini lütfen unutmayın. Daha gelişmiş entegrasyon için REST APIs'lerimizi de kullanabilirsiniz.

Talimatlar:

1) Gösterge paneli gömme bağlantısını alın - Gösterge Panelleri sayfasında, gösterge panelinizin paylaşıldığından emin olun ve ardından bu gösterge paneli için simgesine tıklayın. Yeşil bir açılır banner, bağlantının panoya kopyalandığını size bildirecektir. Bunu aşağıdaki HTML iframe src içeriğinin yerine geçecek şekilde kullanacaksınız.

2) Gösterge panelini sabit boyutla gömü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: 500px; width: 700px;"

            title="Sprucely.io Dashboard"></iframe>

  </body>

</html>

(veya) Gösterge panelini dinamik genişlikle gömün - Gösterge panelinin boyutunu üst belgenin genişliğine göre otomatik olarak ayarlar

Yüksekliği genişliğe göre otomatik olarak yeniden hesaplamak için aspect-ratio stil parametresini kullanabilirsiniz.

<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) Diğer kullanışlı gömme seçenekleri

Çerçevenin görünümünü özelleştirmek için iframe öğesinin style bloğuna özel stil değişiklikleri ekleyebilirsiniz. Bu parametreler standart HTML CSS yönergelerine uygundur. Aşağıdaki örnek, gösterge panelinin etrafına gri bir kenarlık ekler:

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