Brand Bonus Table 2 Widget

⚠️ 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.


Overview

The Brand Bonus Table 2 Widget displays a dynamically generated table of brands based on geo-targeting criteria. Unlike Brand Bonus Table (v1) which requires a specific bonustableID, this version automatically fetches and displays brands based on product, country, language, and selling point type.

Key Features:

  • Automatic Brand Selection: No need for predefined table IDs
  • Geo-Targeting: Automatically selects brands based on location and product
  • Row Limiting: Control the number of brands displayed with maxrows
  • Two-Column Layout: Brand names and bonus amounts
  • Clickable Brand Links: Links to review pages or affiliate tracking
  • Affiliate Link Indicators: Visual indicators for affiliate links
  • Responsive Design: Mobile-friendly layout
  • Active Filtering: Automatically filters out inactive brands

Basic Usage

With Maximum Row Limit

Expand me...

Without Row Limit (Show All)

Expand me...

Sports Betting Table

Expand me...

Localized for French Market

Expand me...

US Market with State Specificity

Expand me...


Attributes Reference

Attribute Type Default Description
id string required Component identifier (brandbonustable2)
sellingpointtype string "general" Type of selling point (“general”, “welcome”, etc.)
product string "CA" Product type (“CA” for Casino, “SB” for Sports Betting)
country string "ZZ" Country code (e.g., “FR”, “US”, “UK”, “ZZ” for generic)
language string "en" Language code (e.g., “fr”, “en”, “es”, “de”)
maxrows number 9999 Maximum number of brands to display
column1title string undefined Header text for the brand names column
column2title string undefined Header text for the bonus amounts column
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

Key Differences from Brand Bonus Table (v1)

Feature Brand Bonus Table (v1) Brand Bonus Table 2
Data Source Requires bonustableID Geo-targeted auto-selection
Configuration Sanity CMS table config Dynamic based on attributes
Columns 2 or 3 columns 2 columns only
Flexibility Predefined brand list Automatic brand selection
Use Case Custom, curated lists Dynamic, location-based lists
Max Rows Defined in Sanity Controlled via maxrows attribute

When to Use Which Version

Use Brand Bonus Table (v1) when:

  • You need a specific, curated list of brands
  • You want 3-column layout with additional info
  • You need full control over brand order and selection
  • The list rarely changes

Use Brand Bonus Table 2 when:

  • You want automatic geo-targeted brand selection
  • You need dynamic lists that adapt to location
  • You want simpler 2-column layout
  • You need to limit the number of displayed brands easily

Table Structure

Two-Column Layout

Column 1: Brand Names Column 2: Bonus Amounts
Brand Name (linked) Bonus text with amount

Column 1: Brand Names

  • Content: Clickable brand names
  • Links: Points to review pages or /go/ affiliate links
  • Icons: Affiliate links show a special icon indicator
  • Inactive Filtering: Inactive brands are automatically excluded

Column 2: Bonus Amounts

  • Content: Bonus text, additional bonus text, or bonus field
  • Priority: Shows bonusTextadditionalBonusTextbonus → “-”
  • Format: Raw text from brand data

Geo-Targeting Behavior

The widget automatically selects brands based on:

1. Product Type

  • CA: Casino brands
  • SB: Sports betting brands

2. Country

  • Shows brands available in the specified country
  • ZZ shows generic/international brands

3. Language

  • Determines text translations
  • Influences brand availability

4. Selling Point Type

  • general: Standard promotions
  • welcome: Welcome bonuses
  • Custom types as configured

5. Active Status

  • Only shows brands with status: "active"
  • Automatically filters out inactive brands

Max Rows Functionality

Control the number of displayed brands with the maxrows attribute:

Examples

<!-- Show top 3 brands -->
maxrows="3"

<!-- Show top 10 brands -->
maxrows="10"

<!-- Show all available brands (default) -->
maxrows="9999"
<!-- or omit the attribute -->

Use Cases

Top Lists: Show top 3-5 brands

maxrows="3"

Comparison Pages: Show 8-12 brands

maxrows="10"

Comprehensive Lists: Show all brands

maxrows="9999"

/{reviewPageUrl}
  • Internal links to brand review pages
  • No special indicator
  • Standard text styling
/go/{trackingLink}
  • Affiliate tracking redirects
  • Shows affiliate link icon
  • Indicates sponsored/affiliate relationship

The widget automatically detects link types and applies appropriate styling and indicators.


Header Color Customization

Customize the header background to match your design:

Color Examples

headercolor="#05842A"           <!-- Green (Casino theme) -->
headercolor="#1E90FF"           <!-- Blue (Sports theme) -->
headercolor="#FF6B35"           <!-- Orange (Custom) -->
headercolor="#333333"           <!-- Dark gray -->

Color Formats

headercolor="#05842A"           <!-- Hex -->
headercolor="rgb(5, 132, 42)"   <!-- RGB -->
headercolor="rgba(5, 132, 42, 0.9)" <!-- RGBA -->
headercolor="darkgreen"         <!-- Named color -->

