When embedding OfficeRnD Growth Hub into your website, fixed iframe sizes can lead to unwanted double scrollbars, which can affect usability. To solve this, Growth Hub supports dynamic height adjustment through a simple event listener script.
This article explains how to embed the iframe and implement the resizing logic to match the iframe height to its content. By the end of the article, you will be able to offer a smooth browsing experience without nested scrolling issues.
1. Add the iframe to your website
Insert the following <iframe> element into your HTML where you want the Growth Hub to appear:
<iframe
id="growth-hub-embed"
title="Growth Hub"
width="100%"
style="border: none;"
allow="geolocation"
src="
https://e-commerce.officernd.com/<orgSlug>/dashboard">
</iframe>
Replace <orgSlug> with your organization's unique slug.
2. Include the height adjustment script to prevent a double scroll
To ensure the iframe automatically resizes based on its content and prevents double scrolling, add the following script before the closing </body> tag in your HTML file:
<script>
window.addEventListener('message', (event) => {
if (event.data?.type === 'height' && typeof event.data.height === 'number') {
const iframe = document.getElementById('growth-hub-embed');
if (iframe) {
iframe.style.height = `${event.data.height}px`;
}
}
});
</script>
This script listens for messages from the iframe and updates its height accordingly, ensuring a seamless user experience and preventing a double scroll.
Note: The <script> tag approach is optional—you can implement the event listener in any way that fits your website's setup. The key requirement is that your script listens for messages of type 'height', retrieves the height value, and applies it to the iframe with the ID 'growth-hub-embed'. This flexibility allows you to integrate the logic within your existing JavaScript framework or module system while ensuring the iframe resizes properly to avoid unnecessary scrolling.