Match Overview Widgets

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

<nw-blocks 
  id="matchOverview" 
  matchid="parissaint-germain-rcstrasbourg-20230529" \>
</nw-blocks>

MMA Match Examples

<!-- MMA Fight Example 1 -->
<nw-blocks 
  id="matchOverview" 
  matchid="mma-volkanovskialexander-sterlingaljamain-20240108" \>
</nw-blocks>

<!-- MMA Fight Example 2 -->
<nw-blocks 
  id="matchOverview" 
  matchid="mma-seano-malley-zhangweili-20240112" \>
</nw-blocks>

Basketball Match Example

<nw-blocks 
  id="matchOverview" 
  matchid="basketball-chicagobulls-goldenstatewarriors-20240119" \>
</nw-blocks>

With Localization

<nw-blocks 
  id="matchOverview" 
  matchid="france-cameroon-20230614" 
  language="fr" 
  country="FR" \>
</nw-blocks>

Match Overview Attributes

Match Prediction Widget

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

Basic Usage

<nw-blocks 
  id="matchPrediction" 
  matchid="parissaint-germain-rcstrasbourg-20230529" \>
</nw-blocks>

With Custom Styling

<nw-blocks 
  id="matchPrediction" 
  matchid="parissaint-germain-rcstrasbourg-20230529" 
  configuration='{
    "button-colors": ["#0a775a", "#085f48"], 
    "header-color": "#D3D3D3", 
    "header-bgcolor": "#02191e", 
    "width": "250px"
  }' \>
</nw-blocks>

With CTA Color Attributes

<nw-blocks 
  id="matchPrediction" 
  matchid="france-cameroon-20230614" 
  ctacolors="#05842A" 
  ctahovercolors="#096725" \>
</nw-blocks>

Match Prediction Attributes

Configuration Object Properties

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:

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.