Hero 2 (Toplist3-based)

Migration Notice: We are transitioning from <bw-widget> to <nw-blocks> tags. While both are currently supported for backward compatibility, <nw-blocks> is now the recommended tag for all new implementations. Existing <bw-widget> implementations will continue to function.

Overview

Hero2 is an enhanced hero widget built on the Toplist3 component architecture. Unlike the standard Hero widget, Hero2 supports social proof ribbons, vote counts, and advanced styling options. It’s designed for review pages, landing pages, and sections where social validation enhances credibility.

Key Features:

  • Social Proof Integration: Display vote counts and social proof messages
  • Toplist3 Architecture: Inherits all Toplist3 features and styling
  • Enhanced Credibility: Shows user votes and trust indicators
  • Flexible Layout: Supports multiple rows (typically 1-4 for hero sections)
  • Advanced Styling: Full control over CTA colors, gradients, and themes
  • Customizable Headings: Control heading text, level (H1-H6), and alignment
  • Intro Text Support: Add descriptive text with custom alignment
  • Star Rating: Visual rating display with customizable scores
  • Bonus Display: Welcome bonus and free spins with visibility controls
  • Responsive Design: Adapts seamlessly to all screen sizes

Basic Usage

Expand me...

With Social Proof Badge

Expand me...

With Custom CTA Colors

Expand me...

Review Page Hero

Expand me...

Attributes Reference

