> Github Widgets Shortcodes > Hero Widget

Hero Widget

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

The Hero widget is a specialized single-row toplist designed for prominent placement at the top of pages. It displays one featured casino or betting brand with comprehensive information including logo, rating, bonus details, selling points, and a call-to-action button. Perfect for hero sections, landing pages, and featured brand showcases.

Key Features:

Single Brand Focus: Displays one featured brand with maximum impact
Comprehensive Display: Logo, rating, bonus, selling points, and CTA
Customizable Heading: Control heading text, level (H1-H6), and alignment
Star Rating: Visual rating display with customizable scores
Bonus Showcase: Display welcome bonus and free spins
Selling Points Checklist: Highlight key brand features with checkmarks
Responsive Design: Adapts to mobile and desktop layouts
CTA Integration: Customizable call-to-action button with tracking
SEO Optimized: Configurable heading levels for proper page structure

Basic Usage

Expand me...

With H2 Heading (SEO)

Expand me...

With Custom CTA

Expand me...

With Intro Text

Expand me...

Attributes Reference

Attribute	Type	Required	Default	Description
`id`	string	Yes	-	Must be “hero”
`cloaked-link`	string	Yes	-	Brand identifier/cloaked link
`language`	string	No	“en”	ISO 639-1 language code
`currency`	string	No	“EUR”	ISO 4217 currency code (EUR, USD, GBP, etc.)
`country`	string	No	“fr”	ISO 3166-1 country code (supports state: US-CA)
`country-state`	string	No	-	State/province code (auto-parsed from country)
`rating`	number	No	4.5	Star rating (0-5)
`max-rows`	number	No	1	Always set to 1 for hero widget
`heading-text`	string	No	""	Custom heading text
`heading-level`	string	No	“h2”	Heading level (h1, h2, h3, h4, h5, h6, p)
`heading-alignment`	string	No	“Center”	Heading alignment (Left, Center, Right)
`show-sub-heading`	boolean	No	true	Show/hide heading and intro text
`intro-text`	string	No	""	Introduction text below heading
`intro-text-alignment`	string	No	“Center”	Intro text alignment (Left, Center, Right)
`cta-text`	string	No	""	Custom CTA button text (uses i18n if empty)
`cta-key`	string	No	“wgt-cta-claim-bonus”	Translation key for CTA text
`cta-colors`	string/array	No	“#05842A”	CTA button background color(s)
`cta-hover-colors`	string/array	No	“#096725”	CTA button hover color(s)
`min-width`	string	No	-	Minimum button width (e.g., “200px”)
`tracking-target`	string	No	""	Tracking parameter for analytics
`tracking-data`	string	No	""	Additional tracking data
`referer`	string	No	-	Referrer tracking parameter
`bonus-type`	string	No	“tb”	Bonus type filter
`eager-count`	number	No	0	Number of images to load eagerly
`configuration`	JSON	No	{}	Advanced configuration object

Configuration Object

The configuration attribute accepts a JSON object with advanced settings:

