Review Page Header 2

Tag Migration Notice: This widget uses the legacy bw-widget tag. For new implementations, please use <nw-blocks> tags instead. The bw-widget tag remains supported for backward compatibility.

Review Page Header 2

The ReviewPageHeader2 widget is an enhanced version of the review page header, featuring a modular component-based architecture with advanced social proof ribbons, flexible bonus display controls, and simplified attribute configuration. Built on modern React patterns with full responsive support.

Key Features

  • Social Proof Ribbons: Six distinct ribbon types (Super Popular, Top Rated, Editor’s Choice, Player’s Choice, Special Offer, Exclusive Offer)
  • Simplified Attributes: Direct ctacolors and ctahovercolors attributes (no JSON configuration object)
  • Modular Components: Separated Logo, Rating, Bonuses, CTA, and Disclaimer components
  • No Bonus Handling: Automatic graceful degradation when bonus data unavailable
  • Full Width Mode: Optional fullwidth attribute for container-width layouts
  • Dynamic CSS Classes: Conditional styling based on data availability
  • Exclusive Bonus Indicator: Translatable “Exclusive” ribbon on bonus section
  • Tracking Integration: Comprehensive tracking with referer support
  • Inactive Brand Handling: Silent failure with debug message for inactive brands

Demo Examples

Expand me...

Top Rated (tr) ribbons

Expand me...

Editor’s choice (ec) ribbons

Expand me...

Player’s choice (pc) ribbons

Expand me...

Special offer (so) ribbons

Expand me...

Exclusive offer (eo) ribbons

Expand me...

No bonus case

Expand me...

Social Proof Ribbon Types

<nw-blocks id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp" \>
</nw-blocks>

Use Case: Brands with highest traffic/engagement metrics

2. Top Rated (tr)

<nw-blocks id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-tr" \>
</nw-blocks>

Use Case: Brands with highest user ratings

3. Editor’s Choice (ec)

<nw-blocks id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec" \>
</nw-blocks>

Use Case: Editorial team’s recommended picks

4. Player’s Choice (pc)

<nw-blocks id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-pc" \>
</nw-blocks>

Use Case: Community-voted favorites

5. Special Offer (so)

<nw-blocks id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-so" \>
</nw-blocks>

Use Case: Limited-time promotions

6. Exclusive Offer (eo)

<nw-blocks id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-eo" \>
</nw-blocks>

Use Case: Site-exclusive bonuses/deals

7. No Bonus Display

<nw-blocks id="reviewpageheader2"
    cloakedlink="luxury-casino"
    language="en"
    country="ZZ"
    rating="5.0"
    ctatext="Visit Site"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp" \>
</nw-blocks>

Use Case: Brands without bonus offers or restricted regions

Attributes Reference

Attribute Type Required Default Description
id string Yes - Unique widget identifier
cloakedlink string Yes - Brand identifier for tracking and data lookup
language string No "en" Language code (ISO 639-1)
country string No "ZZ" Country code (ISO 3166-1)
countrystate string No - US/CA state code for regional targeting
rating string No "5.0" Brand rating (0.0-5.0 scale)
votes string No "153" Number of user votes/reviews
votescountkey string No "wgt-reviewPageHeader-votecount" Translation key for vote count text
socialproofkey string No - Translation key for social proof ribbon (sp/tr/ec/pc/so/eo)
exclusivebonuskey string No "wgt-toplist-exclusive" Translation key for bonus “Exclusive” tag
ctakey string No - Translation key for CTA button text
ctatext string No - Override CTA button text (bypasses translation)
ctacolors JSON array No ["#05842A", "#05842A"] CTA button gradient colors
ctahovercolors JSON array No ["#096725", "#096725"] CTA button hover gradient colors
trackinglinktarget string No - Tracking link target path segment
trackingdata string No - Additional tracking metadata
target string No "_blank" Link target attribute
rel string No "nofollow" Link relationship attribute
referer string No - Referrer identifier for attribution tracking
fullwidth boolean/string No true Enable full-width container layout

Widget Components

1. Label Rated (Social Proof Ribbon)

  • Component: <LabelRated>
  • Position: Top-left corner overlay on widget
  • Content: Translation from socialproofkey attribute
  • Styling: Branded ribbon with gradient background
  • Conditional: Only displays if socialRibbonText is provided

