Review Page Header

Review Page Header

The ReviewPageHeader widget displays a comprehensive header section for casino/betting brand review pages. It combines brand logo, rating display, bonus information, social proof indicators, and call-to-action buttons in a responsive layout optimized for mobile, tablet, and desktop viewports.

Key Features

• Multi-device Layout: Separate responsive layouts for mobile, iPad, and desktop
• Social Proof Integration: “User Choice” pill indicator with customizable translation
• Flexible Bonus Display: Configurable bonus box with optional ribbon, text, and freespins
• Rating System: Star-based rating with vote count display
• Compliance Support: Automatic disclaimer and T&C link rendering
• Tracking Integration: Full tracking link support with custom targets and data
• Customizable Styling: Configurable colors, fonts, backgrounds, and button styles
• Logo Management: Responsive brand logo with size breakpoints
• Hidden Bonus Options: Control visibility of bonus ribbon, text, or entire bonus section

Demo

<nw-blocks id="reviewPageHeader"
    cloaked-link="greatwin-casino"
    language="en"
    country="FR"
    rating="3.5"
    cta-key="cta-claim-bonus"
    cta-text="Override translation"
    tracking-target="homepage"
    target="_blank"
    rel="nofollow"
    votes="64"
    vote-count-key="wgt-reviewPageHeader-votecount"
    social-proof-key="wgt-reviewPageHeader-socialproof-sp"
    configuration='{"component":{
        "images":{"base_url":"/logo300"},
        "button-colors": ["#05842A", "#05842A"],
        "font-size": "25px",
        "font-color": "#FFFFFF",
        "background": "#333A40",
        "bonus-box-background": "#41484e"
    }}' \>
</nw-blocks>

Usage Examples

Basic Implementation

<nw-blocks id="reviewPageHeader"
    cloaked-link="greatwin-casino"
    language="en"
    country="US"
    rating="4.5"
    votes="153" \>
</nw-blocks>

With Custom CTA Button

<nw-blocks id="reviewPageHeader"
    cloaked-link="greatwin-casino"
    language="fr"
    country="FR"
    rating="4.8"
    votes="287"
    cta-key="cta-visit-site"
    cta-text="Visiter le Site"
    tracking-target="homepage"
    target="_blank"
    rel="nofollow" \>
</nw-blocks>

With Social Proof and Vote Count

<nw-blocks id="reviewPageHeader"
    cloaked-link="fresh-casino"
    language="de"
    country="DE"
    rating="4.2"
    votes="64"
    vote-count-key="wgt-reviewPageHeader-votecount"
    social-proof-key="wgt-reviewPageHeader-socialproof-sp" \>
</nw-blocks>

With Custom Configuration

<nw-blocks id="reviewPageHeader"
    cloaked-link="unibet-casino"
    language="es"
    country="ES"
    rating="4.6"
    votes="192"
    cta-key="cta-claim-bonus"
    configuration='{"component":{
        "images":{"base_url":"/logo300"},
        "button-colors":["#05842A", "#05842A"],
        "font-size": "25px",
        "font-color": "#FFFFFF",
        "background": "#333A40",
        "bonus-box-background": "#41484e"
    }}' \>
</nw-blocks>

