How to Show Multiple Video Widgets on One Page
Load embed.js once, then place a data-bn-preset div per widget. Works on any page, Shopify or custom. Mix carousels, bubbles, and reel feeds freely.
Yes, you can render as many beyondRegular widgets on a single page as you want. Load embed.js once in the head, then drop a separate <div data-bn-preset="PRESET_ID"></div> for each widget where you want it to appear. Each div picks up its own preset, format, and product tags independently.
Load embed.js once, then place multiple mount divs
The script only needs to load one time per page. Put this in the site head or just before the closing body tag:
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
Then place a mount div wherever you want a widget. Each div is independent and reads its own data-bn-preset value. Example with three widgets on one page:
<div data-bn-preset="hero_carousel_01"></div> <div data-bn-preset="pdp_bubble_02"></div> <div data-bn-preset="reel_feed_03"></div> The loader scans the DOM, finds every div with data-bn-preset, and hydrates each one. Order does not matter.
Create each preset in the dashboard first
Every mount div needs a real preset ID that exists in your account. To create one, sign in at itsbeyondregular.com and go to Widgets, then click New widget. Pick the format you want, horizontal carousel, vertical carousel, floating bubble, or reel feed. Add videos, tag products in each frame, then click Save.
Copy the preset ID from the widget detail page. Paste it into the data-bn-preset attribute on the div. Repeat for every widget you want on the page. You can mix formats freely, one page can have a horizontal carousel at the top and a floating bubble at the bottom pointing at different product sets.
Shopify: use one theme app embed, add sections per placement
On Shopify you do not paste embed.js manually. Go to Online Store, Themes, Customize, then App embeds in the left sidebar. Toggle beyondRegular on. That injects embed.js sitewide.
For each widget placement, add a beyondRegular section or block in the theme editor. In the block settings, paste the preset ID for that spot. Save. Each block renders its own div with the correct data-bn-preset, so you get multiple widgets without touching Liquid.
If you want a widget in a spot the block picker does not cover, you can still drop the raw <div data-bn-preset="..."></div> into a Custom Liquid block.
Performance stays fine with multiple widgets
The embed.js payload is around 26 KB gzipped and loads async, so it does not block LCP no matter how many mount divs sit on the page. Videos inside each widget lazy-load when they scroll near the viewport, not on page load.
One script tag hydrates all widgets, so putting five widgets on a page is not five downloads. Only add the script tag once. If you paste it twice by accident, remove the duplicate, otherwise the loader will log a warning about being initialised more than once.
Troubleshoot when a widget does not render
Ranked by how often we see it: 1) The preset ID is wrong or from a different account. Open the dashboard, confirm the ID matches exactly, no trailing spaces. 2) embed.js is missing or blocked. Open DevTools, Network tab, filter for embed.js, confirm 200 response. 3) The div is inside a hidden container with display:none at load time. Move it out, or trigger a rescan by calling window.beyondRegular?.rescan() after you unhide.
4) Duplicate script tags. Keep exactly one <script async src="https://www.itsbeyondregular.com/embed.js"></script> on the page. 5) On Shopify, the app embed toggle is off. Re-toggle it and Save the theme.
Common questions
Can I use the same preset ID on two different divs on the same page?
Yes. If you paste <div data-bn-preset="my_preset"></div> twice, both mount points render the same widget with the same videos and product tags. This is useful when you want the same carousel above and below the fold on a long landing page. Each instance runs independently, so a shopper opening a product tag in one does not affect the other. If you want different content in each spot, create a second preset in the dashboard and use its ID on the second div instead.
Do multiple widgets share one cart or open separate ones?
They share the merchant's cart, because add to cart goes straight to your store's native cart, Shopify, Razorpay, PayU, CCAvenue, Cashfree, or Stripe. beyondRegular does not run its own checkout. If a shopper adds a product from a horizontal carousel at the top and another product from a floating bubble at the bottom, both items land in the same store cart. Checkout happens on your gateway as normal, so attribution and taxes work the way they already do on your store.
Does adding more widgets slow the page down?
Not meaningfully. embed.js is around 26 KB gzipped and loads once with async, so extra mount divs do not trigger extra downloads. Videos inside each widget lazy-load only when they scroll close to the viewport, not at page load. In practice, a page with three or four widgets loads at the same speed as a page with one. If you see a slowdown, check that embed.js is not being loaded twice and that no widget is being force-rendered inside an above-the-fold hero that autoplays every video at once.