> Github Widgets Shortcodes > Review Page Header 2

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.

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

Super Popular (sp) ribbons

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...

1. Super Popular (sp)

<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

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"

Tracking Link Structure

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

1. Casino Review with Super Popular Ribbon

<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

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

User Experience

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

Visual Design

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

Performance

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

Accessibility

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

SEO

Structured Data: Add aggregate rating schema markup
Descriptive Links: Meaningful text for T&C links
Image Alt Tags: Include brand name in logo alt
NoFollow Links: Use rel="nofollow" for affiliate links
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

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

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 ✅

Review Page Header 2