Presets

Presets are JSON files that capture all theme and layout settings for the widget. Partners design presets in the playground and deploy them for production use.

How Preset Loading Works

In production, the widget loads your theme from a remote URL at startup. The Odditt team configures the preset hosting for your deployment.

Loading Priority

The widget resolves its theme in this order:

1. ?preset= query param (highest priority) - when present in the iframe URL, the widget fetches the corresponding preset JSON file. This lets you control the theme per embed.
2. Default preset (fallback) - if no ?preset= param is provided, the widget loads a default preset configured for your deployment.
3. Built-in defaults - if no preset is configured, the widget renders with built-in default colors.

Mode-Specific Preset Files

When the iframe URL includes both ?colorMode= and ?layoutMode= alongside ?preset=, the widget first looks for a mode-specific file named {preset}_{layoutMode}_{colorMode}.json (e.g. ?preset=brand&layoutMode=feed&colorMode=dark → brand_feed_dark.json) and falls back to the bare {preset}.json if it doesn't exist. This lets you ship one preset name with per-mode variants. The ?colorMode= and ?layoutMode= params always override the mode values stored inside the loaded preset.

Production Deployment

Step 1: Design in the Playground

Use the playground to design and save your theme. Saved presets follow your playground login across browsers and devices.

Step 2: Deploy from the Playground

Click 🚀 Deploy on a saved preset. The playground publishes it to your instance's Odditt-managed preset hosting and shows you a ready-to-open test URL (https://your-instance.odditt.com?preset=your-preset-name) so you can preview it live immediately. No hosting setup on your side.

Prefer to self-host? You can also download the preset JSON and serve it from your own servers - tell the Odditt team and we'll point your instance at your hosting location instead.

Step 3: Promote to Default (optional)

Once a preset is approved, ask the Odditt team to promote it to your instance's default - after that, embeds with no ?preset= param load it automatically.

Step 4: Embed with Preset

<iframe
  src="https://widget.example.com/?preset=brand_dark_v2"
  width="100%"
  height="480"
  frameborder="0"
  style="border: none;"
></iframe>

The widget fetches the corresponding preset file based on the ?preset= value. For example, ?preset=brand_dark_v2 loads brand_dark_v2.json from your configured preset hosting location.

Multiple Presets

A single production instance can serve different themes by changing the ?preset= query param:

<!-- Dark theme -->
<iframe src="https://widget.example.com/?preset=brand_dark_v2" ...></iframe>

<!-- Light theme -->
<iframe src="https://widget.example.com/?preset=brand_light_v1" ...></iframe>

<!-- Sport-specific -->
<iframe src="https://widget.example.com/?preset=nba_special" ...></iframe>

Preset JSON Structure

The downloaded .json file contains all theme and configuration settings. All fields are optional - only provided values override defaults.

{
  "funFlowDark": { "flow_background_hex_1": "062b53", "..." : "..." },
  "funFlowLight": {},
  "factFlowDark": {},
  "factFlowLight": {},
  "plainFlowDark": {},
  "plainFlowLight": {},
  "syncMap": {},
  "colorMode": "dark",
  "layoutMode": "carousel",
  "factFlowDisplayType": "base",
  "carouselFlowAR": 0.9,
  "carouselParlayAR": 0.9,
  "carouselGapPct": 3.33,
  "feedFlowAR": 0.9,
  "feedParlayAR": 0.9,
  "feedGapPct": 3.33,
  "carouselBorderThicknessPct": 0.625,
  "feedBorderThicknessPct": 0.625,
  "oddsType": "american | decimal | fractional | multiplier | probability",
  "currency": "USD",
  "betslipMode": "static",
  "betslipBetWord": "Bet",
  "betslipWinWord": "Win",
  "betslipAmount": 10,
  "showParlaySubtitle": true,
  "showFilters": true,
  "showPagination": true,
  "allowOverrideIframeFilters": true,
  "containerBgHex": "FFFFFF",
  "containerBgOpacity": 2,
  "containerBorderHex": "FFFFFF",
  "containerBorderOpacity": 8,
  "pageBgHex": "0a0a1a"
}

Top-Level Settings

Sizing

Scale & Typography Keys

Seventeen optional *Scale multipliers (number, default 1) fine-tune individual element sizes on top of the card's base unit - useful when a wider aspect ratio (shorter card) shouldn't shrink every element in lockstep. Spacing: spaceSectionScale, spaceLegScale, spaceListScale. Fonts: fontNarrativeScale, fontNameScale, fontBetScale, fontOddsScale, fontParlayHeaderScale, fontMatchupScale, fontCountdownScale, fontLegNumberScale, fontTaglineScale, fontSplitScale, fontExpandScale, fontGraphLabelScale, fontUserCountScale, sgpFontScale. A value of 1 renders identically to a preset that omits the key.

Two weight toggles accompany them:

All of these are set visually in the playground's per-element size controls and land in the downloaded preset JSON automatically.

Betslip

Feature Toggles

Container & Page

Per-Flow Color Themes

The six flow theme objects (funFlowDark, funFlowLight, factFlowDark, factFlowLight, plainFlowDark, plainFlowLight) share the same structure. Key color fields:

Each color field has a corresponding _opacity field (0–100). For example, flow_background_hex_1_opacity: 100.

Troubleshooting

Preset Not Loading

• Check that the ?preset= value matches the filename without .json
• Ensure the JSON file is publicly accessible (try opening the URL in a browser)
• Check the browser console / network tab for fetch errors
• Confirm the JSON is valid
• Contact the Odditt team to verify your preset hosting is correctly configured

Colors Not Applying

• Hex values must not include # - use FFFFFF, not #FFFFFF
• Opacity values must be between 0 and 100
• Verify you customized the correct flow type tab (Fun/Fact/Plain) and color mode (dark/light)

Widget Shows Defaults

• The ?preset= query parameter is missing from the iframe src
• The preset hosting may not be configured yet - contact the Odditt team
• The preset file returns a non-200 response (404, CORS error, etc.)

Next Steps

• Playground - design and export your theme
• Iframe Parameters - combine presets with filters and entity scoping