How to Create a Floating Video Widget
Step-by-step setup for a shoppable floating bubble widget: dashboard preset, embed.js loader, mount div, Shopify app embed, and troubleshooting.
A floating video widget is a persistent bubble that sits in the corner of your storefront and expands into a shoppable video player on click. To ship one, load embed.js in your theme, place a div with data-bn-preset pointing at a preset configured as "floating" in the beyondRegular dashboard, and pick the anchor corner. The bubble streams a looped preview, opens on tap, and lets shoppers add tagged products to your native cart.
Create the floating preset in the dashboard
Open the beyondRegular dashboard and go to Widgets, then click New Widget. Choose Floating Bubble as the format. Give the preset a name you will recognise later, like homepage-floater, because that name is not shown to shoppers, only to you.
Upload the video you want in the bubble, or pick one from your library. Tag products directly on the frame using the Tag Products panel. Every tag maps to a SKU in your store catalogue, so prices and stock stay live from Shopify, WooCommerce, or whichever catalogue you connected during onboarding.
Set the anchor corner (bottom-right is the default), the bubble size, and whether the preview loops muted. Save. Copy the PRESET_ID shown at the top of the preset page, you will paste it into your theme in the next step.
Install embed.js once per site
The loader script only needs to be present once on any page that renders the widget. Add it to your global layout, right before the closing body tag, so it does not delay LCP.
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
The script is around 26 KB gzipped, async, and lazy-loads the video after first paint. If you are on Shopify, you do not need this snippet at all. Open Online Store, Themes, Customize, then App embeds in the left rail, and toggle beyondRegular on. The theme app embed injects embed.js for you across every template.
Place the floating widget div
A floating bubble does not need to sit inside a specific section, it positions itself with fixed CSS relative to the viewport. Drop the mount div anywhere in your layout, but keep it in a template that renders on every page you want the bubble to appear on, like theme.liquid or your global footer partial.
<div data-bn-preset="PRESET_ID"></div>
Replace PRESET_ID with the id you copied from the dashboard. That is the only attribute the loader needs. The corner, size, and open behaviour all come from the preset config, so you can change them later without editing theme code.
Verify the bubble and tagged add-to-cart
Open the storefront in an incognito window. The bubble should fade in within a second of first paint. Click it, the player expands, tags appear over the frame, and tapping a tag should either add the SKU to your native cart or open the PDP, depending on how you configured the tag action.
Check that the price shown on the tag matches your catalogue. Indian shoppers should see INR pulled from your store. Checkout still runs on your own gateway, Razorpay, Shopify Payments, Stripe, PayU, CCAvenue, or Cashfree. beyondRegular never touches payment.
If you are on the Pro plan, confirm the Shopify web pixel is firing in Customer Events so attribution lands in your dashboard.
Troubleshoot a bubble that will not show
Ranked by how often we see them in support: 1) The theme app embed is off. In Shopify, open Customize, App embeds, and toggle beyondRegular on. Save. 2) The PRESET_ID in the div does not match the one in the dashboard, or the preset is still in Draft. Publish the preset and copy the id again. 3) embed.js is blocked by a strict CSP. Add www.itsbeyondregular.com to your script-src and connect-src.
4) The mount div sits inside a section that is not rendered on the current template. Move it to theme.liquid. 5) An ad blocker is stripping the loader, test in a clean browser.
Common questions
Can I show the floating bubble only on specific pages?
Yes. The widget renders wherever the mount div is present, so page targeting is a theme-level decision. On Shopify, wrap the div in Liquid conditions, for example {% if template contains 'product' %}<div data-bn-preset="PRESET_ID"></div>{% endif %} to show it only on product pages. On a custom stack, gate the div behind your router. If you want the bubble everywhere except checkout, drop it in theme.liquid and exclude checkout templates, since Shopify checkout runs on a separate layout that theme code does not touch.
Does the floating widget slow down my store?
No. embed.js is about 26 KB gzipped and loads async, so it does not block LCP or first paint. The video itself is lazy-loaded, the preview only starts streaming after the browser is idle, and the full player is not fetched until a shopper taps the bubble. If you are worried about Core Web Vitals, run a Lighthouse pass with the bubble on, then off, on the same page. In our own testing on Shopify Dawn, LCP does not move outside noise, and CLS stays at zero because the bubble is position: fixed.
Can I change the bubble corner or size without editing my theme?
Yes. The anchor corner (bottom-right, bottom-left, top-right, top-left), the bubble diameter, the open animation, and whether the preview auto-plays muted are all preset-level settings in the beyondRegular dashboard. Open the preset, change the values under Appearance, and save. The change goes live on the storefront within a few seconds because the loader pulls fresh preset config on each page load. You never need to redeploy your theme or bump a version, and the data-bn-preset id in your div stays the same.