Migration Notice: We are transitioning from <bw-widget> to <nw-blocks> tags. While both are currently supported for backward compatibility, <nw-blocks> is now the recommended tag for all new implementations. Existing <bw-widget> implementations will continue to function.
The Game Providers widget displays a comprehensive list of gaming software providers associated with a specific casino brand. It features an interactive card layout with scrollable navigation, expandable content, and customizable styling options.
Key Features:
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
id |
string | Yes | - | Must be “gameProvider” |
cloaked-link |
string | Yes | - | Brand identifier/cloaked link for fetching provider data |
language |
string | No | “en” | ISO 639-1 language code for localization |
country |
string | No | Auto-detected | ISO 3166-1 country code (supports state format: US-CA) |
country-state |
string | No | - | State/province code for US/Canada (auto-parsed from country) |
items-displayed |
number | No | All | Number of providers initially visible before “Show More” |
heading-key |
string | No | “Game Providers” | Custom heading text for the widget |
order-by |
object | No | {attribute:“name”, direction:“ASC”} | Sorting configuration |
configuration |
JSON | No | {} | Styling configuration object |
| Property | Type | Default | Description |
|---|---|---|---|
heading-text-color |
string | “#b1b1b1” | Color of the heading text |
heading-background-color |
string | “#b1b1b1” | Background color of the header section |
heading-font-size |
string | “14px” | Font size for the heading text |
Horizontal Scrolling:
Show More/Less Toggle:
items-displayed limitVisual Elements:
Layout Features:
Control provider display order using order-by attribute:
<!-- Sort by name alphabetically -->
<nw-blocks id="gameProvider" cloaked-link="..."
order-by='{"attribute":"name", "direction":"ASC"}' \>
</nw-blocks>
<!-- Sort by popularity (if available) -->
<nw-blocks id="gameProvider" cloaked-link="..."
order-by='{"attribute":"popularity", "direction":"DESC"}' \>
</nw-blocks>
Supported Sorting:
name, popularity, ratingASC (ascending), DESC (descending)<nw-blocks
id="gameProvider"
cloaked-link="betsson-casino"
language="en"
country="UK"
heading-key="Available Game Providers"
items-displayed="12" \>
</nw-blocks>
<nw-blocks
id="gameProvider"
cloaked-link="fresh-casino"
language="en"
country="US"
items-displayed="10"
configuration='{
"heading-text-color": "#FFFFFF",
"heading-background-color": "#1A1A1A",
"heading-font-size": "20px"
}' \>
</nw-blocks>
<nw-blocks
id="gameProvider"
cloaked-link="draftkings-casino"
language="en"
country="US"
heading-key="Licensed Providers in New Jersey"
items-displayed="15" \>
</nw-blocks>
<nw-blocks
id="gameProvider"
cloaked-link="betmgm-casino"
language="en"
country="CA"
items-displayed="6"
configuration='{
"heading-font-size": "16px"
}' \>
</nw-blocks>
<!-- Show all providers without limit -->
<nw-blocks
id="gameProvider"
cloaked-link="leovegas-casino"
language="en"
country="SE"
heading-key="All Gaming Providers" \>
</nw-blocks>
items-displayed to show all providers without expansionitems-displayed with 30+ providers to improve performancecloaked-link matching your casino brand databasecountry for geo-specific provider availabilityFor US and Canadian markets:
<!-- New Jersey, USA -->
<nw-blocks id="gameProvider" cloaked-link="..." country="US" \>
</nw-blocks>
<!-- Ontario, Canada -->
<nw-blocks id="gameProvider" cloaked-link="..." country="CA-ON" \>
</nw-blocks>
The widget automatically:
<!-- Alphabetical by name -->
<nw-blocks id="gameProvider" cloaked-link="..."
order-by='{"attribute":"name", "direction":"ASC"}' \>
</nw-blocks>
<!-- Most popular first -->
<nw-blocks id="gameProvider" cloaked-link="..."
order-by='{"attribute":"popularity", "direction":"DESC"}' \>
</nw-blocks>
<!-- Highest rated first -->
<nw-blocks id="gameProvider" cloaked-link="..."
order-by='{"attribute":"rating", "direction":"DESC"}' \>
</nw-blocks>
<nw-blocks
id="gameProvider"
cloaked-link="betsson-casino"
language="fr"
country="FR"
heading-key="Fournisseurs de Jeux"
items-displayed="12"
order-by='{"attribute":"popularity", "direction":"DESC"}'
configuration='{
"heading-text-color": "#2C3E50",
"heading-background-color": "#ECF0F1",
"heading-font-size": "22px"
}' \>
</nw-blocks>
Provider data is fetched from Sanity CMS based on brand cloaked link:
{
brand: {
cloakedLink: "betsson-casino",
name: "Betsson Casino",
gameProviders: [
{
id: "provider-1",
name: "NetEnt",
url: "https://cdn.../netent-logo.png",
popularity: 95,
rating: 4.8
},
{
id: "provider-2",
name: "Microgaming",
url: "https://cdn.../microgaming-logo.png",
popularity: 92,
rating: 4.7
}
// ... more providers
]
}
}
Required Fields:
id: Unique provider identifiername: Provider name for displayurl: Logo image URL (or “N/A” for fallback)Optional Fields:
popularity: Ranking score for sortingrating: Quality rating for sortinglicense: Regional licensing infoProvider data is cached for performance:
BRAND_PROVIDERS:{cloakedLink}:{country}If the brand is inactive or not available in the specified country:
<!-- Widget displays hidden message -->
<p id="inactive-brand" style="display: none;">
The brand used is currently inactive or not allowed in this country!
</p>
Handling:
If no providers are found:
<p>No game provider available</p>
Common Causes:
All examples above use the new <nw-blocks> tag. For backward compatibility, you can still use <bw-widget>:
<!-- Old syntax (still supported) -->
<bw-widget
id="gameProvider"
cloaked-link="betsson-casino"
language="en"
country="ZZ"
items-displayed="10" \>
</bw-widget>
<!-- New syntax (recommended) -->
<nw-blocks
id="gameProvider"
cloaked-link="betsson-casino"
language="en"
country="ZZ"
items-displayed="10" \>
</nw-blocks>
Both tags work identically, but <nw-blocks> is recommended for all new implementations.