2. Logo Section

  • Component: <Logo>
  • Responsive Sizing: Optimized for mobile, tablet, desktop
  • Tracking: Full tracking link with target and data
  • Alt Text: Brand name for accessibility
  • Position: Left column of layout

3. Rating Display

  • Component: <Rating>
  • Elements:
    • SVG star sprite (reusable across widget)
    • Numeric rating value (0.0-5.0)
    • Vote count with translation support
    • Brand name for screen readers
  • Position: Below logo in left column

4. Bonuses Section

  • Component: <Bonuses> or <NoBonusCase>
  • Elements:
    • <LabelBonus>: “Exclusive” indicator (conditional on !hideBonusRibbon)
    • Primary bonus text: bonusText
    • Additional bonus: additionalBonusText
  • No Bonus Fallback: Displays <NoBonusCase> component when data unavailable
  • Hidden States: Supports hideBonuses, hideBonusRibbon, hideBonusText flags
  • Position: Right column top section

5. CTA Button

  • Component: <CtaButton>
  • Features:
    • Custom colors via ctacolors and ctahovercolors
    • Gradient background support
    • Text color customization
    • Tracking link integration
  • Position: Right column below bonuses

6. Disclaimer Section

  • Component: <Disclaimer>
  • Elements:
    • Minimum age requirement
    • Compliance disclaimer HTML from CMS
    • Terms & Conditions link (if hasTrackingLink)
  • Conditional: Only displays if hasDisclaimer is true
  • Position: Bottom row spanning full width

Dynamic CSS Classes

The widget applies conditional CSS classes based on data availability:

Class Condition Purpose
no-disclaimer No compliance disclaimer Adjust bottom spacing
is-fw fullwidth="true" Full-width container layout
has-label-rated Social proof ribbon present Add top spacing for ribbon
no-label-bonus No bonus tag text Hide bonus ribbon area
no-bonuses No bonus data available Adjust bonus section layout

Example Class Combination: no-disclaimer is-fw has-label-rated

Responsive Behavior

Mobile Layout (< 768px)

  • Stacked Layout: All components in vertical arrangement
  • Logo First: Brand logo at top
  • Rating Below: Star rating directly under logo
  • Bonuses Next: Bonus section in middle
  • CTA Bottom: Call-to-action button at bottom
  • Full Width: Components span container width

Tablet Layout (768px - 1024px)

  • Two-Column Layout: Left (logo + rating) | Right (bonuses + CTA)
  • Optimized Spacing: Balanced visual hierarchy
  • Maintained Proportions: Consistent aspect ratios

Desktop Layout (> 1024px)

  • Two-Column Layout: Left (logo + rating) | Right (bonuses + CTA)
  • Enhanced Spacing: More generous whitespace
  • Full Width Option: Container expands with fullwidth="true"

All tracking links follow this pattern:

/go/{cloakedlink}/{trackinglinktarget}?wid={id}&trackingData={trackingdata}&referer={referer}

Example:

/go/greatwin-casino/homepage?wid=reviewpageheader2&trackingData=header-cta&referer=blog-123

Terms & Conditions Link:

/go/{cloakedlink}/tc?wid={id}&trackingData={trackingdata}

Common Use Cases

<nw-blocks id="reviewpageheader2"
    cloakedlink="betway-casino"
    language="en"
    country="US"
    rating="4.7"
    votes="234"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp"
    trackinglinktarget="review-header" \>
</nw-blocks>

2. Sports Betting with Custom Colors

<nw-blocks id="reviewpageheader2"
    cloakedlink="draftkings-sports"
    language="en"
    country="US"
    rating="4.9"
    votes="512"
    ctacolors='["#ff6b35", "#f7931e"]'
    ctahovercolors='["#e85a2a", "#de8419"]'
    socialproofkey="wgt-reviewPageHeader-socialproof-tr" \>
</nw-blocks>

3. Multi-language Editor’s Choice

<nw-blocks id="reviewpageheader2"
    cloakedlink="cresus-casino"
    language="fr"
    country="FR"
    rating="4.5"
    votes="153"
    ctakey="cta-jouer-maintenant"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec"
    exclusivebonuskey="wgt-offre-exclusive" \>
</nw-blocks>

4. Player’s Choice Full Width

<nw-blocks id="reviewpageheader2"
    cloakedlink="fresh-casino"
    language="de"
    country="DE"
    rating="4.3"
    votes="89"
    fullwidth="true"
    socialproofkey="wgt-reviewPageHeader-socialproof-pc" \>
