Review Page Header 3

Review Page Header 3

The ReviewPageHeader3 widget is the most advanced review page header variant, featuring enhanced styling with custom background themes, refined bonus label positioning, mobile-first responsive design, and optimized tracking link architecture. Built on the modular foundation of v2 with premium visual enhancements.

Key Features

• Custom Background Themes: Light/dark/custom background support via background attribute
• Enhanced Bonus Labels: Refined positioning with data attributes for advanced styling
• Mobile-Desktop Layouts: Separate optimized layouts for mobile and desktop viewports
• Clickable Bonus Sections: Entire bonus area is a tracking link for improved CTR
• Normalized Background: Utility function normalizeBackgroundMain() for consistent theming
• Tracking URL Builder: Dedicated buildTrackingUrl() utility for cleaner link generation
• Social Proof Ribbons: Six ribbon types (sp/tr/ec/pc/so/eo) with translation keys
• State Code Support: Enhanced US/CA state parsing with hyphen separator (e.g., “US-NJ”)
• Modular Components: Separated Logo3, Rating3, Bonuses3, CTA3, Disclaimer3 components
• Accessibility Enhanced: ARIA labels on clickable bonus sections

Demo Examples

Light Background

<nw-blocks id="reviewpageheader3-light"
    cloakedlink="greatwin-casino"
    language="fr"
    country="ZZ"
    rating="5.0"
    ctakey="cta-claim-bonus"
    ctatext="Override translation"
    trackinglinktarget="homepage"
    target="_blank"
    rel="nofollow"
    votes="153"
    votescountkey="wgt-reviewPageHeader-votecount"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp"
    exclusivebonuskey="wgt-toplist-exclusive"
    ctacolors="#05842A"
    fullwidth="false"
    background="light"
    ctahovercolors="#096725">
</nw-blocks>

Dark Background

<nw-blocks id="reviewpageheader3-dark"
    cloakedlink="greatwin-casino"
    language="fr"
    country="ZZ"
    rating="5.0"
    ctakey="cta-claim-bonus"
    ctatext="Override translation"
    trackinglinktarget="homepage"
    target="_blank"
    rel="nofollow"
    votes="153"
    votescountkey="wgt-reviewPageHeader-votecount"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp"
    exclusivebonuskey="wgt-toplist-exclusive"
    ctacolors="#05842A"
    fullwidth="false"
    background="dark"
    ctahovercolors="#096725">
</nw-blocks>

Usage Examples

Basic Implementation

<nw-blocks id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="en"
    country="US"
    rating="4.5"
    votes="153">
</nw-blocks>

With Light Background Theme

<nw-blocks id="reviewpageheader3"
    cloakedlink="betway-sports"
    language="fr"
    country="FR"
    rating="4.8"
    votes="287"
    background="light"
    ctakey="cta-visit-site"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp">
</nw-blocks>

With Dark Background Theme

<nw-blocks id="reviewpageheader3"
    cloakedlink="fresh-casino"
    language="de"
    country="DE"
    rating="4.9"
    votes="421"
    background="dark"
    ctacolors="#d4af37"
    ctahovercolors="#c9a22b"
    socialproofkey="wgt-reviewPageHeader-socialproof-tr">
</nw-blocks>

Full Width with Custom Colors

<nw-blocks id="reviewpageheader3"
    cloakedlink="unibet-casino"
    language="es"
    country="ES"
    rating="4.6"
    votes="192"
    fullwidth="true"
    ctacolors="#ff6b35"
    ctahovercolors="#e85a2a"
    exclusivebonuskey="wgt-toplist-exclusive"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec">
</nw-blocks>

Regional US State with Hyphen Separator

<nw-blocks id="reviewpageheader3"
    cloakedlink="draftkings-sports"
    language="en"
    country="US"
    rating="4.7"
    votes="512"
    ctatext="Bet in New Jersey"
    background="light"
    socialproofkey="wgt-reviewPageHeader-socialproof-so">
</nw-blocks>

Social Proof Ribbon Types

