How to Embed Shoppable Video in Custom HTML Sections
Add the beyondRegular loader script to your site head, then drop a data-bn-preset div in any Custom HTML block. Exact snippets and menu paths inside.
Paste the beyondRegular loader script once in your site head, then drop a widget div with a data-bn-preset attribute anywhere inside a Custom HTML section. The script finds the div, matches it to the preset you configured in the dashboard, and renders the shoppable video where the div sits. No iframe wrapper, no template edits beyond the section itself.
Add the loader once, sitewide
The loader is a single async script. You add it once, not per section. In most CMS platforms (Wix, Squarespace, Webflow, WordPress, Duda, Shopify custom themes), open the site settings and paste this inside the head tag:
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
In Wix go to Settings, then Custom Code, then Add Custom Code, place in Head, apply to All pages. In Squarespace go to Settings, Advanced, Code Injection, Header. In Webflow open Project Settings, Custom Code, Head Code. In WordPress use a header snippet plugin or your theme's header.php. The script is around 26 KB gzipped, async, and does not block LCP.
Drop the widget div in the Custom HTML block
Open the page or section where you want the video. Add a Custom HTML, Embed HTML, or Code block. Paste only the div, not the script again:
<div data-bn-preset="PRESET_ID"></div>
Replace PRESET_ID with the preset ID from your beyondRegular dashboard. Open dashboard.itsbeyondregular.com, go to Widgets, click the widget you built (carousel, vertical carousel, bubble, or reel feed), and copy the ID shown under Install. The loader scans the page for any div with data-bn-preset and mounts the matching widget inline. The div takes the width of its parent container, so size it with normal CSS on the surrounding section.
Multiple widgets on one page
You can place several widget divs on the same page. Each one needs its own data-bn-preset value. Example inside a Custom HTML section:
<div data-bn-preset="home_hero_reel"></div> <div data-bn-preset="pdp_carousel_shoes"></div>
The loader mounts each one independently. Product tags inside the frame link to your existing PDPs, and add to cart uses your native cart. Checkout stays on your own gateway, Razorpay, PayU, Cashfree, CCAvenue, Shopify Payments, or Stripe. Prices come from your store catalogue, so Indian shoppers see INR automatically. No extra config in the HTML.
Troubleshoot: widget not rendering
Most common cause: the loader script is not in the site head. Open the page, view source, and search for embed.js. If it is missing, re-add it to the global head, not just the section.
Second most common: the data-bn-preset value is wrong or the preset is set to Draft. Go to the dashboard, Widgets, and confirm the ID matches and status is Published.
Third: the Custom HTML block stripped your div. Some builders (older Squarespace, restricted Wix plans) sanitise unknown attributes. Wrap it in a plain div parent, or switch to an Embed or Code block rather than a rich text block.
Fourth: content security policy on your site blocks itsbeyondregular.com. Add www.itsbeyondregular.com to your script-src and connect-src allowlist.
Common questions
Do I need to add the script tag inside every Custom HTML section?
No. The <script async src="https://www.itsbeyondregular.com/embed.js"></script> tag goes in the site head one time only. Every widget div on every page uses that same loaded script. If you paste the script tag inside multiple Custom HTML sections, the browser will fetch and evaluate it more than once, which wastes bandwidth and can cause duplicate mount attempts. The only thing that goes inside each section is the div with data-bn-preset. Think of the script as a shared runtime, and the div as a placeholder that tells the runtime where to render.
Can I control the widget size or aspect ratio from the Custom HTML block?
The widget fills the width of its parent container and picks aspect ratio from the format you chose in the dashboard. Horizontal carousels are landscape, vertical carousels and reel feed are 9:16, and the floating bubble is fixed size and pinned to a corner. To constrain width, wrap the div in a container with your own CSS, for example <div style="max-width:720px;margin:0 auto"><div data-bn-preset="PRESET_ID"></div></div>. Do not set a fixed pixel height on the widget div itself, the widget calculates its own height based on the format.
How does add to cart work when the widget is embedded in a plain HTML section?
Product tags inside the video link to the PDP URL that you mapped in the dashboard when you tagged the product. Clicking a tag either opens the PDP in the same tab or, if you enabled quick add, calls your store's native cart endpoint. On Shopify that means /cart/add.js. On custom stacks that means whatever cart route you gave us during setup. Checkout always happens on your existing gateway (Razorpay, PayU, Cashfree, CCAvenue, Shopify Payments, Stripe). beyondRegular never holds the transaction, so refunds and taxes stay in your existing flow.