Responsive Design

Desktop View

  • Standard HTML table layout
  • Two equal-width columns (50% each)
  • Header row with custom background color
  • Hover effects on brand links

Mobile View

  • Maintains table structure
  • Columns stack on very small screens
  • Touch-friendly link targets
  • Optimized spacing

Backward Compatibility

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="brandbonustable2" product="CA" country="US" maxrows="5" >
</nw-blocks>

<!-- Old way (still supported) -->
<bw-widget id="brandbonustable2" product="CA" country="US" maxrows="5" >
</bw-widget>

Both tags work identically and support all the same attributes and functionality.


Common Use Cases

1. Top 5 Casinos for US Market

<nw-blocks id="brandbonustable2" 
    sellingpointtype="general" 
    product="CA" 
    country="US" 
    language="en" 
    maxrows="5"
    column1title="Top Online Casinos"
    column2title="Welcome Bonus"
    headercolor="#05842A" >
</nw-blocks>

2. Sports Betting Comparison (UK)

<nw-blocks id="brandbonustable2" 
    sellingpointtype="general" 
    product="SB" 
    country="UK" 
    language="en" 
    maxrows="8"
    column1title="Bookmaker"
    column2title="Sign-Up Offer"
    headercolor="#1E90FF" >
</nw-blocks>

3. French Casino Market

<nw-blocks id="brandbonustable2" 
    sellingpointtype="general" 
    product="CA" 
    country="FR" 
    language="fr" 
    maxrows="10"
    column1title="Casino en ligne"
    column2title="Bonus"
    headercolor="#05842A" >
</nw-blocks>

4. Generic International List

<nw-blocks id="brandbonustable2" 
    sellingpointtype="general" 
    product="CA" 
    country="ZZ" 
    language="en" 
    maxrows="15"
    column1title="Casino"
    column2title="Bonus Offer"
    headercolor="#333333" >
</nw-blocks>

5. Unlimited Brand List

<nw-blocks id="brandbonustable2" 
    sellingpointtype="welcome" 
    product="CA" 
    country="CA" 
    language="en"
    column1title="Online Casino"
    column2title="Welcome Package"
    headercolor="#FF6B35" >
</nw-blocks>

Best Practices

1. Strategic Max Rows

Choose appropriate limits based on page purpose:

  • Top Lists: 3-5 brands
  • Comparison Pages: 8-12 brands
  • Directory Pages: 15-25 brands
  • Complete Listings: No limit (default)

2. Descriptive Column Titles

Always provide clear, keyword-rich column headers:

column1title="Top-Rated Online Casinos"
column2title="Welcome Bonus Amount"

3. Consistent Branding

Match header colors to your site’s theme.

4. Accurate Geo-Targeting

Ensure country and language match:

country="FR" language="fr"  <!-- Correct -->
country="FR" language="en"  <!-- Inconsistent -->

5. Product Specificity

Always specify the correct product type for accurate brand selection.

6. Selling Point Alignment

Use appropriate selling point types:

  • general: Most common use case
  • welcome: Welcome bonus focused
  • Custom types as configured in your system

7. Mobile Testing

Test the table on mobile devices to ensure usability.


SEO Considerations

  1. Keyword-Rich Headers: Use descriptive column titles with target keywords
  2. Internal Linking: Brand links improve site structure
  3. Structured Content: Table format is crawlable
  4. Location Specificity: Country-specific tables for local SEO
  5. Dynamic Updates: Fresh content as brand offerings change

Performance Tips

  1. Reasonable Max Rows: Keep maxrows reasonable (typically under 20)
  2. Caching: Leverage caching for geo-targeted data
  3. Above-the-Fold Tables: Prioritize smaller tables for faster rendering
  4. Below-the-Fold Tables: Can show more brands without impacting initial load

Error Handling

Inactive Widget

If the widget itself is inactive:

This widget is currently inactive or not allowed in this country.

No Active Brands

If no active brands match the criteria, the table will be empty with just headers.

Missing Data

When bonus data is unavailable for a brand:

-

Missing Review URL

Brands without review URLs appear as plain text (not linked).


Styling Notes

CSS Classes

  • .tb-container: Main container wrapper
  • Table structure with semantic HTML
  • Standard table, thead, tbody elements
  • Customizable via CSS

Customization Points

  • Header background color (via headercolor)
  • Column widths (automatic 50/50 split)
  • Link colors and hover states
  • Mobile breakpoints

Troubleshooting

No Brands Showing

  • Check that the product, country, and language combination has active brands
  • Verify that brands exist for the specified selling point type
  • Ensure maxrows isn’t set to 0

Wrong Brands Appearing

  • Verify product attribute is correct (“CA” or “SB”)
  • Check country code is accurate
  • Confirm sellingpointtype matches your intended filter
  • Ensure brands have valid reviewPageUrl configured
  • Check that tracking links are properly set up
  • Verify target and rel attributes are correct