Brand Table Info 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 Table Info Widget displays detailed brand information in a structured table format. It presents key information such as game count, licenses, welcome bonus, minimum deposit, and payment methods in an easy-to-read two-column layout.

Key Features:

  • Two-column table layout with customizable headers
  • Displays game count, licenses, bonuses, and payment methods
  • Customizable header background color
  • Responsive design
  • Automatic data fetching based on brand and country
  • Multi-language support with translations

Basic Usage

Standard Brand Table

Expand me...

With Custom Header Color

Expand me...

For Sports Betting Product

Expand me...

Localized for Different Markets

Expand me...

Attributes Reference

Attribute Type Default Description
id string required Component identifier (brandtableinfo)
cloakedlink string "" The cloaked tracking link slug for the brand
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 (left)
column2title string "" Header text for the second column (right)
headercolor string "#F4F4F4" Background color for the table header row
target string "_blank" Link target attribute
rel string "nofollow" Link rel attribute
trackinglinktarget string "" Additional tracking target parameter

Table Structure

The widget automatically displays the following information in a two-column table:

Default Table Rows

Row Column 1 (Label) Column 2 (Value)
1 Game Count Number of available games
2 License Gambling licenses held by the brand
3 Welcome Bonus Bonus text from toplist data
4 Minimum Deposit Required minimum deposit amount
5 Payment Methods Available deposit payment methods

Translation Keys

The widget uses i18n translation keys for row labels:

  • bti-game-count: Game count label
  • bti-licence: License label
  • bti-wlcm-bonus: Welcome bonus label
  • bti-min-deposit: Minimum deposit label
  • bti-payment-methods: Payment methods label

These translations are automatically loaded based on the language attribute.

Data Sources

The widget pulls data from multiple sources:

1. Game Count

  • Fetched based on brand, product, and country
  • Displays total number of available games

2. Licenses

  • Shows regulatory licenses for the brand
  • Varies by country and jurisdiction

3. Welcome Bonus

  • Retrieved from toplist bonus data
  • Specific to the product type (Casino/Sports)
  • Localized based on country and language

4. Minimum Deposit

  • Displays the minimum deposit requirement
  • Retrieved from toplist configuration

5. Payment Methods

  • Lists available deposit payment methods
  • Comma-separated list
  • Filtered by country availability

Header Customization

The table header can be fully customized to match your design:

Custom Column Titles

Set meaningful column headers that describe your data:

column1title="Feature"
column2title="Description"

Custom Header Color

Use any CSS color value (hex, rgb, named colors):

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

Brand Color Matching

Align the header color with your brand identity:

<!-- Casino theme -->
headercolor="#05842A"

<!-- Sports betting theme -->
headercolor="#1E90FF"

<!-- Custom brand theme -->
headercolor="#FF6B35"

Product-Specific Usage

Casino Product (CA)

<nw-blocks
  id="brandtableinfo"
  cloakedlink="casino-brand"
  product="CA"
  column1title="Casino Info"
  column2title="Details">
</nw-blocks>

Displays casino-specific data including casino games, casino bonuses, and casino licenses.

Sports Betting Product (SB)

<nw-blocks
  id="brandtableinfo"
  cloakedlink="sportsbook-brand"
  product="SB"
  column1title="Sportsbook Info"
  column2title="Details">
</nw-blocks>

Displays sports betting-specific data including betting markets, sportsbook bonuses, and betting licenses.

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="brandtableinfo" cloakedlink="casino-brand" product="CA" >
</nw-blocks>

<!-- Old way (still supported) -->
<bw-widget id="brandtableinfo" cloakedlink="casino-brand" product="CA" >
</bw-widget>

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

Common Use Cases

1. Casino Review Page

<nw-blocks id="brandtableinfo" 
    cloakedlink="your-casino" 
    language="en" 
    country="US"
    product="CA"
    column1title="Casino Features"
    column2title="Information"
    headercolor="#05842A" >
</nw-blocks>

2. Sports Betting Comparison

<nw-blocks id="brandtableinfo" 
    cloakedlink="22bet-sport" 
    language="en" 
    country="UK"
    product="SB"
    column1title="Betting Features"
    column2title="Details"
    headercolor="#1E90FF" >
</nw-blocks>

3. Multi-Language Support (French)

<nw-blocks id="brandtableinfo" 
    cloakedlink="greatwin-casino" 
    language="fr" 
    country="FR"
    product="CA"
    column1title="Caractéristiques"
    column2title="Informations"
    headercolor="#05842A" >
</nw-blocks>

4. Generic Market Display

<nw-blocks id="brandtableinfo" 
    cloakedlink="global-casino" 
    language="en" 
    country="ZZ"
    product="CA"
    column1title="Key Information"
    column2title="Value"
    headercolor="#333333" >
</nw-blocks>

Best Practices

  1. Descriptive Column Titles: Use clear, descriptive headers that help users understand the information
  2. Consistent Branding: Match header colors with your site’s color scheme
  3. Appropriate Product Type: Always specify the correct product (“CA” or “SB”) for accurate data
  4. Language Accuracy: Ensure the language matches your page content for consistent translations
  5. Country Specificity: Use accurate country codes for region-specific data (licenses, payment methods)
  6. Accessibility: Column titles serve as headers for screen readers

Styling Notes

The widget uses semantic HTML table structure:

  • <table> with proper <thead> and <tbody>
  • Responsive design that adapts to container width
  • Column widths automatically calculated (50% each for 2 columns)
  • Header row with customizable background color
  • Alternating row colors for better readability

CSS Classes

  • Table container: .tb-container
  • Table element: Custom styled table
  • Header cells: .table-head
  • Data rows: .table-row-container
  • Data cells: .table-data

Error Handling

Inactive Brand

If the brand is inactive or not allowed in the specified country, the widget displays:

The brand with name {brandName} is currently inactive or not allowed in this country!

Missing Data

When data is not available for a particular row, the widget displays:

-

This ensures the table structure remains intact even with incomplete data.