Embedding dashboards into your business website can enhance data visibility and improve decision-making. Geckoboard offers a user-friendly platform for creating real-time dashboards that can be integrated seamlessly into your site. This tutorial provides step-by-step instructions on how to embed Geckoboard dashboards into your website using simple HTML and iframe techniques.

Prerequisites

  • A Geckoboard account with an active dashboard
  • Access to your website's HTML code or content editor
  • Basic understanding of HTML and iframe tags

Step 1: Obtain Your Dashboard Embed URL

Log in to your Geckoboard account and navigate to the dashboard you wish to embed. Click on the "Share" or "Embed" option, usually represented by an icon or menu item. Copy the provided embed URL or iframe code snippet. If only a URL is provided, you'll embed it manually in your website's HTML.

Step 2: Prepare Your Embed Code

If you have a URL, create an iframe tag to embed the dashboard. Customize the width and height to fit your website layout. Example code:

<iframe src="YOUR_GECKOBOARD_EMBED_URL" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

Step 3: Insert the Embed Code into Your Website

Access your website's HTML editor or page builder. Paste the iframe code where you want the dashboard to appear. If using WordPress block editor, add a Custom HTML block and insert the code inside.

Example:

<!-- wp:html -->

<iframe src="YOUR_GECKOBOARD_EMBED_URL" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

<!-- /wp:html -->

Step 4: Adjust and Publish

Preview your page to ensure the dashboard displays correctly. Adjust the width and height as needed for optimal viewing. Once satisfied, publish or update your page to make the dashboard live.

Additional Tips

  • Use responsive width (e.g., width="100%") for better mobile compatibility.
  • Secure your embed URL with HTTPS to ensure secure loading.
  • If your dashboard requires authentication, ensure users have access rights or consider embedding with restricted access.
  • Test the embedded dashboard across different browsers and devices for consistency.

Conclusion

Embedding Geckoboard dashboards into your website is a straightforward process that can significantly improve data transparency for your visitors and team. By following this tutorial, you can quickly integrate real-time data visualizations into your online presence, enhancing your business intelligence capabilities.