Match Overview 2 Widget

Overview

Match Overview 2 is an enhanced version of the match overview widget featuring improved design, real-time countdown functionality, live match indicators, and comprehensive prediction display. It provides a modern card-based layout with dynamic updates and support for multiple sports including football, MMA, and basketball.

Key Features:

• Real-time Countdown: Dynamic countdown to match start with automatic timezone conversion
• Live Match Indicator: Special styling and icon when match is live (within 2 hours)
• Enhanced Design: Modern card layout with team logos, league information, and predictions
• Custom Predictions: Support for custom prediction text and automatic CMS integration
• CTA Integration: Configurable call-to-action buttons with betting partner links
• Multi-Sport Support: Optimized layouts for football, MMA, and basketball

Basic Usage - Football

<nw-blocks 
  id="matchOverview2" 
  matchid="football-nigeria-england-20240702" \>
</nw-blocks>

MMA Match Display

<nw-blocks 
  id="matchOverview2" 
  matchid="mma-douglassilvadeadrade-romandolidze-20240702" \>
</nw-blocks>

With Custom Prediction Text

<nw-blocks 
  id="matchOverview2" 
  matchid="mma-romandolidze-ronaldorodriguez-20240912"  
  text="Custom prediction: Fighter A has won 3 of the last 5 encounters and shows superior form." \>
</nw-blocks>

With Custom CTA Colors

<nw-blocks 
  id="matchOverview2" 
  matchid="football-nigeria-england-20240702" 
  ctacolors="#05842A" 
  ctahovercolors="#096725" \>
</nw-blocks>

Attributes Reference

Match ID Format

Match IDs for Overview 2 follow the same convention as Overview 1, with sport prefix:

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-romandolidze-ronaldorodriguez-20240912

Basketball

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

Examples:

• basketball-lakers-celtics-20250220

Naming Rules:

• All lowercase, no spaces or special characters
• Full names without abbreviations (e.g., “douglassilvadeadrade” not “douglas-silva”)
• Date format: YYYYMMDD (year, month, day)

Widget Features

Real-Time Countdown

The widget displays dynamic countdown to match start with three time formats:

The countdown updates automatically using client-side JavaScript with proper timezone conversion.

Live Match Indicator

When a match is within 2 hours of start time or currently in progress:

• Red “LIVE” badge appears with animated icon
• Special styling draws attention to ongoing matches
• Countdown is replaced with live status

Prediction Section

Automatic Content:

• Fetches predictions from Sanity CMS based on match ID
• Displays expert analysis and betting insights
• Includes fire icon for visual emphasis

Custom Content:

• Use text attribute to override CMS content
• Useful for A/B testing or special promotions
• Supports HTML formatting within text

CTA Button Integration

Features:

• Direct links to betting partners via cloaked URLs
• Tracking data integration for analytics
• Referrer parameter support
• Customizable colors and hover states
• Arrow icon for visual cue

Sport-Specific Layouts

Football:

• Traditional versus layout with team badges
• League logo and name display
• Standard match date/time

MMA:

• Fighter profile layout with larger images
• Event number display (e.g., UFC 302)
• Special background styling for dramatic effect
• Match details positioned below fighters

Common Use Cases

Standard Football Match

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

MMA Fight with Custom Prediction

<nw-blocks 
  id="matchOverview2" 
  matchid="mma-mcgregor-poirier-20250315" 
  text="McGregor returns after 18 months. Poirier has won 4 straight. This could be the fight of the year!" \>
</nw-blocks>

Branded CTA Styling

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

Localized Content

<nw-blocks 
  id="matchOverview2" 
  matchid="football-bayern-dortmund-20250318" 
  language="de" 
  country="DE" 
  timezone="Europe/Berlin" \>
</nw-blocks>

Best Practices

Match Timing

• Widget is most effective when displayed 1-7 days before match
• Countdown creates urgency and drives engagement
• Live indicator captures users during match time
• Consider displaying multiple matches for upcoming events

Content Strategy

• Use custom text attribute for promoted matches or special events
• Keep prediction text concise (2-3 sentences optimal)
• Let CMS content handle routine matches automatically
• Update custom text for high-profile matches

Localization

• Always set timezone for accurate countdown display
• Provide language and country for proper translations
• Use state-specific country codes (US-CA, US-NY) for regional compliance
• Test countdown in target timezone before publishing

CTA Optimization

• Choose CTA colors that match your brand
• Ensure sufficient contrast between normal and hover states
• Test button on mobile devices for touch-friendly sizing
• Include referer parameter to track conversion sources

Performance

• Widget uses client-side JavaScript for countdown updates
• Match data is cached in KV storage for fast loading
• Images are optimized and lazy-loaded
• Countdown script is injected inline for immediate execution

Styling Integration

• Widget uses scoped styles to avoid conflicts
• Card design works well in sidebars or content areas
• Mobile-responsive with automatic layout adjustments
• Test in your site’s context to ensure visual harmony

Advanced Configuration

Color Customization

The widget supports multiple color formats:

<!-- Single color -->
<nw-blocks id="matchOverview2" matchid="..." ctacolors="#05842A" \>
</nw-blocks>

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

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

State/Province Support

For US and Canada, use hyphenated country codes:

<!-- California, USA -->
<nw-blocks id="matchOverview2" matchid="..." country="US-CA" \>
</nw-blocks>

<!-- Ontario, Canada -->
<nw-blocks id="matchOverview2" matchid="..." country="CA-ON" \>
</nw-blocks>

The widget automatically:

• Parses the country and state
• Applies region-specific regulations
• Shows appropriate betting partners
• Uses correct legal disclaimers

Differences from Match Overview 1

When to use Overview 2:

• Modern, premium site designs
• High-value matches requiring special attention
• Sites with international audiences needing timezone support
• When real-time countdown is important
• For promoted or featured matches

When to use Overview 1:

• Simple, minimalist designs
• Quick implementation needs
• Sites with limited space
• When static information is sufficient

Data Requirements

Sanity CMS Structure

The widget requires the following data in Sanity:

{
  matchId: "football-team1-team2-YYYYMMDD",
  teamA: {
    name: "Team A",
    logo: "https://...",
    sportType: "sport-football"
  },
  teamB: {
    name: "Team B", 
    logo: "https://...",
    sportType: "sport-football"
  },
  competition: {
    name: "Premier League",
    logo: "https://...",
    date: "2025-03-15T19:45:00Z"
  },
  prediction: {
    label: "Expert Prediction",
    content: "Analysis text...",
    hideContent: false
  },
  oddsPredictions: {
    brand: {
      cloakedLink: "partner-123"
    }
  },
  translations: {
    daysLeft: "days left",
    hoursLeft: "hours left",
    minutesLeft: "minutes left",
    liveLabel: "LIVE"
  }
}

KV Storage

Match data is cached in CloudFlare KV with:

• Key: SANITY_MATCH_OVERVIEW:{matchid}
• TTL: 1 hour for upcoming matches, 5 minutes for live matches
• Automatic invalidation 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="matchOverview2" 
  matchid="football-nigeria-england-20240702" 
  ctacolors="#05842A" 
  ctahovercolors="#096725" \>
</bw-widget>

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

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