Embedding OddsRelay widgets

One host element, one script tag. The bundle is a single file that carries every widget, auto-mounts each [data-or-widget] element on the page, and renders inside a shadow root so your CSS cannot break it and its styles cannot leak out. It is 54 kB gzipped (194 kB raw) and loads no webfont, no image file and no iframe.

The standard embed

<div data-or-widget="oddsmatcher"
     data-or-region="uk"
     data-or-key="or_live_YOUR_WIDGET_KEY"></div>

<script src="https://oddsrelay.io/widgets/v1/oddsrelay-widgets.js"
        crossorigin="anonymous" async></script>

To preview and theme a specific widget, use the widget library. Each page emits the exact snippet for the configuration you have on screen.

Three URLs, one artefact

The same build is served on three paths. Which one you use is a choice about who controls when your embed changes.

URL	Cache-Control	Can carry integrity	When to use it
/widgets/v1/oddsrelay-widgets.js	public, max-age=300, stale-while-revalidate=86400	No	The default, and what every snippet on this site emits. Fixes and new widgets reach your pages with no action from you.
/widgets/v/<version>/oddsrelay-widgets.js	public, max-age=31536000, immutable	Yes	For a security review that requires a verifiable, unchanging artefact. You choose when to move.
/widgets/oddsrelay-widgets.js	public, max-age=300, stale-while-revalidate=86400	No	The original path, byte-identical to v1 and served permanently. Nothing to change if you are already on it.

Please do not self-host or proxy the bundle

A copy on your own CDN stops receiving fixes, and we cannot tell what version you are running when something goes wrong. If your infrastructure requires a fixed artefact, pin the version below rather than mirroring the file. You get the same immutability and we can still see which version you are on.

What the cache policy actually does

The v1 and legacy lanes are cached for five minutes and then served stale for up to a day while a fresh copy is fetched in the background. In practice a repeat visitor gets the bundle from their own cache with no network wait at all, and a first-time visitor pays one request that then serves every widget on the page. A fix is never more than the TTL away from every embed.

The pinned lane is cached for a year and marked immutable, which means the browser will not revalidate it even on a hard reload. That is safe only because the bytes at a pinned URL never change: our build refuses to overwrite a version that has already been cut. It is also the reason a pinned URL is the only one that can carry an integrity attribute.

Pinning and Subresource Integrity

The current pinned version is 0.3.0. Its hash is generated by the same build step that produces the bytes, so the value below cannot drift from what the URL serves.

Pinned to v0.3.0, with SRI

<script src="https://oddsrelay.io/widgets/v/0.3.0/oddsrelay-widgets.js"
        integrity="sha384-RRoSnG/PesQOA/WRYhKhX2pP/HFHKn06GPOD6Xr168t0riHLinn+AcGue8gQePOp"
        crossorigin="anonymous" async></script>

crossorigin="anonymous" is required, not optional. Without it the browser treats our script as opaque: the integrity attribute is silently ignored, and every JavaScript error your monitoring ever records from us collapses to the string "Script error." with no message, stack or line number. Keep it on the unpinned snippet too, for the error reporting alone.

Pinning is a real trade

A pinned embed never changes, which is the point, and it also means fixes never reach it until you change the URL yourself. Pin if a review requires it; otherwise stay on v1.

window.OddsRelay.version reports the exact version running on a page, so you can check a pinned embed from your own console without asking us.

Answers a security or privacy review will ask for

Question	Where the answer lives
Which CSP directives does the script need?	Content-Security-Policy
How should we categorise it in our consent manager?	Consent managers
What does it store on the visitor's device, and why?	Storage & privacy
What can change under us, and with how much notice?	Versioning policy
It does not render on our platform. What now?	Install & troubleshooting