Game Providers Widget

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.

Overview

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:

  • Provider Showcase: Display gaming software providers with logos and rankings
  • Interactive Navigation: Horizontal scroll buttons for easy browsing
  • Expandable Content: Show more/less toggle for handling large provider lists
  • Customizable Display: Control number of visible items and styling
  • Brand Integration: Automatically fetches providers linked to casino brands
  • Responsive Design: Adapts to different screen sizes and layouts

Basic Usage

Expand me...

dcKey 8c2c9d95d0b8d2a05a41fa383696f4db

Game Providers

1
2
3
4
5
6
7
8
9
10

With Custom Styling

Expand me...

dcKey c3de2684c3b41e653a4d8509e0458434

Game Providers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

With Custom Heading

Expand me...

dcKey 7fb88ea6f4ca275a849cd57fd5f6e56d

Top Software Providers

1N/A
2
3N/A
4N/A
5
6
7N/A
8N/A
9N/A
10N/A
11
12

Attributes Reference

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

Configuration Object Properties

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

Widget Features

Interactive Navigation

Horizontal Scrolling:

  • Left/right arrow buttons for desktop navigation
  • Touch-swipe support for mobile devices
  • Smooth scroll animation between provider groups
  • Automatic button visibility based on content overflow

Show More/Less Toggle:

  • Collapses providers beyond items-displayed limit
  • “Show More ▼” expands to show all providers
  • “Show Less ▲” collapses back to initial view
  • Maintains scroll position during toggle

Provider Display

Visual Elements:

  • Ranking Number: Sequential number for each provider
  • Provider Logo: High-quality branded images
  • Fallback Display: Shows “N/A” if logo unavailable
  • Card Layout: Clean, consistent provider cards

Layout Features:

  • Responsive grid adapts to screen size
  • Fixed card dimensions for uniform appearance
  • Hover effects for interactive feedback
  • Numbered ranking for easy reference

Sorting Options

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:

  • Attribute: name, popularity, rating
  • Direction: ASC (ascending), DESC (descending)

Common Use Cases

Casino Review Page

<nw-blocks 
  id="gameProvider"
  cloaked-link="betsson-casino"
  language="en"
  country="UK"
  heading-key="Available Game Providers"
  items-displayed="12">
</nw-blocks>

Branded Styling for Dark Theme

<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>

Regional Display (US State)

<nw-blocks 
  id="gameProvider"
  cloaked-link="draftkings-casino"
  language="en"
  country="US"
  heading-key="Licensed Providers in New Jersey"
  items-displayed="15">
</nw-blocks>

Compact Mobile View

<nw-blocks 
  id="gameProvider"
  cloaked-link="betmgm-casino"
  language="en"
  country="CA"
  items-displayed="6"
  configuration='{
    "heading-font-size": "16px"
  }'>
</nw-blocks>

Full Provider List

<!-- Show all providers without limit -->
<nw-blocks 
  id="gameProvider"
  cloaked-link="leovegas-casino"
  language="en"
  country="SE"
  heading-key="All Gaming Providers">
</nw-blocks>

Best Practices

Display Configuration

  • Desktop: Show 10-15 providers initially for optimal scrolling experience
  • Mobile: Limit to 6-8 providers to reduce initial load
  • Full Display: Omit items-displayed to show all providers without expansion
  • Large Lists: Use items-displayed with 30+ providers to improve performance

Content Strategy

  • Use descriptive heading like “Top Software Providers” or “Available Game Studios”
  • Display providers on casino review pages and brand comparison sections
  • Show provider count in heading (e.g., “100+ Game Providers”)
  • Order by popularity to highlight premium providers

Styling Integration

  • Match heading colors with your site’s theme
  • Ensure sufficient contrast for accessibility
  • Use larger font sizes (18-22px) for premium brand pages
  • Test on both light and dark backgrounds

Brand Selection

  • Use correct cloaked-link matching your casino brand database
  • Verify brand is active before displaying widget
  • Handle inactive brands gracefully (widget shows hidden message)
  • Update links when brand partnerships change

Regional Compliance

  • Set correct country for geo-specific provider availability
  • Use state codes (US-NJ, US-PA) for US gambling markets
  • Display only licensed providers for regulated markets
  • Update provider list when licensing changes

Performance

  • Limit initial display to improve page load times
  • Lazy load provider logos for faster rendering
  • Cache provider data for repeat visitors
  • Use CDN for provider logo delivery

Advanced Configuration

State/Province Support

For 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:

  • Parses country and state from hyphenated format
  • Filters providers by regional licensing
  • Shows only compliant providers
  • Applies state-specific regulations

Custom Ordering Examples

<!-- 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>

Full Styling Example

<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>

Data Requirements

Sanity CMS Structure

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 identifier
  • name: Provider name for display
  • url: Logo image URL (or “N/A” for fallback)

Optional Fields:

  • popularity: Ranking score for sorting
  • rating: Quality rating for sorting
  • license: Regional licensing info

KV Storage

Provider data is cached for performance:

  • Key: BRAND_PROVIDERS:{cloakedLink}:{country}
  • TTL: 24 hours
  • Invalidation: Manual or on brand update

Error Handling

Inactive Brand

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:

  • Widget automatically hides if brand is inactive
  • No visual element shown to users
  • Prevents displaying unavailable content
  • Check browser console for debugging info

No Providers Available

If no providers are found:

<p>No game provider available</p>

Common Causes:

  • Brand has no associated providers in CMS
  • Regional filtering removed all providers
  • Data not yet synced from Sanity
  • Incorrect cloaked link specified

Backward Compatibility

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.