Attribute Type Required Default Description
id string Yes - Must be “hero2”
cloakedlink string Yes - Brand identifier/cloaked link
language string No “en” ISO 639-1 language code
currency string No “EUR” ISO 4217 currency code
country string No “fr” ISO 3166-1 country code (supports state: US-CA)
countrystate string No - State/province code (auto-parsed from country)
maxrows number No 9999 Number of brands to display (1-4 typical for hero)
rating number No 5.0 Star rating (0-5)
product string No “default” Product filter
short string No “default” Short name filter
sellingpointtype string No “general” Type of selling points to display
bonustype string No “tb” Bonus type filter (tb=table, wb=welcome)
headingtext string No "" Custom heading text
headinglevel string No “h2” Heading level (h1, h2, h3, h4, h5, h6, p)
headingalignment string No “Center” Heading alignment (Left, Center, Right)
showsubheading boolean No true Show/hide heading and intro text
headingkey string No "" Translation key for heading
introtext string No "" Introduction text below heading
introtextalignment string No “Center” Intro text alignment (Left, Center, Right)
ctatext string No "" Custom CTA button text
ctakey string No “wgt-cta-claim-bonus” Translation key for CTA text
ctacolors string/array No ["#05842A", “#05842A”] CTA button background gradient colors
ctahovercolors string/array No ["#096725", “#096725”] CTA button hover gradient colors
minwidth string No - Minimum button width (e.g., “200px”)
socialproofkey string No - Translation key for social proof message
trackinglinktarget string No "" Tracking target parameter
trackingdata string No "" Additional tracking data
trackingtarget string No "" Tracking parameter for analytics
referer string No - Referrer tracking parameter
rel string No “nofollow” Link rel attribute
target string No “_blank” Link target attribute
configuration JSON No {} Advanced configuration object

Social Proof Integration

Social Proof Key

The socialproofkey attribute enables display of trust indicators:

<nw-blocks 
    id="hero2" 
    cloakedlink="trusted-casino"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp">
</nw-blocks>

Common Social Proof Keys:

  • wgt-reviewPageHeader-socialproof-sp: Review page social proof
  • wgt-hero-social-proof: Generic hero social proof
  • wgt-top-casinos-proof: Top casinos trust badge
  • wgt-expert-choice: Expert recommendation badge

Social Proof Display

Social proof appears as:

  • Badge/Ribbon: Colored ribbon with trust message
  • Vote Count: Number of user votes/reviews
  • Trust Indicator: “Trusted by X players” message
  • Expert Badge: “Expert’s Choice” or similar designation

Example Output:

🏆 Trusted by 50,000+ Players
⭐ Expert's Choice 2025

Toplist3 Architecture

Hero2 leverages the Toplist3 component with isHero: true flag, inheriting:

Component Features

  • Advanced Layout: Grid-based responsive design
  • Social Proof Ribbons: Trust indicators and badges
  • Vote Counts: User review statistics
  • Enhanced Styling: Gradient buttons, custom themes
  • Rich Content: Comprehensive brand information

Layout Structure

<Toplist3 
  id={id} 
  data={[{...data, isHero: true}]} 
/>

Inherited Capabilities

  • Multiple selling points with checkmarks
  • Bonus display with ribbon/text controls
  • Compliance disclaimers
  • Terms & Conditions links
  • Click tracking integration
  • Responsive breakpoints (<600px mobile)

Configuration Object

Advanced configuration via JSON object:

{
  "component": {
    "images": {
      "base_url": "/logo250"
    },
    "href": {
      "rel": "nofollow",
      "target": "_blank",
      "cta": "homepage"
    },
    "theme": {
      "containerWidth": "1000",
      "cta": {
        "colors": ["#05842A", "#096725"]
      }
    }
  }
}

Images Configuration

Property Type Default Description
base_url string “/logo250” Base URL path for brand logos

Href Configuration

Property Type Default Description
rel string “nofollow” Link rel attribute
target string “_blank” Link target attribute
cta string “homepage” CTA tracking parameter

Theme Configuration

Property Type Default Description
containerWidth string “1000” Container width in pixels
cta.colors array ["#05842A", “#096725”] Button gradient [start, end]

Common Use Cases

Landing Page Hero with Social Proof

<nw-blocks 
    id="hero2" 
    cloakedlink="premium-casino" 
    language="en" 
    currency="usd" 
    maxrows="1"
    rating="4.9"
    headingtext="#1 Online Casino 2025"
    headinglevel="h1"
    headingalignment="center"
    introtext="Join 1 million+ satisfied players worldwide"
    introtextalignment="center"
    ctatext="Claim $1000 Bonus"
    ctacolors="['#FFD700', '#FFA500']"
    ctahovercolors="['#FFA500', '#FF8C00']"
    socialproofkey="wgt-hero-trusted-players" \>
</nw-blocks>

Review Page Header

<nw-blocks 
    id="hero2" 
    cloakedlink="casino-review" 
    language="en" 
    currency="eur" 
    maxrows="1"
    rating="4.7"
    headingtext="888 Casino Full Review"
    headinglevel="h1"
    headingalignment="left"
    introtext="Updated December 2025 • Expert Analysis"
    introtextalignment="left"
    socialproofkey="wgt-reviewPageHeader-socialproof-sp"
    trackinglinktarget="review-hero" \>
</nw-blocks>

Regional Hero (US State)

<nw-blocks 
    id="hero2" 
    cloakedlink="nj-casino" 
    language="en" 
    currency="usd" 
    country="US"
    maxrows="1"
    rating="4.6"
    headingtext="Best NJ Online Casino"
    headinglevel="h1"
    introtext="Licensed by NJ Division of Gaming Enforcement"
    socialproofkey="wgt-nj-licensed"
    trackinglinktarget="nj-hero" \>
</nw-blocks>

Multi-Language with Social Proof

<!-- French version -->
<nw-blocks 
    id="hero2" 
    cloakedlink="cresus-casino" 
    language="fr" 
    currency="eur" 
    rating="4.8"
    headingtext="Meilleur Casino en Ligne"
    introtext="Approuvé par 100 000+ joueurs"
    socialproofkey="wgt-trusted-fr" \>
</nw-blocks>

<!-- German version -->
<nw-blocks 
    id="hero2" 
    cloakedlink="betsson-casino" 
    language="de" 
    currency="eur" 
    rating="4.7"
    headingtext="Bestes Online Casino"
    introtext="Vertraut von 50 000+ Spielern"
    socialproofkey="wgt-trusted-de" \>
</nw-blocks>

Custom Styled with Gradient

<nw-blocks 
    id="hero2" 
    cloakedlink="exclusive-casino" 
    language="en" 
    currency="usd" 
    rating="4.9"
    headingtext="VIP Exclusive Offer"
    ctatext="Get VIP Access"
    ctacolors="['#8B00FF', '#4B0082']"
    ctahovercolors="['#4B0082', '#2E0854']"
    socialproofkey="wgt-vip-members" \>
</nw-blocks>

Best Practices

Social Proof Usage

  • Select Relevant Keys: Choose social proof messages that match page context
  • Review Pages: Use wgt-reviewPageHeader-socialproof-sp for credibility
  • Landing Pages: Use generic trust indicators like wgt-hero-trusted-players
  • Avoid Overuse: Don’t display multiple conflicting social proof messages
  • Localization: Ensure social proof keys have translations for all languages

SEO Optimization

  • H1 on Main Pages: Use headinglevel="h1" for primary page headings
  • H2 for Sections: Use headinglevel="h2" for section-level heroes
  • Descriptive Text: Write clear, keyword-rich heading and intro text
  • Semantic Structure: Maintain logical heading hierarchy
  • Schema Markup: Consider adding review schema for social proof

Content Strategy

  • Single Hero Focus: Use maxrows="1" for hero sections
  • Mini Toplists: Use maxrows="3-4" for featured lists
  • Compelling Headlines: Write action-oriented, benefit-focused headings
  • Trust Indicators: Combine social proof with high ratings
  • Clear CTA: Use explicit CTA text (“Claim Bonus”, “Read Review”)

Visual Design

  • Alignment Consistency: Match heading and intro text alignment
  • Color Harmony: Ensure CTA colors complement brand identity
  • Gradient Effects: Use subtle gradients for professional appearance
  • Rating Display: Show realistic ratings (avoid perfect 5.0)
  • Responsive Testing: Verify layout on mobile (<600px)

Performance

  • Limit Rows: Keep maxrows low (1-4) for hero sections
  • Eager Loading: Consider eager loading for above-the-fold content
  • Optimize Images: Use WebP logos with appropriate dimensions
  • Cache Strategy: Leverage CloudFlare KV caching
  • Minimal Config: Keep configuration object simple

Tracking

  • Descriptive Targets: Use clear tracking targets (“hero”, “review-hero”)
  • Include Referer: Track traffic sources with referer parameter
  • Social Proof Tracking: Monitor which social proof keys perform best
  • A/B Testing: Test different headings, CTA text, and colors
  • Conversion Tracking: Measure click-through rates by hero placement

Advanced Configuration

Custom Theme with Gradient

<nw-blocks 
    id="hero2" 
    cloakedlink="casino-brand"
    ctacolors="['#1E88E5', '#1565C0']"
    ctahovercolors="['#1565C0', '#0D47A1']"
    configuration='{
      "component": {
        "images": {"base_url": "/logo250"},
        "href": {"rel": "nofollow", "target": "_blank", "cta": "homepage"},
        "theme": {
          "containerWidth": "1200",
          "cta": {"colors": ["#1E88E5", "#1565C0"]}
        }
      }
    }' \>
</nw-blocks>

Multiple Gradient Combinations

<!-- Green to dark green (default) -->
<nw-blocks id="hero2" 
    ctacolors="['#4CAF50', '#2E7D32']"
    ctahovercolors="['#2E7D32', '#1B5E20']" \>
</nw-blocks>

<!-- Gold gradient -->
<nw-blocks id="hero2" 
    ctacolors="['#FFD700', '#FFA500']"
    ctahovercolors="['#FFA500', '#FF8C00']" \>
</nw-blocks>

<!-- Blue gradient -->
<nw-blocks id="hero2" 
    ctacolors="['#2196F3', '#1976D2']"
    ctahovercolors="['#1976D2', '#1565C0']" \>
</nw-blocks>

<!-- Purple gradient -->
<nw-blocks id="hero2" 
    ctacolors="['#9C27B0', '#7B1FA2']"
    ctahovercolors="['#7B1FA2', '#6A1B9A']" \>
</nw-blocks>

Wide Container Layout

<nw-blocks 
    id="hero2" 
    cloakedlink="..."
    configuration='{
      "component": {
        "theme": {"containerWidth": "1400"}
      }
    }' \>
</nw-blocks>

Bonus Type Filtering

<!-- Show only table bonuses -->
<nw-blocks id="hero2" bonustype="tb" \>
</nw-blocks>

<!-- Show welcome bonuses -->
<nw-blocks id="hero2" bonustype="wb" \>
</nw-blocks>

Data Requirements

Sanity CMS Structure

Hero2 fetches brand data with social proof:

{
  brand: {
    cloakedLink: "greatwin-casino",
    brandName: "GreatWin Casino",
    brandId: "brand-123",
    imgUrl: "/brands/greatwin-logo.png",
    alt: "GreatWin Casino Logo",
    rating: 4.5,
    bonus: "$1000",
    bonusExtra: "100 FS",
    bonusText: "Welcome Bonus",
    additionalBonusText: "Free Spins",
    minimumAge: "18+",
    product: "casino",
    trackingLink: "greatwin-casino",
    trackingTarget: "homepage",
    trackingData: "hero2-widget",
    hasTrackingLink: true,
    isActive: true,
    votes: "5000",
    voteCountKey: "wgt-vote-count",
    socialProofKey: "wgt-hero-social-proof",
    socialRibbonText: "Trusted by 50,000+ players",
    complianceDisclaimer: {
      disclaimer: "18+. T&Cs apply. Play responsibly."
    },
    hideBonuses: false,
    hideBonusRibbon: false,
    hideBonusText: false,
    introTextValues: [
      "Fast Withdrawals",
      "24/7 Support",
      "Licensed & Secure"
    ]
  }
}

Required Fields:

  • cloakedLink: Brand identifier
  • brandName: Casino name
  • brandId: Unique brand ID
  • imgUrl: Logo path
  • trackingLink: Cloaked link

Optional Social Proof Fields:

  • votes: Number of votes/reviews
  • voteCountKey: Translation key for vote count
  • socialProofKey: Social proof message key
  • socialRibbonText: Custom social proof text

Other Optional Fields:

  • rating: Star rating
  • bonus, bonusExtra: Bonus information
  • minimumAge: Age requirement
  • complianceDisclaimer: Legal text
  • introTextValues: Selling points array

Translation Keys

Required i18n keys:

{
  "wgt-cta-claim-bonus": "Claim Bonus",
  "wgt-reviewPageHeader-socialproof-sp": "Trusted by {count}+ players",
  "wgt-hero-social-proof": "Expert's Choice 2025",
  "wgt-vote-count": "{votes} reviews",
  "wgt-top-casinos-proof": "Top Rated Casino",
  "wgt-expert-choice": "Expert Recommended"
}

KV Storage

Brand data is cached:

  • Key: BRAND_HERO2:{cloakedLink}:{country}:{language}:{product}
  • TTL: 1 hour
  • Invalidation: On brand update

Comparison: Hero vs Hero2

Feature Hero Hero2
Architecture PuzzleTop-based Toplist3-based
Social Proof ❌ No ✅ Yes
Vote Counts ❌ No ✅ Yes
Multi-Row ⚠️ Limited ✅ Full support
Gradient CTA ✅ Yes ✅ Yes
Social Ribbons ❌ No ✅ Yes
Product Filter ❌ Not needed ✅ Yes
Use Case Simple hero Advanced hero with social proof

When to use Hero:

  • Simple featured brand display
  • No social proof needed
  • Minimalist design preference

When to use Hero2:

  • Review pages with social validation
  • Landing pages with trust indicators
  • Multi-brand hero sections (1-4 rows)
  • Advanced styling requirements

Error Handling

Inactive Brand

If brand is inactive or not allowed:

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

Handling:

  • Widget shows hidden error message
  • No visual output to users
  • Check brand isActive status in CMS
  • Verify country restrictions

Missing Social Proof

If socialproofkey has no translation:

  • Widget still renders
  • Social proof section omitted
  • Core functionality remains intact

Missing Data

Brand Not Found:

  • Verify cloakedlink is correct
  • Check brand exists in Sanity CMS
  • Ensure brand is active for country/product

No Vote Count:

  • Social proof displays without vote numbers
  • Widget layout adapts automatically

Missing Selling Points:

  • Widget renders without checklist
  • Bonus and CTA still functional

Backward Compatibility

All examples above use the new <nw-blocks> tag. For backward compatibility, you can still use <bw-widget>:

<!-- Old syntax (still supported) -->
<bw-widget 
    id="hero2" 
    cloakedlink="greatwin-casino" 
    language="en" 
    maxrows="1" 
    headingtext="Featured Casino" 
    socialproofkey="wgt-hero-social-proof" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
    id="hero2" 
    cloakedlink="greatwin-casino" 
    language="en" 
    maxrows="1" 
    headingtext="Featured Casino" 
    socialproofkey="wgt-hero-social-proof" \>
</nw-blocks>

Both tags work identically, but <nw-blocks> is recommended for all new implementations.