<nw-blocks id=“reviewPageHeader"cloaked-link=“unibet-casino"language=“es"country=“ES"rating=“4.6"votes=“192"cta-key=“cta-claim-bonus"configuration='{“component”:{“images”:{“base_url”:"/logo300”},“button-colors”:["#05842A”, “#05842A”],“font-size”: “25px”,“font-color”: “#FFFFFF”,“background”: “#333A40”,“bonus-box-background”: “#41484e”}}'>

Attributes Reference

Configuration Object Structure

{
  "component": {
    "images": {
      "base_url": "/logo300"  // Logo directory path
    },
    "button-colors": ["#05842A", "#05842A"],  // CTA button gradient colors
    "font-size": "25px",  // Bonus label font size
    "font-color": "#FFFFFF",  // Bonus text color
    "background": "#333A40",  // Widget background color
    "bonus-box-background": "#41484e"  // Bonus container background
  }
}

Widget Components

1. Company Logo Section

• BrandLogo Component: Responsive logo with size breakpoints
  • Mobile: 140px
  • Tablet: 200px
  • Desktop: 180px
• User Choice Pill: Social proof indicator with translation support
• Tracking Link: Wraps logo with full tracking URL

2. Rating Display

• Star Rating: Visual star display using SVG sprite
• Rating Number: Numeric rating value (0.0-5.0)
• Vote Count: User review count with translation key support
• Background: Inherits from configuration background property

3. Bonus Box

• Bonus Amount: Large display of bonus value
• Freespins: Optional additional freespins text ( + {freespins})
• Exclusive Indicator: Conditional exclusive badge on tablet view
• Responsive Sizing: Device-specific font sizes and container dimensions
  • Mobile: 22px bonus / 300px width
  • Tablet: 14px-19px bonus / 248px width
  • Desktop: 29px-35px bonus / 323px-327px width
• Hidden States: Supports hideBonusRibbon, hideBonusText, hideBonuses flags

4. CTA Button

• Button Text: From cta-text attribute or cta-key translation
• Right Arrow: Visual indicator for action
• Tracking Link: Full tracking URL with widget ID and data
• Custom Colors: Configurable button and hover colors
• Responsive: Consistent across all device sizes

5. Company Notes Section

• Minimum Age: Displayed if not “0”
• Compliance Disclaimer: HTML content from Sanity CMS
• Terms & Conditions Link: Generated when hasTrackingLink is true
  • Format: /go/{cloakedLink}/tc?wid={id}&trackingData={trackingData}
• Link Attributes: rel="nofollow", target="_blank"

Responsive Behavior

Mobile Layout (< 768px)

• Stacked Layout: Logo, rating, bonus, CTA in vertical arrangement
• Smaller Logo: 140px brand logo
• Compact Bonus: 22px font size, 300px width
• Full-width Button: CTA button spans container width

Tablet Layout (768px - 1024px)

• Split Layout: Logo + (Rating + Bonus) side-by-side
• Medium Logo: 200px brand logo
• Adjusted Bonus: 14px-19px font size, 248px width
• Exclusive Badge: Bonus displays “Exclusive” indicator

Desktop Layout (> 1024px)

• Three-column Layout: Logo | (Rating + CTA) | Bonus
• Optimized Logo: 180px brand logo
• Large Bonus: 29px font size, 327px width
• Separate Bonus: Bonus box positioned independently on right side

Tracking Link Structure

All clickable elements use the following tracking URL pattern:

/go/{cloaked-link}/{tracking-target}?wid={id}&trackingData={tracking-data}&referer={referer}

Example:

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

Special Links:

• Terms & Conditions: /go/{cloaked-link}/tc?wid={id}&trackingData={tracking-data}

Common Use Cases

1. Casino Review Page

<nw-blocks id="reviewPageHeader"
    cloaked-link="betway-casino"
    language="en"
    country="US"
    rating="4.7"
    votes="234"
    cta-key="cta-claim-bonus"
    tracking-target="review-header"
    social-proof-key="wgt-reviewPageHeader-socialproof-sp" \>
</nw-blocks>

2. Sports Betting Review

<nw-blocks id="reviewPageHeader"
    cloaked-link="draftkings-sports"
    language="en"
    country="US"
    country-state="NJ"
    rating="4.9"
    votes="512"
    cta-text="Bet Now"
    tracking-target="sportsbook-review" \>
</nw-blocks>

3. Multi-language Casino (French)

<nw-blocks id="reviewPageHeader"
    cloaked-link="cresus-casino"
    language="fr"
    country="FR"
    rating="4.5"
    votes="153"
    cta-key="wgt-cta-bet-now"
    vote-count-key="wgt-reviewPageHeader-votecount"
    social-proof-key="wgt-reviewPageHeader-socialproof-so" \>
</nw-blocks>

4. With Custom Dark Theme

<nw-blocks id="reviewPageHeader"
    cloaked-link="fresh-casino"
    language="de"
    country="DE"
    rating="4.3"
    votes="89"
    configuration='{"component":{
        "background": "#1a1a1a",
        "bonus-box-background": "#2a2a2a",
        "font-color": "#ffffff",
        "button-colors": ["#d4af37", "#c9a22b"]
    }}' \>
</nw-blocks>

5. Regional US State Targeting

<nw-blocks id="reviewPageHeader"
    cloaked-link="fanduel-casino"
    language="en"
    country="US-CO"
    rating="4.6"
    votes="378"
    cta-text="Play in Pennsylvania"
    tracking-data="co-review-header" \>
</nw-blocks>

6. With Tracking Attribution

<nw-blocks id="reviewPageHeader"
    cloaked-link="unibet-sports"
    language="en"
    country="UK"
    rating="4.8"
    votes="421"
    tracking-target="review-comparison"
    tracking-data="header-click"
    referer="best-bookmakers-2024" \>
</nw-blocks>

Best Practices

Content Strategy

1. Accurate Ratings: Ensure rating reflects actual user reviews (sync with review system)
2. Vote Count Updates: Keep vote counts current to maintain credibility
3. Consistent Branding: Use proper brand names and logos from CMS
4. Compliance First: Always include required disclaimers and age restrictions
5. Localized Content: Match language/country to target audience

User Experience

