> Github Widgets Shortcodes > Single Brand Banner Widget

Single Brand Banner Widget

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 SingleBrandBanner widget displays a horizontal promotional banner featuring a single brand with logo, bonus information, product image, and call-to-action button. Designed for in-content placement with support for multiple product types across gaming, finance, and trading verticals.

Key Features

Multi-Product Support: 11 product types (CA, SB, BI, PO, LO, LI, FN, ES, CR, CF, ST)
Dynamic Product Images: Product-specific imagery fetched from CMS
Gold Gradient CTA: Premium gold gradient button with hover effects
No Bonus Fallback: Automatic “No Bonus” message when bonus data unavailable
Code Validation: Built-in product code validation with error messaging
Flexible CTA Styling: Customizable button colors with gradient support
Compliance Integration: Automatic disclaimer and T&C link rendering
Tracking Support: Full tracking URL with referer and custom data
Responsive Layout: Horizontal banner optimized for content insertion
Widget Cache Key: Debug support with cache key display

Demo Examples

For Casino (CA) Product

Expand me...

For Sport Book (SB) Product

Expand me...

For Bingo (BI) Product

Expand me...

For Poker (PO) Product

Expand me...

For Lottery (LO) Product

Expand me...

For Live (LI) Product

Expand me...

For Finance (FN) Product

Expand me...

For ESport (ES) Product

Expand me...

For Crypto Currencies (CR) Product

Expand me...

For CFD Trading (CF) Product

Expand me...

For Stock % ETFs (ST) Product

Expand me...

For Wrong Product

Expand me...

'Brand Banner Error: Code check failed for brandName: Greatwin Casino , brandId: greatwin-casino. Please make sure that the Product code added is Correct! ');

Usage Examples

Basic Casino (CA) Implementation

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    ctatext="Get Bonus"
    product="CA"
    language="en"
    country="US" \>
</nw-blocks>

Sportsbook (SB) with Translation Key

<nw-blocks id="singlebrandbanner"
    cloakedlink="betway-sports"
    product="SB"
    language="fr"
    country="FR"
    ctakey="cta-claim-bonus"
    trackinglinktarget="banner-click" \>
</nw-blocks>

Bingo (BI) with Custom Colors

<nw-blocks id="singlebrandbanner"
    cloakedlink="bingo-brand"
    ctatext="Play Bingo"
    product="BI"
    language="en"
    country="UK"
    ctacolors='["#ff6b35", "#f7931e"]'
    ctahovercolors='["#e85a2a", "#de8419"]' \>
</nw-blocks>

Poker (PO) with Tracking

<nw-blocks id="singlebrandbanner"
    cloakedlink="poker-room"
    product="PO"
    language="de"
    country="DE"
    ctakey="cta-claim-bonus"
    trackinglinktarget="poker-banner"
    referer="top-poker-sites" \>
</nw-blocks>

Crypto (CR) with Custom Target

<nw-blocks id="singlebrandbanner"
    cloakedlink="crypto-casino"
    ctatext="Get Crypto Bonus"
    product="CR"
    language="en"
    country="US"
    target="_self"
    rel="sponsored" \>
</nw-blocks>

Product Types

Gaming Products

1. Casino (CA)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    ctatext="Get Bonus"
    product="CA"
    language="fr"
    country="ZZ" \>
</nw-blocks>

Use Case: Online casino brands with slots, table games

2. Sportsbook (SB)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="SB"
    language="fr"
    country="ZZ"
    ctakey="cta-claim-bonus" \>
</nw-blocks>

Use Case: Sports betting platforms

3. Bingo (BI)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    ctatext="Get Bonus"
    product="BI"
    language="fr"
    country="ZZ" \>
</nw-blocks>

Use Case: Bingo sites and networks

4. Poker (PO)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="PO"
    language="fr"
    country="ZZ"
    ctakey="cta-claim-bonus" \>
</nw-blocks>

Use Case: Online poker rooms

5. Lottery (LO)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    ctatext="Get Bonus"
    product="LO"
    language="fr"
    country="ZZ" \>
</nw-blocks>

Use Case: Online lottery and scratch card sites

6. Live Casino (LI)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="LI"
    language="fr"
    country="ZZ"
    ctakey="cta-claim-bonus" \>
</nw-blocks>

Use Case: Live dealer casino platforms

7. ESports (ES)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="ES"
    language="fr"
    country="ZZ"
    ctakey="cta-claim-bonus" \>
</nw-blocks>

Use Case: ESports betting platforms

Finance & Trading Products

