Follow these steps to integrate the Growth Hub iframe into your website and ensure it dynamically adjusts its height to prevent double scrolling.
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.