Growth Hub's Smart Embedding lets you integrate your e-commerce storefront directly into your website. By using a self-contained React application delivered as a web component (<growth-hub>). You can provide a seamless booking and purchasing experience on any HTML page.
Before you start
Before you start, you need your organization slug. This is a unique identifier for your OfficeRnD account. You will use it in the embed code below.
To find your organization slug:
Log in to the OfficeRnD Flex Admin Portal.
Go to Settings > Account Details > Company & Billing.
Your slug is displayed in the Admin Portal Address field. It typically looks like
your-space-name.
If you don't have access to the settings, you can find the slug in the address bar of the browser:
Keep the slug handy—you will need it in the next steps.
Embedding process overview
Embed Growth Hub on your website (follow the steps in this article).
Set up your Google Analytics account.
Option A: I use a website builder (WordPress, Squarespace, Wix, etc.)
If you maintain your own website using a website builder platform, follow the instructions for your platform below. You do not need any coding knowledge; you just need to paste two code snippets into the right place.
What you need to add
Snippet 1 – Loads the Growth Hub component. Add this once, in your website's header/head area:
<script src="https://e-commerce.officernd.com/webc"></script>
Snippet 2 – Displays the storefront. Add this to the page where you want the storefront to appear (replace "your-org-slug" with the slug you found in the previous step):
<growth-hub slug="your-org-slug"></growth-hub>
WordPress
Install and activate a plugin that allows custom code in the header, such as Insert Headers and Footers (by WPCode) or a similar plugin.
Go to the plugin's settings and paste Snippet 1 into the Header section. Save.
Create or edit the page where you want the storefront.
Add a Custom HTML block (in the Gutenberg editor) or switch to the Text/HTML tab (in the Classic editor).
Paste Snippet 2 into the block. Publish or update the page.
Squarespace
Go to Settings > Advanced > Code Injection.
Paste Snippet 1 into the Header field. Save.
Edit the page where you want the storefront.
Add a Code block.
Paste Snippet 2 into the code block. Save.
Wix
Go to Settings > Custom Code (under Advanced).
Click Add Custom Code, paste Snippet 1, set it to load in the Head, and apply it to the specific page (or all pages). Save.
Edit the page where you want the storefront.
Add an Embed HTML element (from Add > Embed).
Click Enter Code, paste Snippet 2, and apply. Publish.
Other website builders
The general approach is the same for any platform:
Find where your platform allows you to add custom code to the site header (sometimes called "head code", "header scripts", or "code injection").
Paste Snippet 1 there.
On the target page, find a way to insert raw HTML (often called "HTML block", "embed block", "custom code block", or "code element").
Paste Snippet 2 there.
If your platform does not support custom HTML, contact your web developer or our support team for help.
Recommended styling
To make sure the storefront displays properly, add this CSS to your website. Most website builders have a "Custom CSS" section in their settings:
growth-hub {
display: block;
width: 100%;
min-height: fit-content;
}This ensures the component takes up the full width of its container and expands to fit its content.
Option B: I have a developer or a custom-built website
If you or your developer works directly with HTML, React, or another framework, this section covers the technical integration details.
Loading the web component
Include the following script tag in your HTML. This registers the custom <growth-hub> element automatically:
<script src="https://e-commerce.officernd.com/webc"></script>
The component is delivered as a self-contained React application packaged as a web component and loaded as an Immediately Invoked Function Expression (IIFE).
Web component URL: https://e-commerce.officernd.com/webc
Basic HTML
Simply add the custom tag to your <body>. The slug attribute is the only required field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Growth Hub Example</title>
<script src="https://e-commerce.officernd.com/webc"></script>
</head>
<body>
<growth-hub slug="org-slug"></growth-hub>
</body>
</html>
React / JSX
For React applications, use the tag directly in your component's return statement:
import React from "react";
function App() {
return <growth-hub slug="org-slug" initial-route="dashboard" />;
}
export default App;
Vanilla JavaScript (dynamic loading)
If you need to load the component dynamically, you can do so via script injection:
// Load the script
const script = document.createElement("script");
script.src = "https://e-commerce.officernd.com/webc";
document.body.appendChild(script);
script.onload = () => {
// Create and configure the component
const growthHub = document.createElement("growth-hub");
growthHub.setAttribute("slug", "org-slug");
growthHub.setAttribute("initial-route", "dashboard");
// Append to container
document.getElementById("container").appendChild(growthHub);
};
Recommended CSS
growth-hub {
display: block;
width: 100%;
min-height: fit-content;
}Property | Purpose |
display | Custom elements default to inline; block ensures proper layout. |
width | Fills the parent container width. |
min-height | Allows the component to expand to fit its content. |
Configuration attributes
You can customize the behavior of the component using the following attributes:
Attribute | Type | Required | Default | Description |
| string | Required | N/A | Your unique organization identifier. The organization slug identifier. This is required for the component to function.
|
| string | Optional |
| The initial route to display when the component loads. Can include query parameters (e.g., " |
| boolean | Optional |
| When set to true, it skips Google Tag |
| string or number | Optional | Computed from host | The HTML font size in pixels. If provided, this allows the component to align its theme scaling with the host page's intended root font size while preserving browser font-size accessibility scaling. If omitted, the component uses the computed HTML font size from the host page. |
Attribute examples
<!-- Minimal usage (only required attribute) -->
<growth-hub slug="org-slug"></growth-hub>
<!-- With initial route -->
<growth-hub slug="org-slug" initial-route="resources"></growth-hub>
<!-- With initial route and language parameter -->
<growth-hub
slug="org-slug"
initial-route="dashboard?language=bg-bg"
></growth-hub>
<!-- Skip GTM initialization (parent page manages GTM) -->
<growth-hub slug="org-slug" skip-gtm-initialization="true">
</growth-hub>
<!-- With custom HTML font size -->
<growth-hub slug="org-slug" html-font-size="10"> </growth-hub>
<!-- Full example with all optional attributes -->
<growth-hub
slug="org-slug"
initial-route="dashboard?language=en-us"
skip-gtm-initialization="true"
html-font-size="16"
>
</growth-hub>
Common customizations
These options cover the most frequently needed tweaks. You apply them by adding attributes to the <growth-hub> tag.
Show a specific page on load (e.g., go straight to your resources listing):
<growth-hub slug="org-slug" initial-route="resources"></growth-hub>
Set the interface language (e.g., Bulgarian):
<growth-hub slug="org-slug" initial-route="dashboard?language=bg-bg"></growth-hub>
The language will only take effect if you have translated and enabled that language in your Flex Admin Portal.
Avoid duplicate Google Tag Manager initialization (if your website already loads GTM):
<growth-hub slug="org-slug" skip-gtm-initialization="true"></growth-hub>
Set a custom font size (to align the storefront's text scaling with your website):
<growth-hub slug="org-slug" html-font-size="16"></growth-hub>
Routing and deep linking (advanced)
Note: This section is intended for developers. If you used Option A above, you can skip this.
The Growth Hub web component uses hash-based URLs to handle its internal navigation. Everything before the # belongs to your website; everything after it is handled by Growth Hub.
URL structure examples
Embedded on a sub-page:
https://your-site.com/coworking/– Your website page#/org-slug/dashboard– Growth Hub route
Embedded on the root page:
With filters applied:
Available filter parameters:
type– Resource type (e.g.,meeting_room)listingType– Resource or planminPrice/maxPrice– Price range filter
The component syncs with the browser's hash, so browser back/forward navigation works automatically. You can also navigate programmatically by updating window.location.hash.
Language parameter
The language query parameter (e.g., ?language=en-us) sets the interface language. Growth Hub also listens to the lang attribute on your website's <html> tag and updates its UI accordingly, provided the language is translated and enabled in your Admin Portal.
Troubleshooting
Read this section for troubleshooting steps on common issues.
The storefront loads slowly
In most cases, slow storefront loading is due to the host website's performance, not the Growth Hub component.
Test your website at Google PageSpeed Insights.
If your Performance score is below 50, focus on fixing the issues flagged in the report first.
Common culprits: unoptimized images, too many third-party scripts, render-blocking CSS/JS, and lack of caching.
After improving your website speed, test the storefront load time again.
If your website scores above 80 and the storefront still loads slowly, contact our support team with the PageSpeed report, and we will investigate.
The storefront does not appear
Confirm the
<script>tag is present in your page's source code.Verify that the slug value matches your organization's slug in the Admin Portal.
Check your browser's developer console for errors:
Right-click anywhere on the page.
Select Inspect.
Go to the Console tab.
Share any red error messages with our support team if you need help.
The storefront looks broken on mobile
Ensure you have added the recommended CSS (see above ↑).
Verify that your website itself is mobile-responsive. If your website does not adapt to smaller screens, the embedded component will also be affected.
Filters or deep links are not working
Ensure the URL hash is formatted correctly (see above ↑).
Confirm that the resource types, plans, or price ranges you are filtering by actually exist in your OfficeRnD account.
Related articles