Widget Not Loading: Diagnosis Checklist
Widget blank on your site? Walk through the exact checks: script tag, preset ID, console errors, CSP, and ad blockers. Fix beyondRegular embed issues in minutes.
If your beyondRegular widget is not loading, check four things in order: the script tag is present in <head>, the mount div has the correct data-bn-preset ID, the browser console shows no CORS or 404 errors, and no ad blocker or CSP rule is blocking embed.js. Nine times out of ten it is a missing script tag or a typo in the preset ID.
Confirm the two required tags are on the page
The widget needs exactly two things in your HTML. The loader in <head> and a mount div where the widget should render. Open View Source (not Inspect, which shows the hydrated DOM) and search for embed.js. If it is missing, paste this into your theme header: <script async src="https://www.itsbeyondregular.com/embed.js"></script>
Then confirm the mount div exists on the page you are testing, with a valid preset ID: <div data-bn-preset="YOUR_PRESET_ID"></div>. The attribute name is data-bn-preset, not data-preset or data-bn-id. A typo here is the single most common cause of a blank spot on the page.
Check the browser console for the real error
Open DevTools, go to Console, hard reload with Ctrl+Shift+R. Look for lines starting with [bn] or referencing embed.js. Four errors show up most often and each has a clear fix.
A 404 on embed.js means the script tag is wrong. It must be https://www.itsbeyondregular.com/embed.js exactly, with https and www. A Preset not found error means the ID in data-bn-preset does not match any preset in your dashboard, so copy it again from the Embed tab.
CORS or mixed-content warnings mean your page is served over http while embed.js is https, so serve the page over https. Refused to load the script because it violates the following Content Security Policy means your site has a CSP that blocks itsbeyondregular.com.
Fix Content Security Policy blocks
If your site sets a CSP header (common on Shopify Plus, Webflow enterprise, or custom Next.js sites), you have to allowlist our domain. Add itsbeyondregular.com to script-src, connect-src, and img-src.
Example CSP additions: script-src 'self' https://www.itsbeyondregular.com; connect-src 'self' https://www.itsbeyondregular.com; img-src 'self' https://www.itsbeyondregular.com data:;
If you use frame-src for any reason, add https://www.itsbeyondregular.com there too. After changing the header, hard reload. CSP is enforced on first paint, so a normal refresh may serve a cached policy.
Rule out ad blockers and privacy extensions
uBlock Origin, Brave Shields, and some corporate DNS filters treat any third-party script as tracking and block it. Test in a clean incognito window with all extensions disabled. If the widget appears there, the problem is client-side, not your install.
This matters less for real shoppers (most do not run aggressive blockers on mobile), but it does trip up merchants QA-ing their own store. If you need to whitelist for internal testing, add itsbeyondregular.com to your blocker's trusted sites list. Do not add tracking-prevention overrides site-wide; just this domain.
Shopify-specific checks
On Shopify, you install through the theme app embed, not by pasting the script tag. Go to Online Store, Themes, Customize, then App embeds in the left rail. Toggle beyondRegular on and Save. If the toggle is off, the loader will not inject.
To place the widget on a specific page or section, add a beyondRegular block from the section picker, or paste the mount div into a Custom Liquid block: <div data-bn-preset="YOUR_PRESET_ID"></div>. Preview the storefront in an incognito window; the theme editor preview does not always fire embeds. Web pixel attribution needs the Pro plan and the Customer events pixel enabled under Settings.
Common questions
The widget works on desktop but not mobile. What is going on?
Almost always a layout issue, not a load issue. Open the page on mobile with remote DevTools (chrome://inspect on Android, Safari Web Inspector on iOS) and confirm the mount div has non-zero height. Common culprits: a parent container with overflow: hidden and a fixed height too small for the widget, or a CSS rule like display: none @media (max-width: 768px) on the section holding the mount div. The widget itself is responsive down to 320px. If the div renders but the video does not autoplay, that is expected on iOS Low Power Mode.
I pasted the script but nothing shows up and there are no console errors. What next?
Two silent-failure modes to check. First, the mount div may be inside a component that renders after embed.js has already scanned the DOM. Our loader watches for late-inserted nodes, but if your framework replaces the entire body on route change (some SPAs do), call window.bnRegular?.rescan() after navigation. Second, the preset may be paused or unpublished. Go to your dashboard, open the preset, and confirm status is Live. Draft and paused presets return an empty response instead of a 404.
Does the widget block my Largest Contentful Paint score?
No. The script tag uses async, so the browser downloads it in parallel and never blocks HTML parsing. The bundle is around 26 KB gzipped, well under our 30 KB budget. The widget also defers video decoding until the frame is in the viewport, so a widget below the fold costs nothing on initial paint. If Lighthouse flags it, check that you kept async on the script tag and did not add defer or move it into <body>. The correct placement is <head>, async, no other attributes.