1. Super Popular (sp)

<nw-blocks id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp"
    exclusivebonuskey="wgt-social-ribbon-sp">
</nw-blocks>

Use Case: Brands with highest traffic/engagement

2. Top Rated (tr)

<nw-blocks id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-tr"
    exclusivebonuskey="wgt-social-ribbon-tr">
</nw-blocks>

Use Case: Brands with highest user ratings

3. Editor’s Choice (ec)

<nw-blocks id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec"
    exclusivebonuskey="wgt-social-ribbon-ec">
</nw-blocks>

Use Case: Editorial team recommendations

4. Light Background Theme

<nw-blocks id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="fr"
    country="ZZ"
    rating="5.0"
    background="light"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp">
</nw-blocks>

Use Case: Sites with light color schemes

5. Dark Background Theme

<nw-blocks id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="fr"
    country="ZZ"
    rating="5.0"
    background="dark"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp">
</nw-blocks>

Use Case: Sites with dark/night mode themes

Attributes Reference

Widget Components

1. Bonus Label Section

• Component: <LabelBonus3>
• Position: Top of widget with data attribute
• Styling: Uses data-bonus attribute for CSS targeting
• CSS Classes: .label-has-bonus when bonus text exists
• Conditional: Only displays if bonusTagText is provided

2. Logo Section (Left Column)

• Component: <Logo3>
• Position: Left side of widget
• Tracking: Full tracking URL with target and referer
• Responsive: Optimized sizing for all viewports

3. Rating Display

• Components: <Rating3> + <StarSprite>
• Mobile Layout: Positioned in right column, below bonuses
• Desktop Layout: Positioned in left column, below logo
• Visibility Classes: .show-mobile and .show-desktop
• Background Aware: Receives normalizedBgMain for theme adaptation

4. Bonuses Section (Clickable)

• Component: <Bonuses3> wrapped in <a> tag
• Mobile Layout: In left column (below logo)
• Desktop Layout: In right column (top section)
• Tracking: Entire section is clickable with full tracking URL
• ARIA: aria-label="Open {brandName}" for accessibility
• Data Attributes: data-tracking and data-referer for analytics

5. CTA Button

• Component: <CtaButton3>
• Position: Right column bottom
• Colors: Supports solid colors or gradient arrays
• Hover States: Configurable via ctahovercolors

6. Disclaimer Section

• Component: <Disclaimer3>
• Position: Bottom row spanning full width
• Conditional: Only displays if hasDisclaimer is true
• Content: Age requirement + compliance HTML + T&C link

Background Theme System

normalizeBackgroundMain() Utility

The widget uses a normalization function to handle background values:

normalizeBackgroundMain(background, backgroundMain)

Behavior:

• background="light" → Returns light theme value
• background="dark" → Returns dark theme value
• background="custom-value" → Returns custom value
• Falls back to backgroundMain prop if background not provided

Usage in Component:

const normalizedBgMain = normalizeBackgroundMain(
  data.background,
  data.backgroundMain
);

Tracking Link Architecture

buildTrackingUrl() Utility

Dedicated utility function for clean tracking URL generation:

buildTrackingUrl({
  trackingLink: string,
  trackingTarget?: string,
  id: string,
  trackingData?: string,
  referer?: string
})

Returns: /go/{trackingLink}/{trackingTarget}?wid={id}&trackingData={trackingData}&referer={referer}

Usage in Bonuses Section:

<a
  href={trackingHref}
  target={data.target || '_blank'}
  rel={data.rel ?? 'nofollow'}
  aria-label={`Open ${data.brandName}`}
>
  <Bonuses3 bonus={data.bonusText} bonusExtra={data.additionalBonusText} />
</a>

Responsive Behavior

Mobile Layout (< 768px)

• Column Order: Logo → Bonuses (clickable) → Rating → CTA
• Stacked Layout: All components in vertical arrangement
• Bonuses Position: Left column below logo (.show-mobile)
• Rating Position: Right column above CTA (.show-mobile)
• Full Width: Components span container width

