Online Menu Embed
The Online Menu Embed lets you show your live product menu on a website you already have — your own WordPress, Wix, Squarespace, or custom site — without sending customers away to your hosted storefront. You copy one small snippet of code, paste it into your page, and your products, prices, and photos appear right there. When your inventory changes, the embedded menu updates automatically.
You will find it under Online Menu in the admin panel.
The Online Menu Embed page is available once you have turned on either the Online Menu or the Storefront feature. If neither is on, the admin will send you to Settings to enable one. See Feature Flags.
Menu embed vs. shoppable embed
There are two flavours of embed, and the difference is simply whether customers can buy from it:
| Embed | Snippet | What customers can do |
|---|---|---|
| Read-only menu (recommended) | data-mode="menu" | Browse products, prices, and photos. No cart. Great for showcasing your catalogue. Works on any website. |
| Shoppable menu | (no data-mode) | Same menu, plus add-to-cart and checkout right on your site. Requires the Storefront (online ordering) to be enabled. |
The read-only menu works even if you never turn on full online ordering — it is purely a live "here's what we carry" display.
Installing the embed
On the Online Menu page, copy the snippet you want and paste it into your website where you'd like the menu to appear.
Read-only menu:
<script src="https://yourstore.trafficstores.ca/shop/embed.js" data-mode="menu" async></script>
Shoppable menu:
<script src="https://yourstore.trafficstores.ca/shop/embed.js" async></script>
The menu renders inside a responsive frame that automatically grows to fit its contents, so it looks at home on any page width.
Every snippet is built to point at your public storefront address (for example yourstore.trafficstores.ca), never the admin site. The page fills this in for you automatically — just copy and paste. If you copy a snippet by hand from somewhere else, make sure it uses your storefront web address.
Where to paste it
| Website builder | How to add it |
|---|---|
| WordPress | Edit the page → add a Custom HTML block → paste the snippet → Update. |
| Wix | Add → Embed Code → Embed HTML → paste the snippet → Publish. |
| Squarespace | Add Block → Code → paste the snippet → Save. |
| React / Next.js | A raw <script> tag written in JSX won't run. Inject it from an effect (or use next/script). See the React example below. |
If your site runs on WordPress or WooCommerce, our dedicated plugin is usually the better choice. It syncs your products natively — pricing, photos, and categories become real pages on your site instead of an embedded frame, so the menu looks fully like part of your site and stays in sync automatically. Download it from the top of the Online Menu page. See Custom Domains for related storefront hosting options.
Section menus (one page per area)
If your store is organized into revenue centers (for example a dispensary counter and a separate accessories or café area), you can embed just one section on each page of your site. Each snippet shows only that revenue center's products.
<script src="https://yourstore.trafficstores.ca/shop/embed.js"
data-mode="menu" data-revenue-center="12" async></script>
The Online Menu page lists a ready-made, copy-and-paste snippet for each revenue center, along with a Preview button so you can see exactly what that section will show before you paste it. (The section menus card appears once you have two or more revenue centers set up.)
See Revenue Centers for how to organize products into sections.
Build a custom embed
The Build a custom embed tool lets you assemble a snippet exactly the way you want it. Pick your options and the snippet — and the live preview — update instantly:
| Option | Choices | What it does |
|---|---|---|
| Revenue center | All, or a single center | Limit the embed to one area of your store. |
| Category | All, or a single category | Show just one product category (e.g. only Edibles). |
| Mode | Read-only menu / Shoppable | Whether customers can add to cart. (Shoppable needs the Storefront enabled.) |
| Theme | Site theme / Dark / Light | Override the look for this embed only — see below. |
The finished snippet appears in the box below the options; copy it with one click. The Live preview panel on the right shows the same embed a visitor would see, so you can confirm it looks right before adding it to your site.
Category-scoped embeds
To show a single category anywhere, add data-category with that category's number:
<script src="https://yourstore.trafficstores.ca/shop/embed.js"
data-mode="menu" data-category="1793" async></script>
Use Choose products & categories on the Online Menu page to control which categories and products are eligible to appear in any embed.
Dark mode for dark sites
By default an embed picks up your storefront's normal theme. If your website has a dark design, a light menu can look out of place. The theme override lets you drop a dark (or light) version of the menu onto that one page — without changing your storefront's global look everywhere else.
Add data-theme to the snippet:
| Value | Result |
|---|---|
| (empty / "Site theme") | Uses your storefront's configured theme. |
bold | Dark menu — pairs well with dark websites. |
clean | Light menu. |
<script src="https://yourstore.trafficstores.ca/shop/embed.js"
data-mode="menu" data-theme="bold" async></script>
The theme only applies to that embed. Your hosted storefront and every other embed keep their own themes.
React / Next.js
A <script> tag pasted directly into JSX will not run — React ignores injected scripts. Instead, add the script from an effect and let it mount into a container div:
import { useEffect } from "react";
export default function ShopMenu() {
useEffect(() => {
const s = document.createElement("script");
s.src = "https://yourstore.trafficstores.ca/shop/embed.js";
s.async = true;
s.dataset.mode = "menu";
document.getElementById("brotherpos-shop")?.appendChild(s);
}, []);
return <div id="brotherpos-shop" />;
}
In Next.js, the cleaner option is the built-in Script component:
import Script from "next/script";
<Script src="https://yourstore.trafficstores.ca/shop/embed.js"
data-mode="menu" strategy="afterInteractive" />
Popup button
Instead of showing the menu inline, you can show a button that opens the menu in a popup:
<script src="https://yourstore.trafficstores.ca/shop/embed.js"
data-display="popup" data-button-text="Browse Our Products"
data-button-color="#3b82f6" async></script>
| Attribute | Purpose |
|---|---|
data-display="popup" | Show a button that opens the menu in an overlay. |
data-button-text | The text on the button. |
data-button-color | The button's colour (hex or rgb). |
Troubleshooting
| Problem | Fix |
|---|---|
| The menu doesn't appear | Make sure you pasted the snippet into an HTML/Code block, not a plain text block. Some builders strip <script> tags from ordinary text areas. |
| It shows the wrong products | Check the revenue center or category number in the snippet, and confirm those categories are set to show on the storefront under Choose products & categories. |
| The "Shoppable" option is greyed out | The shoppable embed needs online ordering. Enable the Storefront in Settings first. |
A <script> tag in my React page does nothing | React won't run injected scripts — use the React/Next.js approach. |
| The menu clashes with my dark site | Add data-theme="bold" for a dark menu. |
Best Practices
- Start with the read-only menu. It's the simplest, works everywhere, and needs nothing beyond the Online Menu feature. Add the shoppable version once you're ready to take orders on your site.
- Use section menus for multi-area stores. Putting one revenue center on each relevant page keeps each page focused.
- Preview before you publish. The live preview and per-section Preview buttons show exactly what customers will see.
- Match your site's look. Use the theme override so the menu blends in with a dark or light design.
- Prefer the WordPress plugin on WordPress/Woo sites for the most native-looking result.
What's Next?
- Embedding the Shop & Cart — the shoppable cart, cross-page cart syncing, and homepage product carousels.
- Storefront — your full customer-facing website.
- Revenue Centers — organize products into sections you can embed separately.
- Custom Domains — connect your own web address.
- Promo Codes — discount codes that work in the embed too.
- Feature Flags — enable the Online Menu or Storefront.