8. Finance (FN)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    ctatext="Get Bonus"
    product="FN"
    language="fr"
    country="ZZ" \>
</nw-blocks>

Use Case: Financial services and platforms

9. Crypto Currencies (CR)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    ctatext="Get Bonus"
    product="CR"
    language="fr"
    country="ZZ" \>
</nw-blocks>

Use Case: Cryptocurrency trading platforms

10. CFD Trading (CF)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="CF"
    language="fr"
    country="ZZ"
    ctakey="cta-claim-bonus" \>
</nw-blocks>

Use Case: Contracts for Difference trading

11. Stocks & ETFs (ST)

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="ST"
    language="fr"
    country="ZZ"
    ctakey="cta-claim-bonus" \>
</nw-blocks>

Use Case: Stock and ETF trading platforms

Attributes Reference

Attribute	Type	Required	Default	Description
`id`	string	Yes	-	Unique widget identifier
`cloakedlink`	string	Yes	-	Brand identifier for tracking and data lookup
`product`	string	Yes	-	Product code (CA/SB/BI/PO/LO/LI/FN/ES/CR/CF/ST)
`language`	string	No	`"en"`	Language code (ISO 639-1)
`country`	string	No	`""`	Country code (ISO 3166-1)
`ctatext`	string	No	-	Override CTA button text (bypasses translation)
`ctakey`	string	No	`"cta-claim-bonus"`	Translation key for CTA button text
`trackinglinktarget`	string	No	`""`	Tracking link target path segment
`target`	string	No	`"_blank"`	Link target attribute
`rel`	string	No	`"nofollow"`	Link relationship attribute
`referer`	string	No	-	Referrer identifier for attribution
`ctacolors`	string/JSON	No	Gold gradient	CTA button color (solid or array for gradient)
`ctahovercolors`	string/JSON	No	Gold gradient hover	CTA button hover color

1. Logo Section

Component: <LogoColumn>
Content: Brand logo wrapped in tracking link
Size: 204px × 82px (width × height)
Alt Text: “{brandName} logo”
Position: Left side of banner

2. Bonus Section

Component: <BonusSection>
Content:
- Primary bonus text: bonusText
- Additional bonus: additionalBonusText
Fallback: <NoBonusCase> component when no bonus data
Conditional: Hidden if hideBonusText: true
Position: Center-left of banner

3. Product Image Section

Component: <ImageSection>
Content: Product-specific image from CMS
Size: 192px × 96px (width × height)
Alt Text: “product”
Data Attribute: data-new="true"
Position: Center-right of banner

4. CTA Button

Component: <GoldCTA>
Features:
- Text from ctatext or ctakey translation
- Right arrow SVG icon
- Gradient background (default gold)
- Hover state with color transition
Default Colors: Gold gradient (270deg)
- Normal: #CE7114 → #ECB22B → #F5C655 → #D47E1A → #C6740B
- Hover: #CE7114 → #C6740B → #F5C655 → #F5C655 → #C6740B
Position: Right side of banner

5. Disclaimer Section

Component: <DisclaimerSection>
Content:
- Minimum age requirement
- Compliance disclaimer HTML from CMS
- Terms & Conditions link (if hasTrackingLink)
Conditional: Only displays if disclaimer exists
Position: Bottom of banner spanning full width

6. Visual Separator

Component: <VisualSeperator>
Purpose: Visual divider between main content and disclaimer
Conditional: Only renders if disclaimer present

Color System

Default Gold Gradient CTA

Normal State:

background: linear-gradient(270deg, 
  #CE7114 0%, 
  #ECB22B 22.62%, 
  #F5C655 52.17%, 
  #D47E1A 84.37%, 
  #C6740B 101.9%
);

Hover State:

background: linear-gradient(270deg, 
  #CE7114 0%, 
  #C6740B 22.62%, 
  #F5C655 52.17%, 
  #F5C655 84.37%, 
  #C6740B 101.9%
);

Custom CTA Colors

Solid Color:

<nw-blocks id="singlebrandbanner"
    cloakedlink="casino-brand"
    product="CA"
    ctacolors="#05842A"
    ctahovercolors="#096725" \>
</nw-blocks>

Custom Gradient:

<nw-blocks id="singlebrandbanner"
    cloakedlink="casino-brand"
    product="CA"
    ctacolors='["#667eea", "#764ba2"]'
    ctahovercolors='["#5568d3", "#63408b"]' \>
</nw-blocks>

Product Code Validation

Valid Product Codes

