⚠️ Important Notice: We are transitioning from
<bw-widget>to<nw-blocks>tags. While<bw-widget>is still supported for backward compatibility, all new implementations should use<nw-blocks>. Please update your existing widgets when possible.
The Brand Bonus Table Widget displays multiple brands in a structured table format with bonus information and customizable columns. It’s perfect for creating comparison tables showing multiple casino or sportsbook brands with their bonus offers, game counts, or additional information.
Key Features:
| Attribute | Type | Default | Description |
|---|---|---|---|
id |
string | required | Component identifier (brandbonustable) |
bonustableID |
string | "" |
Required - Unique identifier for the bonus table configuration in Sanity CMS |
language |
string | "en" |
Language code for translations (e.g., “fr”, “en”, “es”) |
country |
string | "ZZ" |
Country code (e.g., “FR”, “US”, “UK”, “ZZ” for generic) |
product |
string | "" |
Product type (“CA” for Casino, “SB” for Sports Betting) |
column1title |
string | "" |
Header text for the first column (Brand names) |
column2title |
string | "" |
Header text for the second column (Bonus amounts) |
column3title |
string | "" |
Header text for the third column (Optional - Game count or additional info) |
headercolor |
string | "#F4F4F4" |
Background color for the table header row |
target |
string | "_blank" |
Link target attribute for brand links |
rel |
string | "nofollow" |
Link rel attribute for brand links |
trackinglinktarget |
string | "" |
Additional tracking target parameter |
cloakedlink |
string | "" |
Optional cloaked link (typically not used for tables) |
The table supports 2 or 3 columns:
| Column 1 | Column 2 |
|---|---|
| Brand Name (linked) | Bonus Amount |
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Brand Name (linked) | Bonus Amount | Game Count or Additional Info |
/review-page-url/go/tracking-linkThe bonustableID is a critical attribute that references a specific table configuration in your Sanity CMS:
{description}-{date}
bonustableID="david-brand-bonus-table-20250814"
bonustableID="casino-comparison-table"
bonustableID="sportsbook-table-2024"
bonustableID="french-casino-table"
When column titles are not explicitly provided, the widget uses default translation keys:
| Translation Key | Default Purpose | Customizable Via |
|---|---|---|
bti-casino-name |
Column 1 default | column1title |
bti-bonus-amt |
Column 2 default | column2title |
bti-game-count |
Column 3 (game mode) | column3title |
bti-info |
Column 3 (info mode) | column3title |
Best Practice: Always provide custom column titles for clarity and SEO benefits.
The widget automatically handles different link types:
/{reviewPageUrl}
/go/{trackingLink}
The widget automatically detects link types based on URL patterns and applies appropriate styling and indicators.
Customize the header background to match your design:
headercolor="#05842A" <!-- Green -->
headercolor="#1E90FF" <!-- Blue -->
headercolor="#FF6B35" <!-- Orange -->
headercolor="#05842A" <!-- Hex -->
headercolor="rgb(5, 132, 42)" <!-- RGB -->
headercolor="rgba(5, 132, 42, 0.9)" <!-- RGBA -->
headercolor="darkgreen" <!-- Named color -->
The Brand Bonus Table widget pulls data from Sanity CMS based on the bonustableID. Your Sanity configuration should include:
All examples above use the new <nw-blocks> tag. If you need to use the legacy <bw-widget> tag for backward compatibility, simply replace <nw-blocks> with <bw-widget> in any example:
<!-- New way (recommended) -->
<nw-blocks id="brandbonustable" bonustableID="your-table-id" product="CA" >
</nw-blocks>
<!-- Old way (still supported) -->
<bw-widget id="brandbonustable" bonustableID="your-table-id" product="CA" >
</bw-widget>
Both tags work identically and support all the same attributes and functionality.
<nw-blocks id="brandbonustable"
bonustableID="top-casinos-2024"
language="en"
country="US"
product="CA"
column1title="Casino"
column2title="Welcome Bonus"
column3title="Games Available"
headercolor="#05842A" >
</nw-blocks>
<nw-blocks id="brandbonustable"
bonustableID="best-sportsbooks"
language="en"
country="UK"
product="SB"
column1title="Sportsbook"
column2title="Sign-Up Offer"
column3title="Betting Markets"
headercolor="#1E90FF" >
</nw-blocks>
<nw-blocks id="brandbonustable"
bonustableID="quick-comparison"
language="en"
country="CA"
product="CA"
column1title="Brand"
column2title="Bonus"
headercolor="#333333" >
</nw-blocks>
<nw-blocks id="brandbonustable"
bonustableID="german-casino-table"
language="de"
country="DE"
product="CA"
column1title="Casino Name"
column2title="Willkommensbonus"
column3title="Anzahl der Spiele"
headercolor="#05842A" >
</nw-blocks>
Use clear, concise headers that accurately describe the column content:
column1title="Casino Name" <!-- Clear -->
column1title="Brand" <!-- Less clear -->
Match header colors to your site’s color scheme for visual consistency.
Ensure the bonustableID matches exactly what’s configured in Sanity CMS.
Always specify the correct product type (“CA” or “SB”) for accurate data.
Match language with country for proper localization:
language="fr" country="FR" <!-- Correct -->
language="en" country="FR" <!-- Inconsistent -->
Decide whether to show game counts or additional info based on your content strategy.
Always test the table on mobile devices, especially 3-column layouts which transform into cards.
.tb-container: Main container wrapperBrands marked as inactive in Sanity are automatically filtered out and not displayed.
When data is unavailable for a particular field, the widget displays:
-
Brands without review URLs appear as plain text (not linked).
If the bonustableID doesn’t match any configuration in Sanity, the widget may not display or show an error message.