1. Clear CTAs: Use action-oriented button text (“Claim Bonus”, “Visit Site”)
2. Social Proof: Enable User Choice pill for high-performing brands
3. Responsive Testing: Verify layout on mobile, tablet, and desktop
4. Quick Load: Optimize logo images for fast rendering
5. Accessible Colors: Ensure sufficient contrast for readability

Visual Design

1. Brand Colors: Align button colors with site theme
2. Contrast Ratios: Maintain WCAG AA standards (4.5:1 for text)
3. Consistent Sizing: Use configuration for uniform styling across reviews
4. Bonus Prominence: Highlight bonus without overwhelming other content
5. Logo Quality: Use high-resolution logos (300px recommended)

Performance

1. Image Optimization: Compress logo files without quality loss
2. Lazy Loading: Consider lazy loading for below-fold headers
3. Cache Strategy: Leverage browser caching for logo assets
4. Minimize Configuration: Only include necessary config overrides
5. KV Lookup: Cache brand data for 1 hour to reduce API calls

Accessibility

1. Alt Text: Ensure brand logos have descriptive alt attributes
2. Keyboard Navigation: All interactive elements must be keyboard accessible
3. Screen Readers: Use semantic HTML structure
4. Focus Indicators: Maintain visible focus states on buttons/links
5. ARIA Labels: Add ARIA labels for rating displays

SEO

1. Structured Data: Add schema markup for aggregate ratings
2. Descriptive Links: Use meaningful link text for T&C links
3. Image Alt Tags: Include brand name in logo alt attributes
4. Heading Hierarchy: Ensure proper H-tag structure on review page
5. NoFollow Links: Use rel="nofollow" for affiliate links

Advanced Configuration

Custom Button Colors with Gradients

<nw-blocks id="reviewPageHeader"
    cloaked-link="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    configuration='{"component":{
        "button-colors": ["#ff6b35", "#f7931e"]
    }}' \>
</nw-blocks>

Dark Theme with Custom Fonts

<nw-blocks id="reviewPageHeader"
    cloaked-link="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    configuration='{"component":{
        "background": "#0d0d0d",
        "bonus-box-background": "#1a1a1a",
        "font-color": "#e0e0e0",
        "font-size": "22px",
        "button-colors": ["#4a90e2", "#357abd"]
    }}' \>
</nw-blocks>

Custom Logo Directory

<nw-blocks id="reviewPageHeader"
    cloaked-link="casino-brand"
    language="en"
    country="US"
    rating="4.5"
    configuration='{"component":{
        "images": {"base_url": "/cdn/logos/review-headers"}
    }}' \>
</nw-blocks>

Multiple Headers on Same Page

<!-- Top Recommended -->
<nw-blocks id="reviewHeader-top"
    cloaked-link="top-casino"
    language="en"
    country="US"
    rating="4.9"
    tracking-data="top-recommendation" \>
</nw-blocks>

<!-- Runner-up -->
<nw-blocks id="reviewHeader-runner"
    cloaked-link="runner-up-casino"
    language="en"
    country="US"
    rating="4.7"
    tracking-data="runner-up" \>
</nw-blocks>

Data Requirements

Sanity CMS Structure

The widget fetches brand data from Sanity CMS using the cloaked-link identifier:

{
  brandName: string;           // Brand display name
  imgUrl: string;              // Logo image URL
  trackingLink: string;        // Base tracking link
  bonus: string;               // Main bonus text (e.g., "100% up to $500")
  bonusExtra?: string;         // Additional bonus details
  extraFreespins?: string;     // Freespins count (e.g., "50 Free Spins")
  complianceDisclaimer: {
    disclaimer: string | null; // HTML disclaimer content
  };
  isActive: boolean;           // Brand availability status
  hasTrackingLink: boolean;    // Whether to show T&C link
}

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

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 widget..)
</p>

Missing Data

• No Logo: Widget may fail to render or show placeholder
• No Bonus: Bonus section is hidden automatically
• No Rating: Falls back to default "5.0"
• No Votes: Falls back to default "153"
• No CTA Text: Uses translation key or shows blank button

Invalid Configuration

• Malformed JSON: Widget uses default configuration
• Missing Colors: Falls back to default green (#05842A)
• Invalid Font Size: Uses default sizing

Comparison: ReviewPageHeader Variants

Backward Compatibility

Legacy bw-widget Tag

<bw-widget id="reviewPageHeader"
    cloaked-link="greatwin-casino"
    language="fr"
    country="DE"
    rating="3.5"
    configuration='{"component":{
        "button-colors": ["#05842A", "#05842A"]
    }}' \>
</bw-widget>

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

Configuration Object Changes

The widget continues to support the legacy configuration JSON attribute with kebab-case properties:

• button-colors → parsed to buttonColors array
• font-size → mapped to fontSize
• font-color → mapped to fontColor
• bonus-box-background → mapped to bonusBoxBackground