Install embed.js on Any Website
Two lines of HTML to install a shoppable video widget on any site. Copy the script tag, drop the preset div, done. Works on any stack.
Add two lines to your site: one script tag for embed.js and one div with your preset id. Paste the script once before </body>, then drop the div wherever you want the widget to appear. The widget loads async, pulls your preset config, and renders. No build step, no framework lock-in.
The two lines you paste
Copy these into your site's HTML. The script goes once per page, ideally right before the closing body tag. The div goes wherever the widget should render on the page.
<script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="YOUR_PRESET_ID"></div>
Replace YOUR_PRESET_ID with the id shown on your preset in the dashboard. The script is async, so it will not block LCP. You can include the script tag in a shared header or footer partial. The div is a plain placeholder, style it with margin or a wrapper if you need spacing. That is the whole install.
Where to put it on common stacks
WordPress: open your theme's footer.php and paste the script before </body>. For the div, add a Custom HTML block on the page or post where you want the widget. Do not paste the script inside the block, keep it in the theme.
Webflow: Project Settings, Custom Code, Footer Code, paste the script tag. Then on any page, drop an Embed element and put the div in it.
Framer: Site Settings, Custom Code, End of body tag, paste the script. Use an Embed component for the div.
Next.js or React: put the script in app/layout.tsx using next/script with strategy="afterInteractive", then render the div inside any component. Do not import embed.js as a module.
Multiple widgets and picking a format
The format (horizontal carousel, vertical carousel, floating bubble, reel feed) is set on the preset itself in the dashboard, not in the HTML. Change the format there and the same div re-renders in the new layout.
You can drop more than one widget on a page. Use a separate div per preset:
<div data-bn-preset="preset_home_hero"></div> <div data-bn-preset="preset_home_below_fold"></div>
Include the script tag only once per page even if you have five widgets. For a floating bubble, place the div anywhere in the body, the bubble positions itself fixed. For inline formats, the widget takes the width of its parent container.
Shopify merchants: use the app embed instead
If you are on Shopify, do not paste the script. Install the beyondRegular app from the Shopify App Store, then in your theme editor go to App embeds and toggle beyondRegular on. That injects embed.js for you across the storefront.
To place a widget on a page, add the beyondRegular block from the theme editor's Add block menu on any section, or paste the same <div data-bn-preset="YOUR_PRESET_ID"></div> into a Custom Liquid block. Product prices, variants, and INR display come from your Shopify catalogue automatically. Checkout stays on Shopify Payments or whatever you already have configured.
Troubleshoot: widget not showing
Most common: wrong preset id. Open the browser console. If you see "beyondRegular: preset not found", the id in data-bn-preset does not match a preset on your account.
Second most common: script blocked. Check the Network tab for embed.js, status should be 200. If it is 4xx or blocked by a Content Security Policy, add www.itsbeyondregular.com to your script-src and connect-src directives.
Third: the div is inside a container with display:none or height:0. The widget renders but you cannot see it. Fourth: two script tags on the same page can double-init, keep it to one. Fifth: caching, hard reload with Ctrl+Shift+R after pasting.
Common questions
Do I need to host embed.js myself or add npm packages?
No. Load it directly from https://www.itsbeyondregular.com/embed.js with the async attribute. Do not download the file and self-host, you will miss updates and bug fixes. Do not install anything from npm, there is no package to add. The script is around 26 KB gzipped and pulls preset config over HTTPS after it loads. If your CSP blocks third-party scripts, allow www.itsbeyondregular.com in script-src and connect-src. That is the full network surface.
Can I change the widget format without editing my site's HTML?
Yes. Format (horizontal carousel, vertical carousel, floating bubble, reel feed), video order, product tags, and styling all live on the preset in the beyondRegular dashboard. Your site only references the preset id via data-bn-preset. Swap the format in the dashboard, save, and the change picks up on the next page load. No redeploy, no HTML edit. This is why the install is two lines and stays two lines regardless of how you evolve the widget.
Does embed.js slow down my site or hurt Core Web Vitals?
The script is loaded async, so it does not block HTML parsing or first paint. Widget content renders after the main page is interactive, so LCP is not affected by embed.js itself. Videos inside the widget lazy-load, only the visible thumbnail is fetched on first paint. If you place a widget above the fold and it becomes the LCP element, expect it to behave like any other image or video hero. Keep the script tag single-instance per page to avoid duplicate init cost.