Growth Hub can be integrated into a marketing website in two main ways:
Embedding (iframe): Places the checkout flow or product listings within your existing website using an iframe. This creates a seamless user experience that keeps visitors on the same website.
Redirect: Opens the checkout or product listings in a separate, stand-alone web application. It can simplify implementation but will temporarily redirect users from your main website.
General rules
Whether you want to embed the Growth Hub into your website or use it as a standalone solution, you can modify the URL to achieve deeper integration.
The following filters can connect Growth Hub to different pages of your marketing website.
Product Types
State, City, or Location
When using City or State, make sure the URL contains all IDs of the locations within the selected City or State
Example URL:
Capacity, Amenities, and Price could be used to prefilter results
Important: When using redirects or embedded iframes, ensure the URL does not include dates. Otherwise, customers may be directed to pages with past dates, which can negatively impact their experience.
Embed Growth Hub into your website
To embed Growth Hub into your website, follow these steps:
Step 1: Retrieve the storefront link
You can retrieve the storefront link from the Flex Admin Portal:
Open the Flex Admin Portal and go to Growth Hub
> Storefront Settings > Landing Page.
On the Landing Page Appearance tab, click
to copy the redirect link in the Links section. This is the link to your Growth Hub's landing page.
On the Listed Product Types tab:
Click Customize next to any product type.
Click
to copy the redirect link in the Links section. This is the link to the specific product type.
Example URLs
Landing Page:
https://e-commerce.officernd.com/<ORG_SLUG>
Product Type Page (Meeting Rooms):
https://e-commerce.officernd.com/<ORG_SLUG>/search-results?type=<PRODUCT_TYPE>&listingType=resource
Product Page (Meeting Room):
https://e-commerce.officernd.com/<ORG_SLUG>/resources/<RESOURCE_ID>
Step 2: Get or create the <iframe> code snippet
When you have your storefront URL, you can embed it on any webpage by adding an <iframe> tag in your HTML.
You can retrieve the embed code from the Growth Hub module in the Admin Portal:
Open the Flex Admin Portal and go to Growth Hub
> Storefront Settings > Landing Page.
On the Landing Page Appearance tab, click
to copy the embed code in the Links section. This is the code for your Growth Hub's landing page.
On the Listed Product Types tab:
Click Customize next to any product type.
Click
to copy the embed code in the Links section. This is the code for the specific product type.
Here's a simple example:
<iframe
src="https://e-commerce.officernd.com/<ORG SLUG>"
width="100%"
height="600"
style="border:none;"
allowfullscreen>
</iframe>
Recommended attributes
width/height: Determines the dimensions of the iframe on your page. Use"100%"to expand the iframe to the full width/height of its container.
src: Specifies the URL of the page or resource to be embedded in the iframe.
allow: Grants specific permissions to the iframe content. For example:geolocation– Permits the embedded page to request the customer's location.payment– Permits the use of the Payment Request API. This is necessary to activate Apple Pay.
sandbox: Applies extra security restrictions to the iframe.allow-scripts– Permits scripts to run inside the iframe.allow-same-origin– Makes the content to be treated as if it's from the same origin, enabling certain functionality like reading cookies within that domain.
crossorigin: Indicates how the browser should handle cross-domain requests for this iframe's content.anonymous– No user credentials (like cookies or authentication data) are sent with the requests, enhancing privacy.
Step 3: Embed Growth Hub into your website's code
Open the HTML, CMS editor, or website builder for the page where you want your storefront to appear. Insert the <iframe> snippet in the desired location.
Example: WordPress
In the WordPress editor, open the "HTML" tab.
Paste in the
<iframe>code snippet.Update and preview your page.
Step 4: Adjust size and appearance
You can modify the width and height attributes to fit your website's layout.
For example, if you want the storefront to fill the entire window horizontally, you can set width="100%".
If you want it taller or shorter, adjust height accordingly (for example, height="800").
Step 5: Consider responsive design
If your customers commonly access your site from mobile or tablet devices, you may want to ensure the <iframe> is responsive:
<iframe
src="https://my-company.example.com/storefront"
style="width:100%; height:600px; border:none;"
allowfullscreen>
</iframe>
With width="100%", the storefront will automatically resize to match the width of the container on different devices, though the height remains fixed.
Embed Growth Hub – FAQ
Can I style the content inside the
<iframe>directly?
You generally cannot style the contents inside the<iframe>from the parent site. Any styling must be handled within the Growth Hub (on the Flex Admin Portal).
Do I need any JavaScript to embed?
Simple embedding only needs the<iframe>code. If you require advanced interactions (like resizing the<iframe>based on content), you may need additional scripts.
What about SEO?
Content within an<iframe>is often not indexed by search engines as part of your main site's page, so it typically does not impact SEO the same way inline content does.
Use redirects
If you want to use redirects to integrate Growth Hub into your website, you can use Growth Hub's default website and copy all relevant redirect links.
Open the Flex Admin Portal and go to Growth Hub
> Storefront Settings > Landing Page.
On the Landing Page Appearance tab, click
to copy the redirect link in the Links section. This is the link to your Growth Hub's landing page.
On the Listed Product Types tab:
Click Customize next to any product type.
Click
to copy the redirect link in the Links section. This is the link to the specific product type.