Match Overview Mini Widget

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 Mini is a compact version of the match overview widget optimized for space-constrained layouts like sidebars, mobile displays, or content cards. It features an interactive prediction section with clickable betting options and maintains all essential match information in a condensed format.

Key Features:

  • Compact Design: Optimized layout for narrow spaces and mobile screens
  • Interactive Predictions: Clickable betting options (1-X-2) with visual indicators
  • Quick Match Info: Team logos, league details, and match timing in minimal space
  • Multi-Sport Support: Adapted layouts for football (with draw option) and MMA (without draw)
  • Visual Feedback: Check marks on active betting options for user guidance
  • CTA Integration: Direct betting links with full tracking support

Basic Usage - Football

Expand me...

MMA Match Display

Expand me...

With Custom CTA Colors

Expand me...

Attributes Reference

Attribute Type Required Default Description
id string Yes - Must be “matchOverviewMini”
matchid string Yes - Unique match identifier (format: sport-team1-team2-YYYYMMDD)
language string No Auto-detected ISO 639-1 language code for localization
country string No Auto-detected ISO 3166-1 country code (supports state format: US-CA, CA-ON)
countryState string No - State/province code for US/Canada (automatically parsed)
timezone string No Auto-detected IANA timezone identifier for date/time display
ctacolors string/array No “#05842A” CTA button background color(s)
ctahovercolors string/array No “#096725” CTA button hover state color(s)
referer string No - Referrer tracking parameter for analytics

Match ID Format

Match IDs follow the same convention as other match widgets:

Football

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

Examples:

  • football-nigeria-england-20240702
  • football-barcelona-realmadrid-20250215

MMA

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

Examples:

  • mma-douglassilvadeadrade-romandolidze-20240702
  • mma-mcgregor-poirier-20250315

Basketball

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

Examples:

  • basketball-lakers-celtics-20250220

Widget Features

Interactive Prediction System

The mini widget displays three betting options for football or two for MMA:

Football (1-X-2 Format):

  • 1: Team A to win
  • X: Draw (not available in MMA)
  • 2: Team B to win

Visual Indicators:

  • ✓ Active (green check): Betting option available with content
  • ○ Disabled (gray): No betting content available for this option

Behavior:

  • Clicking an active option opens the betting partner link
  • Disabled options are not clickable
  • Each option tracks independently for analytics

Compact Layout Design

Header Section:

  • Fire icon for visual appeal
  • Custom label (e.g., “Featured Match”, “Upcoming Fight”)

Match Information:

  • League logo and name (with event number for MMA)
  • Date and time with timezone conversion
  • Condensed versus display with team/fighter logos

Prediction Section:

  • Three betting buttons (football) or two (MMA)
  • Visual feedback on available options
  • Primary CTA button for main betting action
  • Separator line for visual clarity (football only)

Sport-Specific Adaptations

Feature Football MMA
Betting Options 1-X-2 (three buttons) 1-2 (two buttons)
Draw Option Yes (X button) No
Visual Separator Yes, below teams No
Event Number Not displayed Displayed with league name
Layout Style Standard team badges Fighter profile style

Common Use Cases

<nw-blocks 
  id="matchOverviewMini" 
  matchid="football-manchesterunited-liverpool-20250301" \>
</nw-blocks>

Mobile-Optimized Display

<nw-blocks 
  id="matchOverviewMini" 
  matchid="mma-mcgregor-poirier-20250315" 
  language="en" 
  country="US" \>
</nw-blocks>

Branded CTA Styling

<nw-blocks 
  id="matchOverviewMini" 
  matchid="football-psg-marseille-20250310" 
  ctacolors="#FF6B00" 
  ctahovercolors="#E65100" \>
</nw-blocks>

With Referrer Tracking

<nw-blocks 
  id="matchOverviewMini" 
  matchid="football-bayern-dortmund-20250318" 
  referer="sidebar-widget-top" \>
</nw-blocks>

Best Practices

Layout Placement

  • Ideal for: Sidebars, mobile views, card grids, content columns
  • Width: Works best in 280-400px containers
  • Spacing: Provide adequate padding around widget for visual clarity
  • Grouping: Display multiple mini widgets in vertical stack for upcoming matches

Content Strategy

  • Use fire icon header to highlight featured or high-stakes matches
  • Mini widget excels at showing multiple matches in limited space
  • Combine with full match overview widgets for comprehensive coverage
  • Place in high-visibility sidebar areas for maximum engagement

Prediction Options

  • Ensure CMS has prediction content for options you want to activate
  • Active betting options (with check marks) drive higher engagement
  • Test all three options to maximize conversion opportunities
  • Use disabled state to show unavailable markets

Localization

  • Provide language and country for proper translations
  • Date format automatically adapts to user locale
  • Use state codes (US-CA, CA-ON) for regional compliance

