Oddyne Sportsbook — Integration Docs

Appearance

Embedding ​

Embedding is the final step of the integration, and it's deliberately trivial: you take the url that Launch returned and drop it into an <iframe>.

Embed the URL we return

The embed URL is built by us and returned from Launch. It already carries siteId, token, lang, theme, view, and device. You do not construct it, and you do not append your own query parameters — embed the url verbatim.

The minimal embed ​

Using the url from the Launch response:

html
<iframe
  src="https://<EMBED_HOST>/?siteId=<YOUR_SITE_ID>&token=<jwt>&lang=en&theme=classic&view=live&device=desktop"
  style="width:100%; height:100%; border:0;"
  allow="fullscreen"
  title="Oddyne Sportsbook">
</iframe>

In practice you inject the value server-side — the src is whatever url the Launch call returned for this player session. The live demo is a working example of the embedded sportsbook.

Where device and view come from ​

device and view are set in your Launch request, and we bake them into the returned url:

  • device — mobile, desktop, or terminal. Selects the layout the iframe renders.
  • view — live, prematch, or tickets. The initial screen the player lands on.

To change either, change the corresponding field in the Launch call and embed the new url — not by editing the URL yourself.

Sizing & responsiveness ​

The sportsbook UI is fully responsive. Your job is to give the iframe a sized container and let it fill it:

  • Set the iframe to width:100%; height:100%.
  • Give the container a real width and height.

Full-viewport wrapper ​

html
<div style="position:fixed; inset:0;">
  <iframe
    src="<URL_FROM_LAUNCH>"
    style="width:100%; height:100%; border:0;"
    allow="fullscreen"
    title="Oddyne Sportsbook">
  </iframe>
</div>

Fixed-height panel ​

If the sportsbook is one section of a larger page, give the wrapper a fixed height (or an aspect ratio):

html
<div style="width:100%; height:80vh;">
  <iframe
    src="<URL_FROM_LAUNCH>"
    style="width:100%; height:100%; border:0;"
    allow="fullscreen"
    title="Oddyne Sportsbook">
  </iframe>
</div>

TIP

A common mistake is an iframe with height:100% inside a container that has no height — it collapses to zero. Make sure the container height is explicit.

Internal navigation ​

Keep it simple: the app manages its own routing inside the frame. You only set the initial src to the launched url. Once loaded, navigation between sports, matches, and markets happens within the iframe — you don't construct or track deep-link URLs for internal views.

Full example page ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Site — Sportsbook</title>
    <style>
      html, body { margin: 0; height: 100%; }
      .sportsbook { position: fixed; inset: 0; }
    </style>
  </head>
  <body>
    <div class="sportsbook">
      <!-- src is the `url` returned by POST /api/launch, injected server-side -->
      <iframe
        src="https://<EMBED_HOST>/?siteId=<YOUR_SITE_ID>&token=<jwt>&lang=en&theme=classic&view=live&device=desktop"
        style="width:100%; height:100%; border:0;"
        allow="fullscreen"
        title="Oddyne Sportsbook">
      </iframe>
    </div>
  </body>
</html>

Integration documentation for the Oddyne Sportsbook.

© Oddyne