Content Security Policy and Embedding Troubleshooting
Fix Content Security Policy errors, blocked embed.js loads, and iframe issues so beyondRegular video widgets render on your store.
Add www.itsbeyondregular.com to your script-src, connect-src, img-src, media-src, and frame-src directives, then confirm the loader tag and preset div are both on the page. If your CSP is set by a proxy or CMS, whitelist the same host there. On Shopify, enable the theme app embed instead of pasting the script tag.
Paste the loader and preset div exactly
The widget needs two things on the page. The async loader tag, and one target div per placement. Put the script anywhere in the document, put the div where you want the widget to render.
```html <script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="PRESET_ID"></div> ```
Replace PRESET_ID with the value from your dashboard. If you have multiple placements on the same page, use multiple divs, each with its own data-bn-preset. The loader is idempotent, adding the script twice will not double-load. Do not self-host embed.js, the file version-pins to your preset config and stale copies will render nothing.
Fix Content Security Policy blocks
If the browser console shows "Refused to load the script" or "Refused to connect", your CSP is blocking beyondRegular. Add www.itsbeyondregular.com to the directives that matter. Videos are served from the same host through R2, so media-src needs it too.
``` script-src 'self' https://www.itsbeyondregular.com; connect-src 'self' https://www.itsbeyondregular.com; img-src 'self' https://www.itsbeyondregular.com data:; media-src 'self' https://www.itsbeyondregular.com blob:; frame-src 'self' https://www.itsbeyondregular.com; ```
If your CSP uses nonces or strict-dynamic, the async loader still works because embed.js injects its children under its own origin, not inline. Do not add unsafe-inline just for beyondRegular, it is not required. If a WAF or reverse proxy rewrites headers, whitelist the host there as well, browser CSP is enforced on the merged header set.
Common failures, in order of frequency
1. CSP blocks the loader. Console shows a Refused message. Fix the directives above. 2. Preset div missing or the data-bn-preset value is a typo. The loader runs but finds nothing to mount. Copy the ID from the dashboard, do not retype it.
3. Shopify theme app embed disabled. Do not paste the script tag on Shopify, go to Online Store, Themes, Customize, App embeds, and toggle beyondRegular on. 4. Ad blockers or privacy extensions on the merchant's own browser hide the widget in preview. Test in a clean profile or an incognito window with extensions disabled.
5. X-Frame-Options set to DENY at the store level breaks the checkout handoff for gateways that use iframe redirects. Use frame-ancestors in CSP instead, or set X-Frame-Options to SAMEORIGIN. 6. Mixed content, the page is https but a legacy tag forces http, which cancels the embed.js request. Serve the whole page over https.
Verify the install in the browser
Open DevTools, Network tab, filter by itsbeyondregular. You should see embed.js return 200, one config request return 200, and video segments stream as the shopper scrubs. If embed.js is 200 but the widget is invisible, inspect the target div, it should now contain a shadow root, that is where the widget lives.
```js document.querySelector('[data-bn-preset]').shadowRoot ```
If shadowRoot is null, the loader did not run against that div. Check the data-bn-preset value exists in your dashboard, and confirm the div is in the DOM before the loader fires, or after, order does not matter, but the div must not be injected inside another shadow root your theme controls.
Common questions
Do I need to add every subdomain of itsbeyondregular.com to my CSP?
No. The widget, config API, and video assets all serve from www.itsbeyondregular.com, so that single host is enough for script-src, connect-src, img-src, media-src, and frame-src. If you later use a custom domain for the embed, swap that domain in place of www.itsbeyondregular.com, but you cannot mix and match, one host per install. Do not add wildcards like *.itsbeyondregular.com, that widens your CSP more than needed and some strict CSP evaluators reject wildcards outright.
Why does the widget work on desktop but not inside my mobile app webview?
Native webviews often ship a locked-down CSP or block third-party cookies by default. Check the webview config for allowsInlineMediaPlayback, mediaPlaybackRequiresUserAction, and mixed-content settings. For iOS WKWebView, set allowsInlineMediaPlayback to true so videos play in the frame instead of forcing fullscreen. Also confirm the webview loads pages over https, embed.js will refuse to load on a plain http host. If your webview strips third-party requests, add the itsbeyondregular.com host to its allowlist the same way you would for a browser CSP.
My checkout redirect fails after the shopper taps a product in the widget. What is wrong?
The widget hands the shopper to your existing checkout, it does not process payment itself. If the redirect stalls, your gateway is being blocked by frame-ancestors or X-Frame-Options at the store level. Razorpay, PayU, CCAvenue, Cashfree, Shopify Payments, and Stripe all need to render their own checkout, either as a top-level redirect or inside an iframe. Set frame-ancestors 'self' plus the gateway host you use, and remove X-Frame-Options DENY. The widget itself does not open the checkout in a frame, so this is a store-level fix, not a beyondRegular fix.