{
  "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 (affects responsive breakpoints)
`cta.colors`	array	["#05842A", “#096725”]	CTA button gradient colors [start, end]

Brand Display

Logo:

High-quality brand logo (250px size recommended)
Configurable base URL for logo path
Lazy/eager loading support
Alt text from brand data

Brand Name:

H4 heading with brand name
Optional link to review page
Displayed prominently next to logo

Star Rating:

Visual star rating display (0-5 stars)
Customizable rating value
SVG sprite for consistent rendering
Half-star support for decimal ratings

Bonus Information

Bonus Display:

Welcome bonus amount
Additional free spins bonus
Currency-aware formatting
Optional ribbon with “Bonus” label
Can hide bonus ribbon or text independently

Bonus Controls:

hideBonusRibbon: Hide “Bonus” heading
hideBonusText: Hide bonus amounts
Both from CMS configuration

Selling Points Checklist

Features:

Green checkmark bullets
Up to 3-4 key selling points
Responsive display (hides on mobile <600px)
Localized text from CMS

Common Selling Points:

“Fast Payouts”
“24/7 Support”
“Licensed & Secure”
“Mobile App Available”

Call-to-Action Button

Features:

Customizable text and colors
Gradient color support
Hover state animation
Tracking URL with parameters
Configurable min-width
Responsive sizing

URL Structure:

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

Compliance Disclaimer

Displays:

Minimum age requirement
Compliance disclaimer text (from CMS)
Terms & Conditions link
Proper rel=“nofollow” attributes

Heading Configuration

Heading Levels

Use appropriate heading levels for SEO structure:

<!-- H1 for main page heading -->
<nw-blocks id="hero" heading-level="h1" heading-text="Best Online Casinos 2025"\>
</nw-blocks>

<!-- H2 for section headings -->
<nw-blocks id="hero" heading-level="h2" heading-text="Featured Casino"\>
</nw-blocks>

<!-- H3 for sub-sections -->
<nw-blocks id="hero" heading-level="h3" heading-text="Top Welcome Bonus"\>
</nw-blocks>

Heading Alignment

Control visual alignment:

<!-- Left aligned -->
<nw-blocks id="hero" heading-alignment="Left"\>
</nw-blocks>

<!-- Center aligned (default) -->
<nw-blocks id="hero" heading-alignment="Center"\>
</nw-blocks>

<!-- Right aligned -->
<nw-blocks id="hero" heading-alignment="Right"\>
</nw-blocks>

Intro Text

Add descriptive text below heading:

<nw-blocks 
  id="hero" 
  heading-text="Welcome to Premium Casino"
  intro-text="Get up to $1000 bonus + 100 free spins on your first deposit"
  intro-text-alignment="center"\>
</nw-blocks>

Common Use Cases

Landing Page Hero Section

<nw-blocks 
  id="hero" 
  cloaked-link="featured-casino" 
  language="en" 
  currency="usd" 
  rating="4.9"
  heading-text="#1 Rated Casino 2025"
  heading-level="h1"
  heading-alignment="center"
  intro-text="Join 1 million+ players winning big every day"
  cta-text="Start Playing Now"
  cta-colors="#FF6B00"
  cta-hover-colors="#E65100"
  tracking-target="landing-hero"
  eager-count="1"
  configuration='{"component":{"images":{"base_url":"/logo250"},"href":{"rel":"nofollow","target":"_blank","cta":"homepage"}}}'\>
</nw-blocks>

Review Page Hero

<nw-blocks 
  id="hero" 
  cloaked-link="fresh-casino" 
  language="en" 
  currency="gbp" 
  rating="4.7"
  heading-text="888 Casino Review"
  heading-level="h2"
  heading-alignment="left"
  intro-text="Established in 1997 • Licensed by UKGC • 2000+ Games"
  cta-text="Visit Casino"
  tracking-target="review-hero"
  configuration='{"component":{"images":{"base_url":"/logo250"},"href":{"rel":"nofollow","target":"_blank","cta":"review"}}}'\>
</nw-blocks>

Multi-Language Hero

<!-- French version -->
<nw-blocks 
  id="hero" 
  cloaked-link="cresus-casino" 
  language="fr" 
  currency="eur" 
  rating="4.6"
  heading-text="Meilleur Casino en Ligne"
  intro-text="Bonus de bienvenue jusqu'à 500€"\>
</nw-blocks>

<!-- German version -->
<nw-blocks 
  id="hero" 
  cloaked-link="betsson-casino" 
  language="de" 
  currency="eur" 
  rating="4.8"
  heading-text="Bestes Online Casino"
  intro-text="Willkommensbonus bis zu 500€" \>
</nw-blocks>

Regional Hero (US State)

<nw-blocks 
  id="hero" 
  cloaked-link="draftkings-casino" 
  language="en" 
  currency="usd" 
  country="US"
  rating="4.5"
  heading-text="Top NJ Online Casino"
  intro-text="Licensed by New Jersey Division of Gaming Enforcement"
  tracking-target="nj-hero" \>
</nw-blocks>

Minimal Hero (No Heading)

<nw-blocks 
  id="hero" 
  cloaked-link="leovegas-casino" 
  language="en" 
  currency="eur" 
  rating="4.7"
  show-sub-heading="false"
  configuration='{"component":{"images":{"base_url":"/logo250"},"href":{"rel":"nofollow","target":"_blank","cta":"homepage"}}}' \>
</nw-blocks>

Custom Styled CTA

<nw-blocks 
  id="hero" 
  cloaked-link="betmgm-casino" 
  language="en" 
  currency="usd" 
  rating="4.6"
  heading-text="Exclusive Offer"
  cta-text="Get $25 Free Play"
  cta-colors='["#FFD700", "#FFA500"]'
  cta-hover-colors='["#FFA500", "#FF8C00"]'
  min-width="250px" \>
</nw-blocks>

Best Practices

SEO Optimization

H1 Usage: Use heading-level="h1" only once per page on main hero
H2 for Sections: Use heading-level="h2" for section-level heroes
Descriptive Headings: Write clear, keyword-rich heading text
Proper Structure: Maintain logical heading hierarchy throughout page
Alt Text: Ensure brand logos have descriptive alt text (from CMS)

Content Strategy

Place hero at top of page for maximum visibility
Use compelling heading that highlights main value proposition
Keep intro text concise (1-2 sentences)
Highlight best features in selling points checklist
Display competitive rating (4.0+ recommended)

Visual Design

Alignment: Center alignment works best for heroes
Heading Level: Use H1 for main page title, H2 for section heroes
Rating Display: Show realistic ratings (avoid perfect 5.0)
CTA Colors: Use contrasting colors that stand out
Responsive: Test on mobile devices (<600px width)

CTA Optimization

Use action-oriented CTA text (“Claim Bonus”, “Start Playing”)
Match CTA colors to brand identity
Ensure sufficient color contrast for accessibility
Set appropriate min-width for button consistency
Include tracking parameters for analytics

Performance

Set eager-count="1" to load hero logo immediately
Use optimized logo images (WebP format recommended)
Keep configuration object minimal
Cache brand data for faster loading

Tracking

Use descriptive tracking targets (“hero”, “landing-hero”, “review-hero”)
Include referer parameter to track traffic sources
Monitor conversion rates by hero placement
Test different CTA text and colors

Regional Compliance

Set correct country for regional availability
Display appropriate currency for region
Use state codes for US markets (US-NJ, US-PA, etc.)
Ensure compliance disclaimer is visible
Show age requirements prominently

Advanced Configuration

Custom Theme

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

Multiple CTA Colors (Gradient)

<!-- Gradient from green to dark green -->
<nw-blocks 
  id="hero" 
  cta-colors='["#4CAF50", "#2E7D32"]'
  cta-hover-colors='["#2E7D32", "#1B5E20"]' \>
</nw-blocks>

<!-- Gold gradient -->
<nw-blocks 
  id="hero" 
  cta-colors='["#FFD700", "#FFA500"]'
  cta-hover-colors='["#FFA500", "#FF8C00"]' \>
</nw-blocks>

Eager Image Loading

<!-- Load hero logo immediately (no lazy loading) -->
<nw-blocks 
  id="hero" 
  cloaked-link="..." 
  eager-count="1" \>
</nw-blocks>

Bonus Type Filter

<!-- Show only table bonuses -->
<nw-blocks id="hero" bonus-type="tb" \>
</nw-blocks>

<!-- Show welcome bonuses -->
<nw-blocks id="hero" bonus-type="wb" \>
</nw-blocks>

Data Requirements

Sanity CMS Structure

Hero widget fetches single brand data:

{
  brand: {
    cloakedLink: "greatwin-casino",
    brandName: "GreatWin Casino",
    imgUrl: "/brands/greatwin-logo.png",
    rating: 4.5,
    bonus: "$1000",
    extraFreespins: "100 FS",
    minimumAge: "18+",
    reviewPageUrl: { url: "greatwin-casino-review" },
    complianceDisclaimer: {
      disclaimer: "18+. T&Cs apply. Play responsibly."
    },
    introTextValues: [
      "Fast Withdrawals",
      "24/7 Support",
      "Licensed by MGA"
    ],
    hasTrackingLink: true,
    isActive: true
  }
}

Required Fields:

cloakedLink: Brand identifier
brandName: Casino name
imgUrl: Logo path
trackingLink: Cloaked link for CTA

Optional Fields:

rating: Star rating (0-5)
bonus: Welcome bonus text
extraFreespins: Additional free spins
minimumAge: Age requirement
reviewPageUrl: Link to review page
complianceDisclaimer: Legal disclaimer
introTextValues: Selling points array
hasTrackingLink: Show T&C link

KV Storage

Brand data is cached:

Key: BRAND_HERO:{cloakedLink}:{country}:{language}
TTL: 1 hour
Invalidation: On brand update

Error Handling

Inactive Brand

If brand is inactive:

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

Handling:

Widget shows hidden message
No visual output to users
Check brand status in CMS

Missing Data

Brand Not Found:

Verify cloaked-link is correct
Check brand exists in CMS
Ensure brand is active for country

Missing Selling Points:

Widget still renders without checklist
Layout adjusts automatically

No Bonus Data:

Bonus section won’t display
Widget remains 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="hero" 
  cloaked-link="greatwin-casino" 
  language="en" 
  currency="eur" 
  max-rows="1" 
  rating="3.5"
  configuration='{"component":{"images":{"base_url":"/logo250"},"href":{"rel":"nofollow","target":"_blank","cta":"homepage"}}}'
  heading-text="Hero Test Heading"
  heading-level="1"
  heading-alignment="center"
  show-sub-heading="true" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="hero" 
  cloaked-link="greatwin-casino" 
  language="en" 
  currency="eur" 
  max-rows="1" 
  rating="3.5"
  configuration='{"component":{"images":{"base_url":"/logo250"},"href":{"rel":"nofollow","target":"_blank","cta":"homepage"}}}'
  heading-text="Hero Test Heading"
  heading-level="1"
  heading-alignment="center"
  show-sub-heading="true" \>
</nw-blocks>

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

Hero Widget

Overview

Basic Usage

With H2 Heading (SEO)

With Custom CTA

With Intro Text

Attributes Reference

Configuration Object

Images Configuration

Href Configuration

Theme Configuration

Widget Components

Brand Display

Bonus Information

Selling Points Checklist

Call-to-Action Button

Compliance Disclaimer

Heading Configuration

Heading Levels

Heading Alignment

Intro Text

Common Use Cases

Landing Page Hero Section

Review Page Hero

Multi-Language Hero

Regional Hero (US State)

Minimal Hero (No Heading)

Custom Styled CTA

Best Practices

SEO Optimization

Content Strategy

Visual Design

CTA Optimization

Performance

Tracking

Regional Compliance

Advanced Configuration

Custom Theme

Multiple CTA Colors (Gradient)

Eager Image Loading

Bonus Type Filter

Data Requirements

Sanity CMS Structure

KV Storage

Error Handling

Inactive Brand

Missing Data

Backward Compatibility