Integrate with a Custom or Headless Storefront
Install beyondRegular shoppable video on any custom or headless storefront. Paste one script, add a preset div, ship in minutes. No checkout changes.
Drop the embed script into your site head, then place a div with `data-bn-preset` where the widget should render. That is the whole install for any custom or headless storefront. Checkout stays on your existing gateway, so no cart or payment changes are needed on your side.
Paste the embed script
Add the loader once, ideally in your site `<head>` or root layout. It is async, around 26 KB gzipped, and will not block LCP. One script covers every widget on the page.
```html <script async src="https://www.itsbeyondregular.com/embed.js"></script> ```
On Next.js or Remix, put this in your root layout so it loads on every route. On Astro or Nuxt, use the site-wide layout file. You only need it once per page load, even if you render multiple widgets. The loader deduplicates itself if it gets injected twice.
Place a widget slot
Wherever you want a widget to appear, drop a div with `data-bn-preset` set to the preset ID from your beyondRegular dashboard. That single attribute picks the format (horizontal carousel, vertical carousel, floating bubble, or reel feed) and the videos you already tagged.
```html <div data-bn-preset="PRESET_ID"></div> ```
The preset ID lives under Presets in your dashboard, next to each saved widget. Swap layouts or swap the video set by editing the preset, no code redeploy needed. For a floating bubble, place the div once near the end of `<body>`; it positions itself.
Framework notes
React and Next.js: render the div in JSX exactly as shown. Do not wrap the script in `next/script` with `beforeInteractive`; use the plain `<script async>` tag in the root layout, or `next/script` with `strategy="afterInteractive"`. The widget mounts itself once it sees the div in the DOM.
Vue, Svelte, Astro, and plain HTML work the same way. For SPA route changes, the loader watches the DOM and mounts new preset divs when they appear, so client-side navigation does not need a manual re-init call.
Headless Shopify (Hydrogen, custom Next.js on Shopify): use the same script and div. Shopify Payments still handles checkout on your storefront domain; product prices come from your Storefront API catalogue and INR is shown automatically to Indian shoppers.
Checkout and product data
beyondRegular does not touch your checkout. When a shopper taps buy, they land on your existing gateway: Razorpay, PayU, CCAvenue, Cashfree, Shopify Payments, or Stripe. You keep your own PCI scope, refunds flow, and analytics.
Product prices and titles are pulled from the store catalogue you connected during onboarding. If you are fully headless, you connect the same catalogue source (Shopify Storefront API, custom feed, or a CSV import from the dashboard). Update prices in your store, the widget picks them up on the next cache refresh.
Troubleshoot
Widget div is empty: check the preset ID matches your dashboard exactly, and confirm `embed.js` returned 200 in the network tab. A CSP that blocks `www.itsbeyondregular.com` is the second most common cause; add it to `script-src` and `connect-src`.
Wrong currency: shopper IP resolves to India for INR, everything else falls back to your catalogue currency. If you proxy traffic through a CDN that strips the client IP, forward `x-forwarded-for` so geolocation works.
Widget shows on refresh but not after client-side navigation: your router is unmounting the div without letting the observer see the new one. Ensure the div is part of the route's rendered output, not injected imperatively after mount.
Common questions
Do I need a backend integration or webhook?
No. The widget is fully client-side. The script pulls videos, tags, and prices from beyondRegular; product catalogue data comes from the store connection you set up in the dashboard. Checkout happens on your existing gateway with no code changes on your side. If you want attribution on Shopify, turn on the Pro plan web pixel from the dashboard. For custom storefronts, standard UTM tags on the product links you tag inside the widget are enough to attribute revenue in your own analytics.
Can I lazy-load the widget below the fold?
Yes. The loader is already async and will not block LCP, but if you want to defer further, wrap the preset div in an IntersectionObserver and only render it when it scrolls into view. The script itself can stay in `<head>`; it does nothing until it sees a preset div in the DOM. For reel feeds on mobile, keep them below the hero so first paint stays fast. Do not put the script inside the div, put it once at the page level.