Match Overview Widgets

Migration Notice: We are transitioning from <bw-widget> to <nw-blocks> tags. While both are currently supported for backward compatibility, <nw-blocks> is now the recommended tag for all new implementations. Existing <bw-widget> implementations will continue to function.

Overview

Match Overview widgets provide dynamic sports event information including team details, match schedules, predictions, and venue information. These widgets support multiple sports (football, MMA, basketball) with automatic localization and timezone handling.

Available Widgets:

  • matchOverview: Display comprehensive match information with team logos, date/time, and venue
  • matchPrediction: Show match predictions with customizable styling and betting options

Match Overview Widget

Displays detailed match information including team names, logos, league details, date/time, and venue. Automatically adapts layout based on sport type (football, MMA, basketball).

Basic Usage - Football

Expand me...

MMA Match Examples

Expand me...

Basketball Match Example

Expand me...

With Localization

Expand me...

Match Overview Attributes

Attribute Type Required Default Description
id string Yes - Must be “matchOverview”
matchid string Yes - Unique match identifier (format: team1-team2-YYYYMMDD or sport-fighter1-fighter2-YYYYMMDD)
language string No Auto-detected ISO 639-1 language code for localization
country string No Auto-detected ISO 3166-1 country code for regional content
timezone string No Auto-detected IANA timezone identifier (e.g., “Europe/Paris”)
ctacolors string No “#05842A” CTA button background color
ctahovercolors string No “#096725” CTA button hover state color
referer string No - Referrer tracking parameter

Match Prediction Widget

Displays betting predictions for a match with customizable styling. Shows odds and predictions for different outcomes (win/draw/loss).

Basic Usage

Expand me...

With Custom Styling

Expand me...

With CTA Color Attributes

Expand me...

Match Prediction Attributes

Attribute Type Required Default Description
id string Yes - Must be “matchPrediction”
matchid string Yes - Match identifier matching the matchOverview format
language string No Auto-detected Language code for prediction text
country string No Auto-detected Country code for regional odds
timezone string No Auto-detected Timezone for displaying match times
ctacolors string/array No “#05842A” Button background color(s)
ctahovercolors string/array No “#096725” Button hover color(s)
configuration JSON No {} Styling configuration object

Configuration Object Properties

Property Type Default Description
button-colors array ["#05842A", “#05842A”] Array of button background colors [normal, hover]
header-color string “#000000” Header text color
header-bgcolor string “#FFFFFF” Header background color
width string “100%” Widget width with units

Match ID Format

Match IDs follow specific naming conventions based on sport type:

Football/Soccer

Format: {team1}-{team2}-{YYYYMMDD}

Examples:

  • parissaint-germain-rcstrasbourg-20230529
  • france-cameroon-20230614

MMA

Format: mma-{fighter1}-{fighter2}-{YYYYMMDD}

Examples:

  • mma-volkanovskialexander-sterlingaljamain-20240108
  • mma-seano-malley-zhangweili-20240112

Basketball

Format: basketball-{team1}-{team2}-{YYYYMMDD}

Examples:

  • basketball-chicagobulls-goldenstatewarriors-20240119

Important Notes:

  • Team/fighter names should be lowercase with no spaces or special characters
  • Date format is always YYYYMMDD (year, month, day)
  • Match IDs must match existing data in the system

Sport Type Support

The widgets automatically detect and adapt styling based on sport type:

Sport Class Applied Features
Football sport-football Standard two-team layout with versus display
MMA sport-mma Fighter profiles with match details below
Basketball sport-basketball Team-based layout similar to football

Each sport type has customized styling for:

  • Team/fighter information display
  • Logo positioning and sizing
  • Header tag formatting
  • Match details layout

Common Use Cases

Standard Football Match Widget

<nw-blocks 
  id="matchOverview" 
  matchid="barcelona-realmadrid-20250215">
</nw-blocks>

MMA Fight with Predictions

<!-- Fight Overview -->
<nw-blocks 
  id="matchOverview" 
  matchid="mma-mcgregorconor-poirierdustin-20250301">
</nw-blocks>

<!-- Betting Predictions -->
<nw-blocks 
  id="matchPrediction" 
  matchid="mma-mcgregorconor-poirierdustin-20250301" 
  ctacolors="#FF5722" 
  ctahovercolors="#E64A19">
</nw-blocks>

Localized Match for French Audience

<nw-blocks 
  id="matchOverview" 
  matchid="psg-olympiquemarseille-20250310" 
  language="fr" 
  country="FR" 
  timezone="Europe/Paris">
</nw-blocks>

Custom Styled Prediction Widget

<nw-blocks 
  id="matchPrediction" 
  matchid="liverpool-manchesterunited-20250320" 
  configuration='{
    "button-colors": ["#C8102E", "#9C0824"],
    "header-color": "#FFFFFF",
    "header-bgcolor": "#C8102E",
    "width": "300px"
  }'>
</nw-blocks>

Best Practices

Match ID Management

  • Ensure match IDs are properly formatted and match existing data in Sanity CMS
  • Use consistent naming conventions for team/fighter names
  • Include the correct sport prefix (mma-, basketball-) when applicable
  • Verify date format is YYYYMMDD

Localization

  • Provide language and country attributes for international audiences
  • Set timezone to ensure correct match time display for users
  • Content is automatically localized from Sanity CMS based on these parameters

Styling

  • Use ctacolors and ctahovercolors for consistent branding
  • Configuration object allows fine-tuned control over widget appearance
  • Test color contrast for accessibility compliance
  • Ensure widget width works responsively on mobile devices

Performance

  • Widgets are server-side rendered for optimal load times
  • Match data is cached in KV storage for fast retrieval
  • Updates to match information reflect automatically

Content Requirements

  • Match data must exist in Sanity CMS with the specified match ID
  • Team/fighter logos should be high quality for best display
  • League/event information should be properly configured
  • Stadium/venue information enhances user experience

Widget Features

Match Overview Features

  • Automatic Sport Detection: Adapts layout based on sport type
  • Team/Fighter Information: Displays names, logos, and details
  • League/Event Context: Shows competition name and event number
  • Date/Time Display: Localized datetime with timezone support
  • Venue Information: Stadium/arena name display
  • Responsive Design: Mobile-optimized layouts
  • Real-time Updates: Syncs with Sanity CMS data

Match Prediction Features

  • Betting Odds Display: Shows current odds for outcomes
  • Multiple Predictions: Supports various bet types
  • Customizable Styling: Full control over colors and sizing
  • CTA Integration: Direct links to betting partners
  • Localized Content: Region-specific odds and terminology

Data Sources

Sanity CMS Integration

Match data is retrieved from Sanity CMS using the match ID as the key. Required data includes:

  • Team/Fighter Details: Names, logos, sport type
  • Match Information: Date, time, league, event number
  • Venue Details: Stadium/arena name
  • Predictions: Odds and betting information
  • Translations: Localized text for all elements

KV Storage

Widgets utilize CloudFlare KV for caching:

  • Match overview data cached by match ID
  • Prediction data cached separately
  • Automatic cache invalidation on data updates

Backward Compatibility

All examples above use the new <nw-blocks> tag. For backward compatibility, you can still use <bw-widget>:

<!-- Old syntax (still supported) -->
<bw-widget 
  id="matchOverview" 
  matchid="parissaint-germain-rcstrasbourg-20230529">
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="matchOverview" 
  matchid="parissaint-germain-rcstrasbourg-20230529">
</nw-blocks>

Both tags work identically, but <nw-blocks> is recommended for all new implementations.