Desktop Layout (≥ 768px)

• Two-Column Layout: Left (logo + rating) | Right (bonuses + CTA)
• Bonuses Position: Right column top (.show-desktop)
• Rating Position: Left column below logo (.show-desktop)
• Clickable Area: Entire bonus section is interactive
• Enhanced Spacing: More generous whitespace

Dynamic CSS Classes

Common Use Cases

1. Premium Casino with Light Theme

<nw-blocks id="reviewpageheader3"
    cloakedlink="betway-casino"
    language="en"
    country="US"
    rating="4.7"
    votes="234"
    background="light"
    ctacolors="#4a90e2"
    ctahovercolors="#357abd"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp">
</nw-blocks>

2. Sports Betting with Dark Theme

<nw-blocks id="reviewpageheader3"
    cloakedlink="draftkings-sports"
    language="en"
    country="US"
    rating="4.9"
    votes="512"
    background="dark"
    ctacolors="#ff6b35"
    ctahovercolors="#e85a2a"
    socialproofkey="wgt-reviewPageHeader-socialproof-tr">
</nw-blocks>

3. Multi-language with Custom Background

<nw-blocks id="reviewpageheader3"
    cloakedlink="cresus-casino"
    language="fr"
    country="FR"
    rating="4.5"
    votes="153"
    background="#f5f5f5"
    ctakey="cta-jouer-maintenant"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec">
</nw-blocks>

4. Regional US State (New Jersey)

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

5. Full Width Editor’s Choice

<nw-blocks id="reviewpageheader3"
    cloakedlink="fresh-casino"
    language="de"
    country="DE"
    rating="4.3"
    votes="89"
    fullwidth="true"
    background="dark"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec"
    exclusivebonuskey="wgt-editors-pick">
</nw-blocks>

6. Canadian Province Targeting

<nw-blocks id="reviewpageheader3"
    cloakedlink="betmgm-casino"
    language="en"
    country="CA-ON"
    rating="4.8"
    votes="421"
    background="light"
    ctatext="Play in Ontario"
    trackingdata="on-review">
</nw-blocks>

7. Player’s Choice with Tracking

<nw-blocks id="reviewpageheader3"
    cloakedlink="unibet-sports"
    language="en"
    country="UK"
    rating="4.8"
    votes="421"
    trackinglinktarget="review-page"
    trackingdata="player-choice-click"
    referer="comparison-table"
    socialproofkey="wgt-reviewPageHeader-socialproof-pc">
</nw-blocks>

8. Exclusive Offer with Custom Styling

<nw-blocks id="reviewpageheader3"
    cloakedlink="williamhill-casino"
    language="en"
    country="US"
    rating="4.7"
    votes="298"
    background="#1a1a1a"
    ctacolors="#d4af37"
    ctahovercolors="#c9a22b"
    socialproofkey="wgt-reviewPageHeader-socialproof-eo"
    exclusivebonuskey="wgt-site-exclusive">
</nw-blocks>

Best Practices

Content Strategy

1. Theme Selection: Choose light/dark based on site color scheme
2. Background Consistency: Use same background theme across similar pages
3. Ribbon Accuracy: Assign social proof ribbons based on real metrics
4. State Codes: Use hyphen format for US/CA states (e.g., “US-NJ”, “CA-ON”)
5. CTA Clarity: Match button text to user intent and locale

User Experience

1. Clickable Bonuses: Entire bonus section is clickable for improved CTR
2. Color Contrast: Ensure CTA buttons contrast well with background theme
3. Mobile First: Test on mobile devices where most traffic occurs
4. Loading Performance: Optimize logo images for fast rendering
5. Accessibility: Leverage ARIA labels on clickable sections

Visual Design

1. Theme Harmony: Match background attribute to site design system
2. Button Colors: Use brand colors that complement background
3. Contrast Ratios: Maintain WCAG AA standards (4.5:1 for text)
4. Hover States: Provide clear visual feedback on interactive elements
5. Bonus Label: Use exclusivebonuskey to customize bonus ribbon text

