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.

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 →

1. Initial setup

To get started, you must load the Growth Hub script on your website. This script automatically registers the custom <growth-hub> element.

Loading the Web Component

To load the component, include a script tag in your HTML:

HTML

<script src="https://e-commerce.officernd.com/webc"></script>

The script automatically registers the <growth-hub> custom element.
The component is loaded as an Immediately Invoked Function Expression (IIFE).

Web component URL

https://e-commerce.officernd.com/webc

2. Usage examples

You can integrate the component in multiple ways:

Standard HTML
React
Vanilla JavaScript
Any other framework or setup that supports custom elements

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

If you need to load the component dynamically, you can do so via script injection:

JavaScript

// 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);
};

3. 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. This is 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?language=bg-bg`"). Routes should not have a leading slash.
`skip-gtm-initialization`	boolean	Optional	`false`	When set to true, 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 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>

4. Routing and deep linking

URL structure when using the Growth Hub web component

The Growth Hub web component uses a hash-based URL (the part after #) to handle its internal navigation.

Everything before the # belongs to the parent website, and everything after the # is handled by the Growth Hub app itself.

Example 1: Embedded on a sub-page of the parent site

https://parent-site.com/on/some/route/#/org-slug/dashboard

https://parent-site.com/on/some/route/ → the parent website
#/org-slug/dashboard → the Growth Hub route (organization dashboard)

Example 2: Embedded on the parent site’s root page

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

The parent site is loaded at the root (/)
Growth Hub displays the Resources page for the given organization

Example 3: Embedded on a custom page with filters applied

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

/your-shop/ → a custom page on the parent website where Growth Hub is embedded
#/org-slug/dashboard → the Growth Hub dashboard for the selected organization
The parameters after ? automatically apply filters:
- type=meeting_room → shows only meeting rooms
- listingType=resource → displays resources (not plans)
- minPrice=0 and maxPrice=500 → limits results to a specific price range

The component automatically syncs with the browser's hash, so users can navigate
using the browser's back/forward buttons, and you can programmatically navigate
by updating window.location.hash.

5. Language selection

The interface language can be set (and changed) using the language query parameter with a language code (for example, en-us, bg-bg, he-il).

The selected language will take effect only if the organization has a published localization for that language.
If no matching localization exists, the organization's default language will be used instead.

Recommended CSS

Apply the following minimal CSS to ensure proper sizing:

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.