Skip to main content

Playground

The playground is a dedicated widget instance where partners design and preview their themes in real time. The Betflow team provides you with a playground URL that includes the ThemePanel — a full configuration UI.

Accessing the Playground​

When playground mode is active, the widget displays:

  • A configuration panel (left side in feed mode, bottom in carousel mode)
  • A top control bar with Layout, Preview, and Fact Flow options
  • Live preview that updates as you change settings

Customization Controls​

The ThemePanel provides control over every visual aspect of the widget:

CategoryWhat You Can Change
ColorsBackground gradients, text, UI elements, CTAs, graphs, emojis
LayoutCarousel or feed mode
DisplayDark / light color mode
Fact Flow TypesBase (collapsed), expanded (with charts), or multi-trend
SizingAspect ratios for cards and parlays, gap spacing, border thickness
Odds FormatAmerican, decimal, fractional, or probability (%)
CurrencyUSD, EUR, GBP, and more
BetslipStatic or payout mode, custom bet/win labels, default amount
ContainerPage background color, container background and border
FeaturesShow/hide filters, pagination, parlay subtitles

Flow Type Tabs​

Each flow type has its own independent color scheme:

  • Fun Flow — emoji-driven narrative cards
  • Fact Flow — statistical cards with charts
  • Plain Flow — clean parlay-only cards

Switch between tabs to customize colors for each type separately, in both dark and light modes.

Sync Feature​

Use the sync toggle (🔗) to apply color changes across all flow types simultaneously. This ensures consistent branding without manually editing each flow type.

Basic vs Advanced Mode​

  • Basic Mode — simplified color groups for quick customization
  • Advanced Mode — full granular control over every individual element

Designing a Theme​

Step 1: Choose Layout and Color Mode​

Use the top control bar to select:

  • Layout: Carousel or Feed
  • Color Mode: Dark or Light (toggle to preview both)
  • Fact Flow Type: Base, Expanded, or Multi-Trend

Step 2: Customize Colors​

Expand each section in the config panel to adjust:

  • Background — card background colors and gradients
  • Text — subject name, matchup info, narrative, bet name, tagline, odds
  • UI Elements — expand/close buttons, photo outlines
  • CTA Buttons — button gradient and text colors
  • Emoji — outline, background, and glow colors (Fun Flow)
  • Countdown — timer gradient colors
  • Borders — card border color and radius
  • Font — custom brand font, button border radius
  • Graph — bar colors (red/green/neutral), trend lines, labels, gradients (Fact Flow)
  • Split Tabs — active/inactive tab colors (Fact Flow)
  • Parlay — header background gradient

All color fields accept hex values without # (e.g., FFFFFF) and support opacity (0–100).

Step 3: Configure Layout Settings​

Adjust sizing and display options:

  • Aspect Ratios — carouselFlowAR, carouselParlayAR, feedFlowAR, feedParlayAR
  • Gap Spacing — carouselGapPct, feedGapPct
  • Border Thickness — carouselBorderThicknessPct, feedBorderThicknessPct

Step 4: Configure Betslip​

  • Mode — static (fixed amount) or payout (user-adjustable)
  • Labels — customize the bet and win button text
  • Default Amount — starting wager amount

Saving and Exporting Presets​

Save a Preset​

  1. Click "💾 Save Style" in the top bar
  2. Enter a descriptive name (e.g., brand_purple_dark_v2)
  3. Click Save

Presets are stored locally in the browser. Each browser has independent storage — no conflicts between partners.

Download a Preset​

  1. Open the "💾 Saved Presets" section in the config panel
  2. Find your preset in the list
  3. Click the ⬇ (download) button
  4. The file downloads as {preset_name}_preset.json
caution

Always download important presets. Clearing browser data removes locally saved presets.

Load a Saved Preset​

Click any saved preset name in the list to load and preview it instantly.

Allow Override Iframe Filters​

The ThemePanel includes an "Allow Override Iframe Filters" checkbox:

  • Checked (default) — users can freely change all filter categories in the widget, even those set via iframe parameters.
  • Unchecked — filter categories set via iframe parameters are locked in the UI. Filters not set via iframe remain editable.

This setting is saved in the preset as allowOverrideIframeFilters.

Best Practices​

  1. Test both color modes — preview your theme in dark and light mode
  2. Check all flow types — ensure Fun Flow, Fact Flow, and Plain Flow all look good
  3. Test both layouts — try carousel and feed modes
  4. Verify readability — ensure text has sufficient contrast against backgrounds
  5. Save multiple versions — create variations to compare options
  6. Use descriptive names — e.g., brand_purple_dark_v2, nba_light_v1
  7. Download frequently — don't rely on browser storage alone

Next Steps​

  • Presets — learn how presets are loaded and hosted in production
  • Iframe Parameters — control filters, language, and entity scoping