> Github Widgets Shortcodes > Review Page Header 3

Review Page Header 3

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

Super Popular (sp) ribbons

Expand me...

Top Rated (tr) ribbons

Expand me...

Editor’s choice (ec) ribbons

Expand me...

Light Background

Expand me...

Dark Background

Expand me...

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

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 with optional state (e.g., “US-NJ”, “CA-ON”)
`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
`exclusivebonuskey`	string	No	`"wgt-toplist-exclusive"`	Translation key for bonus label
`ctakey`	string	No	-	Translation key for CTA button text
`ctatext`	string	No	-	Override CTA button text (bypasses translation)
`ctacolors`	string/JSON	No	`"#05842A"`	CTA button color (solid or array for gradient)
`ctahovercolors`	string/JSON	No	`"#096725"`	CTA button hover color
`background`	string	No	-	Widget background theme (“light”, “dark”, or custom value)
`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
`fullwidth`	boolean/string	No	`true`	Enable full-width container layout

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

Class	Condition	Purpose
`is-fw`	`fullwidth="true"`	Full-width container layout
`no-label-bonus`	No `bonusTagText`	Hide bonus label section
`label-has-bonus`	`bonusTagText` exists	Style bonus label container
`show-mobile`	CSS media query	Display only on mobile
`show-desktop`	CSS media query	Display only on desktop/tablet

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

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

User Experience

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

Visual Design

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

Performance

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

Accessibility

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

SEO

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

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”
Bonus Label	`wgt-social-ribbon-sp`	“Exclusive” / ribbon-specific
CTA Button	`cta-claim-bonus`	“Claim Bonus”

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

Feature	v1	v2	v3 (Current)
Architecture	Fixed 3-layout	Modular components	Enhanced modular
Background Themes	No	No	✅ Light/Dark/Custom
Social Proof	Single pill	6 ribbon types	6 ribbon types
Clickable Bonus	No	No	✅ Entire section
Button Colors	JSON config	Direct attribute	Solid or gradient
State Parsing	Manual	Manual	✅ Hyphen format (US-NJ)
Tracking URLs	Inline	Inline	✅ Utility function
Background Normalization	No	No	✅ Utility function
Mobile Layout	Fixed	Responsive	✅ Optimized separate
CSS Classes	Static	Dynamic	✅ Enhanced dynamic
ARIA Labels	Basic	Basic	✅ Enhanced accessibility
Component Naming	Standard	Standard	✅ Versioned (Logo3, Rating3)
Best For	Legacy sites	Modern sites	Premium showcases

Backward Compatibility

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 ✅

Review Page Header 3