CA - Casino
SB - Sportsbook
BI - Bingo
PO - Poker
LO - Lottery
LI - Live Casino
FN - Finance
ES - ESports
CR - Crypto Currencies
CF - CFD Trading
ST - Stocks & ETFs

Invalid Product Code Handling

When an invalid product code is used:

<nw-blocks id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="Casino"
    language="fr"
    country="ZZ" \>
</nw-blocks>

Result: Error message displayed:

Brand Banner Error: Code check failed for brandName: {brandName}, brandId: {brandId}. 
Please make sure that the Product code added is Correct!

Missing Product Code

When product attribute is empty or missing:

Result: Hidden widget with JavaScript error:

Brand Banner Error: No product defined on the shortcode for brandName: {brandName}, brandId: {brandId}

Tracking Link Structure

All clickable elements use the following tracking URL:

/go/{cloakedlink}/{trackinglinktarget}?cta={cta}&wid={id}&trackingData={trackingData}&referer={referer}

Example:

/go/greatwin-casino/banner-click?cta=claim-bonus&wid=singlebrandbanner&trackingData=header&referer=review-page

Common Use Cases

1. Casino Banner in Blog Post

<nw-blocks id="singlebrandbanner"
    cloakedlink="betway-casino"
    product="CA"
    language="en"
    country="US"
    ctatext="Claim 100% Bonus"
    trackinglinktarget="blog-banner" \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="draftkings-sports"
    product="SB"
    language="en"
    country="US"
    ctakey="cta-bet-now"
    trackinglinktarget="sports-banner"
    referer="betting-guide-2024" \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="pokerstars"
    product="PO"
    language="es"
    country="ES"
    ctatext="Jugar Ahora"
    ctacolors='["#ff6b35", "#f7931e"]' \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="crypto-exchange"
    product="CR"
    language="en"
    country="US"
    ctatext="Start Trading Crypto"
    trackinglinktarget="crypto-banner" \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="evolution-casino"
    product="LI"
    language="en"
    country="US"
    ctatext="Play Live Casino"
    referer="live-casino-reviews" \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="esports-betting"
    product="ES"
    language="en"
    country="UK"
    ctakey="cta-bet-esports"
    ctacolors='["#4a90e2", "#357abd"]'
    ctahovercolors='["#357abd", "#2a5f8f"]' \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="trading-platform"
    product="ST"
    language="de"
    country="DE"
    ctatext="Jetzt Handeln"
    trackinglinktarget="trading-banner"
    referer="best-brokers-2024" \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="bingo-hall"
    product="BI"
    language="en"
    country="UK"
    ctatext="Play Bingo Now"
    trackinglinktarget="bingo-banner"
    referer="email-campaign-jan" \>
</nw-blocks>

Best Practices

Content Strategy

Product Code Accuracy: Always use correct 2-letter product codes
CTA Clarity: Use action-oriented button text matching product type
Bonus Updates: Keep bonus information current in CMS
Product Images: Ensure product images are optimized (192×96px)
Localized Content: Match language/country to target audience

User Experience

Banner Placement: Insert within content at natural break points
CTA Visibility: Use contrasting colors for button prominence
Bonus Clarity: Ensure bonus text is concise and clear
Mobile Testing: Verify banner renders correctly on mobile devices
Loading Performance: Optimize logo and product images

Visual Design

Brand Consistency: Align CTA colors with site theme
Color Contrast: Maintain WCAG AA standards (4.5:1)
Gold Gradient: Default gold CTA works well for premium feel
Image Quality: Use high-resolution logos (204×82px recommended)
Hover States: Provide clear visual feedback on CTA button

Performance

Image Optimization: Compress images without quality loss
Lazy Loading: Consider lazy loading for below-fold banners
Cache Utilization: Widget cache keys enable efficient caching
Minimal Code: Only include necessary custom colors
Product Images: Product images should be pre-optimized

Accessibility

Alt Text: Logo includes descriptive alt attribute
Keyboard Navigation: CTA button fully keyboard accessible
Focus Indicators: Visible focus states on links
ARIA Labels: Use semantic HTML structure
Screen Readers: Ensure bonus text is readable

SEO

NoFollow Links: Use rel="nofollow" for affiliate links
Descriptive Links: Logo alt text includes brand name
Image Alt Tags: Product images include descriptive alt
Structured Content: Maintain proper document structure
Link Attributes: Include proper target and rel attributes

Advanced Configuration

Custom Gradient CTA with Branding

