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 embedding your storefront, understand how the Smart Embedding, Cookie Consent, and GA4 Tracking work together →

Embedding process overview

Embed Growth Hub on your website (follow the steps in this article).
Set up your Google Analytics account.
Configure cookie consent sync →
Set up GA4 tracking →

Find your organization slug

Before you start, you need your organization slug. This is a unique identifier for your OfficeRnD account. 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.

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 don't need any coding knowledge; you just need to paste two code snippets in 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 lets you add 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>

Note: The example uses <html lang="en">. The storefront reads this attribute and displays its interface in that language. Set lang to the language you want the storefront to use, for example, lang="sv-SE" for Swedish.

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
`slug`	string	Required	N/A	Your unique organization identifier. The organization slug identifier. Required for the component to function.
`initial-route`	string	Optional	`"dashboard"`	The initial route to display when the component loads. Can include query parameters (e.g., `"dashboard?type=meeting_room"`). Routes should not have a leading slash. For language, set the host page `<html lang="...">` attribute — see Set the interface language and How the storefront picks its language.
`skip-gtm-initialization`	boolean	Optional	`false`	When set to true, it skips Google Tag Manager initialization, assuming the parent page has already initialized GTM. Set this to true if you're managing GTM on the parent page to avoid duplicate initialization.
`html-font-size`	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 host page's computed HTML font size.

Attribute examples

<!-- Minimal usage (only required attribute) -->
<growth-hub slug="org-slug"></growth-hub>

<!-- With initial route -->
<growth-hub 
  slug="org-slug"
  initial-route="dashboard?type=meeting_room&listingType=resource"
></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?type=meeting_room"
  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.

Set the interface language

The storefront reads its language from the lang attribute on your page’s root <html> tag. Set that attribute to the language you want the storefront to display. For example, use lang="bg" or lang="bg-BG" for Bulgarian.

This is intentional. The storefront is meant to feel like part of your website: it inherits the page language by default, and if your site has a language switcher that updates the page lang attribute, the storefront follows that switcher with no extra setup on the embed.

How language is chosen (priority order):

When the storefront loads, it picks a language in this order:

Page lang attribute — If <html lang="..."> matches a language that is translated and turned on in your Admin Portal, it uses that language.
language query parameter — Only if the page lang attribute is missing, or does not match a turned-on language, the storefront may use ?language=... from initial-route or the URL hash (when that value matches a turned-on language).
Default language in Admin Portal — If neither of the above resolves to a turned-on language, the storefront uses your organization's default language.

Important: Most websites and website builders default to lang="en". In that case, the storefront displays English, even if you also pass another language in the embed code. To show another language, change the page lang attribute (for example lang="sv-SE" for Swedish).

The storefront can display a language only after you translate it and turn it on in your Admin Portal. Translate and localize your storefront →

Avoid duplicate Google Tag Manager initialization

If your website already loads GTM, add:

<growth-hub slug="org-slug" skip-gtm-initialization="true"></growth-hub>

Show a specific page on load

You can show a specific page when the storefront loads; for example, make it go straight to your resources listing:

<growth-hub slug="org-slug" initial-route="resources"></growth-hub>

Set a custom font size

You can 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 for internal navigation. Everything before the # belongs to your website; everything after it is handled by Growth Hub. Growth Hub uses the part of the URL after # for its own navigation (for example #/your-org-slug/dashboard). On any page where the storefront is embedded, avoid using hash links for in-page jumps (such as #rooms or #booking). Those links change the same hash Growth Hub relies on and can reload the storefront or show the wrong content. To scroll to a section on the same page, use your website builder’s scroll/anchor tools without changing the URL hash, or ask your developer to scroll with JavaScript (for example scrollIntoView) instead of an href="#…".

URL structure examples

Embedded on a sub-page:

https://your-site.com/coworking/#/org-slug/dashboard

https://your-site.com/coworking/ – Your website page
#/org-slug/dashboard – Growth Hub route

Embedded on the root page:

https://your-site.com/#/org-slug/resources

With filters applied:

https://your-site.com/shop/#/org-slug/dashboard?type=meeting_room&listingType=resource&minPrice=0&maxPrice=500

Available filter parameters:

type – Resource type (e.g., meeting_room)
listingType – Resource or plan
minPrice / 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.

The language query parameter is valid in the URL hash as well as in initial-route. For example, ?language=sv-se works in both places. The lang attribute on the host page's <html> tag overrides that parameter whenever the attribute names a language you turned on, so set the page language rather than the hash. Set the interface language ↑

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, fix the issues flagged in the report first.
Common culprits include unoptimized images, too many third-party scripts, render-blocking CSS/JS, and missing 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:
1. Right-click anywhere on the page.
2. Select Inspect.
3. Go to the Console tab.
4. Share any red error messages with our support team if you need help.

The storefront shows the wrong language

The storefront takes its language from the page it sits on first, so a mismatch usually starts there. Check these things in order.

Confirm the language is translated and turned on in your Admin Portal. The storefront cannot display a language that is not turned on.
Check the lang attribute on the <html> tag of the page where the storefront is embedded. If it matches a turned-on language, that value wins — including when a site language switcher updates it.
Change the page language if it is set to English (or another language you did not intend). Many websites default to lang="en", and that overrides a language value passed in the embed code. Reload the page after you save the change.
If the page has no lang attribute (or it does not match a turned-on language), confirm any language query parameter matches a turned-on language. Otherwise, the storefront falls back to your Admin Portal default language.

The storefront looks broken on mobile

Make sure you've added the recommended CSS (see above ↑).
Verify that your website itself is mobile-responsive. If your website doesn't adapt to smaller screens, the embedded component will be affected too.

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.

[Growth Hub] Embed the Storefront into Your Website (Step 2)