CTA Optimization

  • Choose colors that contrast with your site design
  • Ensure hover states are visually distinct
  • Test button sizing on mobile devices
  • Include referer to track conversion sources

Performance

  • Widget is lightweight and loads quickly
  • Automatic timezone conversion via JavaScript
  • Prediction data cached for fast retrieval
  • Optimized for mobile-first experiences

Advanced Configuration

Prediction Content Management

Prediction options are controlled via Sanity CMS:

{
  prediction: {
    label: "Expert Pick",
    predictionOption: "1", // Which option is active: 0=disabled, 1=Team A, 2=Draw, 3=Team B
    hideContent: false,
    brand: {
      teamA: {
        content: "Team A prediction text",
        cloakedLink: "partner-123",
        ctaLabel: "Bet on Team A"
      },
      draw: {
        content: "", // Empty = disabled
        cloakedLink: "",
        ctaLabel: ""
      },
      teamB: {
        content: "", // Empty = disabled
        cloakedLink: "",
        ctaLabel: ""
      }
    }
  }
}

Prediction Option Values:

  • Football: 0 = disabled, 1 = Team A, 2 = Draw, 3 = Team B
  • MMA: 0 or 2 defaults to Fighter A, 1 = Fighter A, 3 = Fighter B

Timezone Handling

Automatic date/time conversion using JavaScript:

// Automatically converts to user's locale
formatDateWithUserLocale(matchDate, userLanguage)

// Time formatting with proper hour cycle
new Intl.DateTimeFormat("fr-FR", { 
  hour: 'numeric', 
  minute: 'numeric', 
  hourCycle: 'h23' 
})

Supported Timezones:

  • All IANA timezone identifiers
  • Automatic UTC conversion
  • Client-side rendering for accuracy

Color Customization

Multiple color format support:

<!-- Hex colors -->
<nw-blocks id="matchOverviewMini" matchid="..." 
  ctacolors="#05842A" 
  ctahovercolors="#096725" \>
</nw-blocks>

<!-- Array format for gradients -->
<nw-blocks id="matchOverviewMini" matchid="..." 
  ctacolors='["#05842A", "#096725"]' \>
</nw-blocks>

<!-- Named CSS colors -->
<nw-blocks id="matchOverviewMini" matchid="..." 
  ctacolors="darkgreen" \>
</nw-blocks>

Comparison with Full Match Overview

Feature Match Overview Mini Match Overview 2
Size Compact (280-400px) Full-width (400-800px)
Countdown No Yes, real-time
Live Indicator No Yes, animated
Predictions Interactive buttons Text display
Betting Options 1-X-2 clickable Single CTA
Content Detail Minimal Comprehensive
Use Case Sidebars, mobile Main content area
Load Time Fastest Fast
User Interaction Multiple CTAs Single CTA

When to use Mini:

  • Limited space (sidebars, narrow columns)
  • Multiple match display in compact format
  • Mobile-first designs
  • Quick betting option selection
  • Card-based layouts

When to use Overview 2:

  • Hero sections or featured content
  • Detailed match information needed
  • Real-time countdown required
  • Single featured match display
  • Desktop-optimized layouts

Data Requirements

Sanity CMS Structure

{
  matchId: "football-team1-team2-YYYYMMDD",
  label: "Featured Match",
  eventNumber: "UFC 302", // For MMA only
  competition: {
    name: "Premier League",
    logo: "https://...",
    date: "2025-03-15T19:45:00Z"
  },
  teamA: {
    name: "Team A",
    logo: "https://...",
    flag: "https://..." // Optional
  },
  teamB: {
    name: "Team B",
    logo: "https://...",
    flag: "https://..." // Optional
  },
  prediction: {
    label: "Expert Pick",
    content: "Prediction text",
    hideContent: false,
    predictionOption: "1", // Active option
    brand: {
      teamA: { cloakedLink, content, ctaLabel },
      draw: { cloakedLink, content, ctaLabel },
      teamB: { cloakedLink, content, ctaLabel }
    }
  },
  sportType: "sport-football" | "sport-mma",
  oddsPredictions: {
    brand: {
      cloakedLink: "partner-123"
    }
  }
}

KV Storage

  • Key: SANITY_MATCH_OVERVIEW:{matchid}
  • TTL: 1 hour
  • Cache: Shared with other match overview widgets
  • Invalidation: Automatic on CMS 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="matchOverviewMini" 
  matchid="football-nigeria-england-20240702" 
  ctacolors="#05842A" 
  ctahovercolors="#096725" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="matchOverviewMini" 
  matchid="football-nigeria-england-20240702" 
  ctacolors="#05842A" 
  ctahovercolors="#096725" \>
</nw-blocks>

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