<nw-blocks id="singlebrandbanner"
    cloakedlink="premium-casino"
    product="CA"
    language="en"
    country="US"
    ctatext="Join Premium Club"
    ctacolors='["#d4af37", "#ffd700", "#d4af37"]'
    ctahovercolors='["#c9a22b", "#f5c655", "#c9a22b"]' \>
</nw-blocks>

Multiple Banners on Same Page

<!-- Casino Banner -->
<nw-blocks id="banner-casino"
    cloakedlink="casino-brand"
    product="CA"
    language="en"
    country="US"
    ctatext="Play Casino" \>
</nw-blocks>

<!-- Sportsbook Banner -->
<nw-blocks id="banner-sports"
    cloakedlink="sports-brand"
    product="SB"
    language="en"
    country="US"
    ctatext="Bet on Sports" \>
</nw-blocks>

<nw-blocks id="singlebrandbanner"
    cloakedlink="tracked-casino"
    product="CA"
    language="en"
    country="US"
    ctatext="Claim Bonus"
    trackinglinktarget="comparison-table"
    referer="best-casinos-2024-article" \>
</nw-blocks>

Regional Targeting with Custom Link Behavior

<nw-blocks id="singlebrandbanner"
    cloakedlink="regional-casino"
    product="CA"
    language="en"
    country="US"
    ctatext="Play in Your State"
    target="_self"
    rel="sponsored nofollow" \>
</nw-blocks>

Data Requirements

Sanity CMS Structure

{
  brandId: string;                   // Unique brand identifier
  brandName: string;                 // Brand display name
  imgUrl: string;                    // Logo image URL (204×82px)
  trackingLink: string;              // Base tracking link
  bonusText: string;                 // Main bonus text
  additionalBonusText?: string;      // Extra bonus details
  productImage: string;              // Product-specific image URL (192×96px)
  product: string;                   // Product code (CA/SB/BI/etc.)
  isActive: boolean;                 // Brand availability status
  codeCheck: boolean;                // Product code validation flag
  complianceDisclaimer?: {
    disclaimer: string | null;       // HTML disclaimer content
  };
  hasTrackingLink: boolean;          // Whether to show T&C link
  minimumAge?: string;               // Age requirement
  widgetCacheKey?: string;           // Cache key for debugging
}

Translation Keys

Key	Default Text	Purpose
`cta-claim-bonus`	“Claim Bonus”	Default CTA button
`cta-bet-now`	“Bet Now”	Sportsbook CTA
`cta-play-now`	“Play Now”	Generic gaming CTA
`cta-bet-esports`	“Bet on ESports”	ESports CTA
`wgt-toplist-terms`	“Terms&ConditionsLink.com”	T&C link text

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!
</p>

Missing Product Code

If product is empty or missing:

<div id="{id}" style="display: none;">
  <script type="text/javascript">
    document.querySelector('#{id}').innerHTML = 
      'Brand Banner Error: No product defined on the shortcode for brandName: {brandName}, brandId: {brandId}';
  </script>
</div>

Invalid Product Code

If codeCheck === false:

<div id="wrong-code" style="display: block;">
  Brand Banner Error: Code check failed for brandName: {brandName}, brandId: {brandId}. 
  Please make sure that the Product code added is Correct!
</div>

Missing Bonus Data

No bonus text: Displays <NoBonusCase> component
hideBonusText: true: Bonus section hidden entirely
Widget continues to render with remaining components

Feature	SingleBrandBanner	ReviewPageHeader	Hero
Layout	Horizontal banner	Header section	Single-row toplist
Product Support	✅ 11 product types	Casino/Sports only	Casino/Sports only
Product Images	✅ Dynamic product images	No	No
Use Case	In-content banners	Review page headers	Homepage hero section
CTA Style	Gold gradient	Configurable	Configurable
Size	Compact horizontal	Large header	Medium toplist row
Rating Display	No	✅ Star rating	✅ Star rating
Social Proof	No	✅ Ribbons	✅ Pills
Best For	Blog posts, articles	Dedicated review pages	Homepage/landing pages

Backward Compatibility

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

<bw-widget id="singlebrandbanner"
    cloakedlink="greatwin-casino"
    product="CA"
    ctatext="Get Bonus"
    language="fr"
    country="ZZ">
</bw-widget>

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

Attribute Naming

Supports both camelCase and lowercase:

cloakedLink / cloakedlink ✅
ctaText / ctatext ✅
ctaKey / ctakey ✅
trackingLinkTarget / trackinglinktarget ✅
ctaColors / ctacolors ✅
ctaHoverColors / ctahovercolors ✅

Single Brand Banner Widget