Integraatio

Koontinäyttöjen upottaminen HTML:ään

Voit upottaa koontinäytön helposti omalle verkkosivustollesi tai jopa paikallisille HTML-sivuille. Tämä tehdään standardilla HTML iframe -elementillä. Koontinäytön on oltava jaettu joko pilvessä tai paikallisesti, jotta se latautuu onnistuneesti. Huomioithan, että paikalliset koontinäytöt latautuvat vain, kun käyttävä asiakas on samassa yritysverkossa. Edistyneempää integrointia varten voit käyttää myös REST APIs.

Ohjeet:

1) Pura koontinäytön upotuslinkki - Siirry Koontinäytöt -sivulle, varmista että koontinäyttösi on jaettu, ja napsauta sitten kyseisen koontinäytön -kuvaketta. Vihreä ponnahdusbanneri ilmoittaa, että linkki on kopioitu leikepöydälle. Käytät sitä alla olevan HTML iframe src -sisällön korvaamiseen.

2) Upota koontinäyttö kiinteällä koolla

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

(tai) Upota koontinäyttö dynaamisella leveydellä - Mukauttaa koontinäytön koon automaattisesti emodokumentin leveyden perusteella

Voit käyttää aspect-ratio-tyyliparametria laskemaan korkeuden automaattisesti uudelleen leveyden perusteella.

<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) Muita hyödyllisiä upotusvaihtoehtoja

Voit lisätä mukautettuja tyylimuokkauksia iframe-elementin tyylilohkoon mukauttaaksesi kehyksen ulkoasua. Nämä parametrit noudattavat standardeja HTML CSS -ohjeita. Alla oleva esimerkki lisää koontinäytön ympärille harmaan reunuksen:

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