SPA Config

The SPA Config page is where you tune the sportsbook's behaviour and look on your site, per brand — without rebuilding the front-end. Change a URL, flip a feature on, restyle the buttons in your brand colours, and players see it on their next page load.

You'll spend time here when:

• Setting up the initial configuration after integration
• Trying out a new visual theme or testing a feature flag
• Updating the URLs that point at the back-end services your SPA talks to (rare, usually during environment moves)

The configuration list

The main view lists every saved configuration, grouped by brand.

Each brand is a collapsible group. Inside the group:

• Id — the unique identifier of a saved configuration. Click the ID to open and edit it.
• Created At — when the configuration was saved.
• Assigned — a green ✓ marks the version currently live. Every other row shows ✗.
• Assign — promote a different configuration to live (a dialog confirms before applying).
• Create config — at the right of the group header, starts a brand-new configuration.

How to switch the live configuration

1. Expand your brand's group.
2. Find the configuration version you want to go live.
3. Click Assign on its row.
4. Confirm in the dialog.

How to roll back

There's no separate "rollback" button — to roll back, just Assign the previous configuration. Saved configurations are versioned, so older ones remain available indefinitely until you delete them. (Cleaning up very old versions is a manual operation; if you accumulate many unused versions, ask your integration manager.)

Creating or editing a configuration

Click + Create config for a new one, or click an existing config's ID to open its editor. All sections are on one page — scroll to find them.

The editor groups settings into a handful of areas, each with its own collapsible section. You don't have to fill in every field — sensible defaults are preserved from the configuration you opened.

Application settings

Two basic settings at the top of the form:

• Root element — the id attribute of the HTML container where the SPA mounts into your page (e.g. betting__container). Set once during integration and rarely changed.
• GTM ID — your Google Tag Manager container ID for analytics. Optional.

Betting URLs

The addresses of the back-end services the SPA talks to:

• Gql url — GraphQL endpoint for sport events, markets, odds, and bets
• Widgets static url — where the SPA loads its widget bundle from
• Scoreboard GraphQL url — endpoint for live scores and stats

Feature flags

Toggles for SPA behaviours you might want to test or roll out gradually:

Default settings

The initial preferences a brand-new player sees, before they customise anything themselves:

• Event Status — Live or Prematch (which tab opens first)
• Sport Type — Sports or Esports
• Odd Format — Decimal, Fractional, or American
• Odd Accept Strategy — what to do when odds shift between the player picking and confirming a bet:
  • Accept All — silently accept any odds change. Highest conversion, highest operator risk if odds dropped against you between selection and submission
  • Accept Higher — accept only when odds went up in the player's favour. The conventional default in most jurisdictions; a good starting point
  • Accept Ask — prompt the player to confirm before placing. Safest for the player; lowest conversion

Layout breakpoints

The screen widths (in pixels) at which the SPA switches between layouts. Each field is the minimum width at which that layout applies — so a value of 1040 for Tablet means "tablet layout kicks in at 1040 px and above" (until the desktop breakpoint takes over). Mobile defaults to 0 because the mobile layout applies from 0 upward.

If you don't have a strong reason to change these, the defaults are fine.

Pages

The Pages section is the routing map of the SPA — which URLs exist, what layout each page uses, and which widgets are placed where. Each tab on this row is one page.

At the top of this section:

• Add Page — add a new page to the routing map (dropdown of available page templates)
• Copy / Paste — copy the entire Pages set from another configuration and paste it here (useful when migrating settings between configs)

Each page's tab can be expanded with the > arrow. Inside you'll see the page's route name (e.g. Root, Match, Sport) and its layout grid + widget placement, edited as JSON.

The Remove button next to optional pages deletes that page from the configuration. Four pages — Root, Match, Sport, and Tournament — are the always-present core; the UI doesn't expose a Remove control next to them and they can't be deleted.

Override Theme

The Override Theme section is where you make the SPA match your brand's colours, fonts, and corner styles — without touching the front-end build. There are two ways to edit it, switchable via the Builder / JSON toggle at the top right of the section:

• Builder (default) — visual editor with colour swatches, text fields per token, and a per-token clear button. Recommended for day-to-day work.
• JSON — raw JSON view if you'd rather paste a complete theme object (e.g. a brand kit you've assembled offline).

The Reset all button next to the toggle reverts unsaved theme changes back to the values stored on the config you opened.

Builder

Builder mode groups the theme into four collapsible sections:

Each token row is:

• The token name
• A colour swatch (clickable — opens the colour picker)
• A text input — you can paste a hex string (#00ebaa) directly
• A small × button — clears the override and falls back to the theme default

Tokens marked Not set in the text input mean "no override; uses the theme default."

Palette tokens

Each token in the Palette section, in the order it appears:

JSON

Switching to JSON shows the same data as a JSON object. Useful if you want to paste a full theme exported from elsewhere or diff against another configuration.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "font": {
    "fontSans": "Roboto, sans-serif",
    "baseFontSize": "16px"
  },
  "palette": {
    "colorsPrimary1": "#ffffff",
    "colorsPrimary2": "#000000",
    "colorsSecondary1": "#111111",
    "colorsSecondary2": "#212121",
    "colorsSecondary3": "#797979",
    "colorsAccent1": "#00ebaa",
    "colorsAccent2": "#f6262e",
    "colorsAccent3": "#fff500",
    "textButton": "#000000",
    "textPrimary": "#ffffff",
    "textSecondary": "#bcbcbc",
    "notificationBlocked": "#797979",
    "notificationError": "#f6262e",
    "notificationInfo": "#0852FF",
    "notificationSuccess": "#00EB81",
    "notificationWarning": "#fff500"
  },
  "radius": {
    "rounded2": "2px",
    "rounded4": "4px",
    "rounded6": "6px",
    "rounded8": "8px",
    "rounded12": "12px",
    "rounded24": "24px"
  },
  "offsetTop": 0
}

Previewing and saving

At the bottom right of the editor you have two buttons:

• Preview — opens a live preview of the SPA using your unsaved changes layered on top of the data the currently-assigned config sees. Great for checking layout and colours before committing. Preview runs against the same back-ends as your real SPA, so be mindful when previewing during peak hours
• Save — saves the configuration as a new version in the list. Does not activate it — return to the list and click Assign to make it live

Rolling out a change end-to-end

1. Open SPA Config in the left navigation.
2. Expand your brand's group.
3. Click + Create config for a new version (or click an existing ID to open and tweak a copy).
4. Make your changes in the editor sections.
5. Click Preview to verify it looks right.
6. Click Save to create a new configuration version.
7. Back on the list, find the new version (it sits at the top) and click Assign.
8. Confirm the dialog. The new configuration is live on your site.
9. If something looks wrong, return to the list and Assign the previous version — that's your rollback.