एकीकरण

HTML में डैशबोर्ड एम्बेड करना

आप आसानी से अपनी वेबसाइट या यहां तक कि स्थानीय HTML पृष्ठों में किसी डैशबोर्ड को एम्बेड कर सकते हैं। यह मानक HTML iframe तत्व का उपयोग करके किया जाता है। डैशबोर्ड के सफलतापूर्वक लोड होने के लिए उसे Cloud में या On-premise में साझा किया जाना आवश्यक है। कृपया ध्यान दें कि On-premise डैशबोर्ड केवल तभी लोड होंगे जब उन्हें एक्सेस करने वाला क्लाइंट उसी कॉर्पोरेट नेटवर्क के भीतर हो। अधिक उन्नत एकीकरण के लिए, आप हमारे 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>