Performance

1. Normalized Backgrounds: Utility function prevents redundant calculations
2. Tracking URLs: Centralized buildTrackingUrl() reduces code duplication
3. Component Modularity: Separate components enable code splitting
4. CSS Classes: Dynamic classes avoid inline style calculations
5. Image Optimization: Compress brand logos without quality loss

Accessibility

1. ARIA Labels: Clickable bonus sections include descriptive labels
2. Keyboard Navigation: All interactive elements keyboard accessible
3. Screen Readers: Rating component includes brand context
4. Focus Indicators: Visible focus states on links/buttons
5. Semantic HTML: Proper use of anchor tags for tracking links

SEO

1. Structured Data: Add aggregate rating schema markup
2. Descriptive Links: Use meaningful text for T&C links
3. Image Alt Tags: Include brand name in logo alt attributes
4. NoFollow Links: Use rel="nofollow" for affiliate links
5. Noopener/Noreferrer: Automatically added for _blank targets

Advanced Configuration

Custom Background Color

<nw-blocks id="reviewpageheader3"
    cloakedlink="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    background="#2c3e50"
    ctacolors="#e74c3c"
    ctahovercolors="#c0392b">
</nw-blocks>

Gradient CTA Button

<nw-blocks id="reviewpageheader3"
    cloakedlink="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    background="dark"
    ctacolors='["#667eea", "#764ba2"]'
    ctahovercolors='["#5568d3", "#63408b"]'>
</nw-blocks>

Multiple Headers with Different Themes

<!-- Primary: Light Theme -->
<nw-blocks id="review-header-primary"
    cloakedlink="top-casino"
    language="en"
    country="US"
    rating="4.9"
    background="light"
    fullwidth="true"
    socialproofkey="wgt-reviewPageHeader-socialproof-ec">
</nw-blocks>

<!-- Alternative: Dark Theme -->
<nw-blocks id="review-header-alternative"
    cloakedlink="runner-up-casino"
    language="en"
    country="US"
    rating="4.7"
    background="dark"
    socialproofkey="wgt-reviewPageHeader-socialproof-pc">
</nw-blocks>

Regional with Full Tracking

<nw-blocks id="reviewpageheader3"
    cloakedlink="betmgm-sports"
    language="en"
    country="US-PA"
    rating="4.6"
    votes="287"
    background="light"
    ctatext="Bet in Pennsylvania"
    trackinglinktarget="review-page"
    trackingdata="pa-header-click"
    referer="best-pa-sportsbooks"
    ctacolors="#004d00"
    ctahovercolors="#003300">
</nw-blocks>

Data Requirements

Sanity CMS Structure

{
  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 label text
  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

Translation Keys

Error Handling

Inactive Brand

If isActive === false, 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 V3 widget..)
</p>

Missing Bonus Data

• No bonusTagText: .no-label-bonus class applied, label hidden
• No bonusText/additionalBonusText: Bonus section still renders but empty
• Entire bonus section remains clickable regardless of content

Invalid Background

• Undefined background: Falls back to backgroundMain prop
• Invalid Value: Passes through to CSS (may result in no styling)

State Code Parsing

• Format “US-NJ”: Splits to country=“US”, countryState=“NJ”
• Format “US”: country=“US”, countryState=undefined
• No Hyphen: Uses full string as country code

Comparison: ReviewPageHeader Variants

Backward Compatibility

Legacy bw-widget Tag

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

<bw-widget id="reviewpageheader3"
    cloakedlink="greatwin-casino"
    language="fr"
    country="DE"
    rating="5.0"
    background="light"
    ctacolors="#05842A"
    ctahovercolors="#096725">
</bw-widget>

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

Attribute Naming

Supports both camelCase and lowercase:

• cloakedLink / cloakedlink ✅
• trackingLinkTarget / trackinglinktarget ✅
• ctaKey / ctakey ✅
• votesCountKey / votescountkey ✅
• socialProofKey / socialproofkey ✅
• exclusiveBonusKey / exclusivebonuskey ✅