Single Brand Banner 2 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.
Single Brand Banner 2
The SingleBrandBanner2 widget displays a full-width promotional banner featuring a single brand with logo, bonus text, a customizable background image, and a call-to-action button. Unlike its predecessor (singlebrandbanner), this widget supports two data sources:
- Brand source (via
cloakedlink): fetches a specific brand directly - Toplist source (via
sellingpointtype+product): picks a brand from a toplist by position
Key Features
- Dual Data Source: Brand-based or Toplist-based, determined automatically by
cloakedlinkpresence - Dynamic Background Images: CMS-managed background assets per sport/category (football, tennis, etc.)
- Device-Responsive Backgrounds: Separate mobile and desktop background images
- Brand Position Selection: Pick any brand from a toplist by position index
- Flexible CTA Styling: Customizable button colors with gradient support
- Compliance Integration: Automatic disclaimer handling via compliance data
- Tracking Support: Full tracking URL with referer and custom data
- Responsive Layout: Full-width banner optimized for hero sections
- Performance Optimized: Parallel KV lookups for sub-second rendering
Demo Examples
Full Parameters — Brand Source
Full Parameters — Toplist Source
Brand Source — Basic (cloakedlink)
Brand Source — Tennis Background
Brand Source — with T&C
Toplist Source — Brand at Position 2
Toplist Source — Brand at Position 0 (First)
Toplist Source — With T&C
Mobile Simulation (Tennis Background)
Note: To simulate mobile rendering, use browser DevTools (F12 → Toggle device toolbar) or a mobile User-Agent. The widget automatically selects the mobile background image based on the User-Agent header.
Data Source Logic
| Condition | Source | GQL Query | KV Query |
|---|---|---|---|
cloakedlink is provided |
Brand | brandVulcanQuery |
brandVulcanQuery |
cloakedlink is empty/missing |
Toplist | vulcanTopsQuery |
vulcanTopsQuery |
Brand Source Flow
- Fetches brand data by
cloakedlink - Extracts bonuses, logo, compliance
- Resolves background image from CMS
Toplist Source Flow
- Fetches toplist by
websiteId+sellingPointType - Filters toplist by country/language/product
- Picks brand at
brandpositionindex (0-based) - Returns
nullifproductis not defined (required for toplist source)
Attributes Reference
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
id |
string | Yes | - | Must be "singlebrandbanner2" |
cloakedlink |
string | No* | "" |
Brand identifier. If set, uses Brand source |
sellingpointtype |
string | No* | "general" |
Toplist selling point type (used when no cloakedlink) |
product |
string | Yes (toplist) | "" |
Product code (CA/SB/BI/PO/LO/LI/FN/ES/CR/CF/ST) |
backgroundimage |
string | No | "" |
Background image code (e.g., “football”, “tennis”) |
brandposition |
number | No | 0 |
0-based index of brand to pick from toplist |
fullwidth |
boolean | No | false |
Whether banner spans full width |
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 |
ctacolors |
string/JSON | No | ["#FFE905", "#FFE905"] |
CTA button gradient colors (Figma default yellow) |
ctahovercolors |
string/JSON | No | ["#044E2E", "#044E2E"] |
CTA button hover gradient colors (Figma green). Active is hardcoded #033F25 (not configurable). |
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 |
channel |
string | No | - | Channel identifier (e.g., “pu”) |
anchorid |
string | No | "" |
HTML anchor ID for the widget |
*Either cloakedlink OR sellingpointtype + product is required.
Background Images
Background images are managed in Sanity CMS under the key single-brand-banner2. Each asset has:
- code: identifier used in the
backgroundimageattribute (e.g., “football”, “tennis”) - desktopImage: image served on desktop devices
- mobileImage: image served on mobile devices
Device Detection
The widget automatically detects the device type via the User-Agent header:
- Mobile → serves
mobileImage - Desktop/Tablet → serves
desktopImage
Available Background Codes
| Code | Description |
|---|---|
football |
Football/soccer themed background |
tennis |
Tennis themed background |
Additional codes can be added via Sanity CMS without code changes.
Response Structure
The scope returns a unified SingleBrandBanner2Result object regardless of the data source:
{
brandId: string; // Brand legacy ID or cloaked link
isActive: boolean; // Whether brand is active for user's country
imgUrl: string; // Brand logo image URL
trackingLink: string; // Brand cloaked link for tracking
brandName: string; // Brand display name
bonus: string; // Formatted bonus amount (e.g., "500 €")
bonusText?: string; // Primary bonus description text
additionalBonusText?: string; // Secondary bonus text
bonusExtra: string; // Extra bonus message
extraFreespins?: number; // Free spins count
alt: string; // Image alt text
ctaText?: string; // Resolved CTA button text
ctaColors?: string[]; // CTA gradient colors
ctaHoverColors?: string[];// CTA hover gradient colors
target: string; // Link target (_blank, _self, etc.)
rel: string; // Link rel attribute
trackingTarget: string; // Tracking target segment
trackingData: string; // Additional tracking data
hideBonuses: boolean; // Compliance: hide all bonus info
hideBonusRibbon: boolean; // Compliance: hide bonus ribbon
hideBonusText: boolean; // Compliance: hide bonus text
minimumAge?: string; // Minimum age requirement
backgroundImage?: string; // Resolved background image URL
fullwidth?: boolean; // Full-width flag
channel?: string; // Channel identifier
country: string; // Resolved country code
language?: string; // Language code
referer?: string; // Referrer for attribution
anchorid?: string; // HTML anchor ID
product?: string; // Product code
sellingPointType?: string;// Selling point type
complianceDisclaimer?: object; // T&C disclaimer object (present when showterms="yes")
}
Tracking Link Structure
All clickable elements use the following tracking URL:
/go/{trackingLink}/{trackingTarget}?wid=singlebrandbanner2&trackingData={trackingData}&referer={referer}&channel={channel}
Example:
/go/greatwin-casino/banner-hero?wid=singlebrandbanner2&trackingData=&referer=review-page&channel=pu