Use the <growth-hub-iframe> web component to quickly embed the Growth Hub widget into your website. It automatically handles height changes and scroll events, so you don't have to manage them manually.
Before you start
To embed the widget, you need:
A valid
srcURL for your organization's Growth Hub page.Optionally, you can specify values for width, height, or autoHeight, depending on your layout needs.
Step 1: Load the widget script
Add this script tag to your HTML file to load the Growth Hub widget:
<script src="https://e-commerce.officernd.com/widget.js"></script>
Step 2: Add the Web Component
Use the <growth-hub-iframe> tag in your HTML and set its attributes. Make sure the src attribute always points to your organization’s Growth Hub page:
Basic example
<growth-hub-iframe src="https://e-commerce.officernd.com/[client-org-slug]"></growth-hub-iframe>
Enable auto height
Automatically adjusts height when content changes:
<growth-hub-iframe
src="https://e-commerce.officernd.com/[client-org-slug]"
autoHeight>
</growth-hub-iframe>
Set custom width and height
Specify exact dimensions using valid CSS values:
<growth-hub-iframe
src="https://e-commerce.officernd.com/[client-org-slug]"
width="900px"
height="500px">
</growth-hub-iframe>
Web component attributes
Attribute | Required | Description |
| Yes | The full URL to your Growth Hub widget (client-specific). |
| No | Automatically resizes the iframe height as its content changes. |
| No | Sets the iframe width. Defaults to |
| No | Sets the iframe height. Defaults to
|
Widget behaviour
Dynamic Height:
WhenautoHeightis enabled, the component listens for content changes within the iframe and adjusts its height automatically.Fallback Height:
If you do not specify eitherautoHeightor a fixedheight, the widget will default to trying to fill 100% of its parent container's height.Custom Sizing:
Thewidthandheightattributes accept complete CSS unit values, offering flexibility to match your design needs.Scroll Handling:
The component automatically handles scroll events—scrolling to the top or bottom when the app requires them—further reducing manual integration work.