</nw-blocks>

5. Regional US State (New Jersey)

<nw-blocks id="reviewpageheader2"
    cloakedlink="fanduel-casino"
    language="en"
    country="US-CO"
    rating="4.6"
    votes="378"
    ctatext="Play in New Jersey"
    socialproofkey="wgt-reviewPageHeader-socialproof-so"
    trackingdata="nj-review" \>
</nw-blocks>

Best Practices

Content Strategy

  1. Ribbon Selection: Choose social proof type based on actual metrics (use analytics)
  2. Accurate Ratings: Keep ratings synchronized with review system
  3. Vote Count Updates: Update vote counts regularly for credibility
  4. Localized Content: Use appropriate language/country combinations
  5. CTA Clarity: Use action-oriented button text matching user intent

User Experience

  1. Consistent Ribbons: Use same ribbon logic across similar pages
  2. Color Harmony: Match CTA colors with site branding
  3. Full Width Strategy: Use fullwidth="true" for content-focused layouts
  4. No Bonus Handling: Let widget gracefully handle missing bonus data
  5. Mobile First: Test on mobile devices where most traffic occurs

Visual Design

  1. Brand Alignment: CTA colors should match brand identity
  2. Contrast Ratios: Ensure WCAG AA compliance (4.5:1 for text)
  3. Hover States: Provide clear visual feedback on interactive elements
  4. Spacing: Use full-width mode for cleaner layouts on wide screens
  5. Ribbon Visibility: Ensure social proof ribbons don’t overlap critical content

Performance

  1. Image Optimization: Compress brand logos without quality loss
  2. Lazy Loading: Consider lazy loading for below-fold headers
  3. Component Reuse: SVG sprite reduces duplicate star icons
  4. CSS Classes: Dynamic classes enable efficient styling
  5. KV Caching: Brand data cached for 1 hour

Accessibility

  1. Alt Text: Brand logos include descriptive alt attributes
  2. Keyboard Navigation: All interactive elements keyboard accessible
  3. Screen Readers: Rating component includes brand name context
  4. Focus States: Visible focus indicators on links/buttons
  5. ARIA Labels: Rating display uses semantic markup

SEO

  1. Structured Data: Add aggregate rating schema markup
  2. Descriptive Links: Meaningful text for T&C links
  3. Image Alt Tags: Include brand name in logo alt
  4. NoFollow Links: Use rel="nofollow" for affiliate links
  5. Content Hierarchy: Ensure proper heading structure on page

Advanced Configuration

Custom Button Gradient

<nw-blocks id="reviewpageheader2"
    cloakedlink="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    ctacolors='["#667eea", "#764ba2"]'
    ctahovercolors='["#5568d3", "#63408b"]'
    socialproofkey="wgt-reviewPageHeader-socialproof-ec" \>
</nw-blocks>

Multiple Headers on Same Page

<!-- Primary Recommendation -->
<nw-blocks id="review-header-primary"
    cloakedlink="top-casino"
    language="en"
    country="US"
    rating="4.9"
    fullwidth="true"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec"
    trackingdata="top-recommendation" \>
</nw-blocks>

<!-- Alternative Option -->
<nw-blocks id="review-header-alternative"
    cloakedlink="runner-up-casino"
    language="en"
    country="US"
    rating="4.7"
    socialproofkey="wgt-reviewPageHeader-socialproof-pc"
    trackingdata="alternative-option" \>
</nw-blocks>

Regional Targeting with Custom CTA

<nw-blocks id="reviewpageheader2"
    cloakedlink="betmgm-sports"
    language="en"
    country="US"
    countrystate="PA"
    rating="4.6"
    votes="287"
    ctatext="Bet in Pennsylvania"
    ctacolors='["#004d00", "#003300"]'
    socialproofkey="wgt-reviewPageHeader-socialproof-so"
    trackingdata="pa-geo-target" \>
</nw-blocks>

Dark Theme with Custom Styling

<nw-blocks id="reviewpageheader2"
    cloakedlink="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    ctacolors='["#1a1a1a", "#0d0d0d"]'
    ctahovercolors='["#2a2a2a", "#1a1a1a"]'
    fullwidth="true"
    socialproofkey="wgt-reviewPageHeader-socialproof-tr" \>
</nw-blocks>

Data Requirements

Sanity CMS Structure

The widget fetches brand data from Sanity CMS using the cloakedlink identifier:

{
  brandName: string;                 // Brand display name
  imgUrl: string;                    // Logo image URL
  trackingLink: string;              // Base tracking link
  bonusText: string;                 // Main bonus text
  additionalBonusText?: string;      // Extra bonus details
  bonusTagText?: string;             // Bonus ribbon text ("Exclusive")
  socialRibbonText?: string;         // Social proof ribbon text
  complianceDisclaimer: {
    disclaimer: string | null;       // HTML disclaimer content
  };
  isActive: boolean;                 // Brand availability status
  hasTrackingLink: boolean;          // Whether to show T&C link
  minimumAge?: string;               // Age requirement
}

KV Storage Lookup

KV Key Format: {cloakedlink}#{language}#{country}#default#tc

Example: greatwin-casino#fr#DE#default#tc

Stored Data:

  • Terms & Conditions HTML
  • Compliance disclaimers
  • Age restrictions
  • Regional-specific content

Translation Keys

Key Pattern Example Purpose
Vote Count wgt-reviewPageHeader-votecount “{count} votes”
Social Proof (sp) wgt-reviewPageHeader-socialproof-sp “Super Popular”
Social Proof (tr) wgt-reviewPageHeader-socialproof-tr “Top Rated”
Social Proof (ec) wgt-reviewPageHeader-socialproof-ec “Editor’s Choice”
Social Proof (pc) wgt-reviewPageHeader-socialproof-pc “Player’s Choice”
Social Proof (so) wgt-reviewPageHeader-socialproof-so “Special Offer”
Social Proof (eo) wgt-reviewPageHeader-socialproof-eo “Exclusive Offer”
Exclusive Bonus wgt-toplist-exclusive “Exclusive”
CTA Button cta-claim-bonus “Claim Bonus”

Error Handling

Inactive Brand

If isActive === false, the widget displays:

<p id="inactive-brand" style="display: none;">
  The brand with name {brandName} is currently inactive or not allowed in this country! (loaded with Review Header V2 widget..)
</p>

Missing Bonus Data

  • No bonusText or additionalBonusText: Widget displays <NoBonusCase> component
  • hideBonuses: true: Bonus section completely hidden
  • hideBonusRibbon: true: Exclusive tag hidden, bonus text remains
  • hideBonusText: true: Bonus text hidden, exclusive tag remains

Missing Social Proof

  • No socialproofkey: Widget renders without ribbon (top label section empty)
  • Invalid Key: Falls back to key literal as display text

Invalid Configuration

  • Malformed ctacolors: Falls back to default green ["#05842A", "#05842A"]
  • Malformed ctahovercolors: Falls back to default dark green ["#096725", "#096725"]
  • Invalid fullwidth: Treats as true (default behavior)

Comparison: ReviewPageHeader Variants

Feature ReviewPageHeader (v1) ReviewPageHeader2 (v2) ReviewPageHeader3 (v3)
Architecture Fixed 3-layout responsive Modular component-based Enhanced modular with backgrounds
Social Proof Single “User Choice” pill 6 ribbon types (sp/tr/ec/pc/so/eo) Enhanced ribbon system
Configuration JSON configuration object Direct attributes Direct attributes + background
Button Colors Via button-colors in config Direct ctacolors attribute Direct ctacolors attribute
Full Width No Optional fullwidth Optional fullwidth
Bonus Display 3 device-specific layouts Unified responsive with fallback Enhanced bonus styling
CSS Classes Static Dynamic based on data Dynamic + theme support
Component Separation Monolithic Modular (Logo, Rating, Bonuses, CTA, Disclaimer) Enhanced modular
No Bonus Handling Manual Automatic <NoBonusCase> Enhanced no-bonus display
Best For Legacy sites Modern review pages Premium brand showcases

Backward Compatibility

Legacy bw-widget Tag

All examples using <bw-widget> remain fully functional:

<bw-widget id="reviewpageheader2"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp"
    ctacolors='["#05842A", "#05842A"]'
    fullwidth="false" \>
</bw-widget>

Migration Path: Replace <bw-widget> with <nw-blocks> - all attributes remain compatible.

Attribute Naming

The widget supports both camelCase and lowercase attribute names:

  • cloakedLink / cloakedlink ✅
  • trackingLinkTarget / trackinglinktarget ✅
  • ctaKey / ctakey ✅
  • votesCountKey / votescountkey ✅