Toplist Blocked Widget

Tag Migration Notice: This widget uses the legacy bw-widget tag. For new implementations, please use <nw-blocks> tags instead. The bw-widget tag remains supported for backward compatibility.

Toplist3 Blocked

The Toplist3Blocked widget displays an unavailable brand notification followed by a Toplist3 of alternative recommended brands. Designed for scenarios where a brand is inactive or IP-excluded in specific regions, providing users with immediate alternatives.

Key Features

  • Unavailable Brand Notification: Displays blocked brand logo with custom availability message
  • IP Exclusion Detection: Automatically shows for IP-excluded brands (e.g., Cameroon, Malta, France, Bulgaria)
  • Alternative Recommendations: Shows top 3 alternative brands via Toplist3 widget
  • Custom Messaging: Configurable availability and suggestion text via attributes
  • Translation Support: Built-in translation keys for ribbon and label text
  • Toplist3 Integration: Seamlessly embeds Toplist3 component with isHero: false
  • Active Brand Handling: Silently hides if brand is available in user’s region
  • Product-Specific: Supports all product types (CA, SB, BI, etc.)
  • CTA Customization: Configurable button colors for alternative brands
  • Max Rows Fixed: Always displays 3 alternative brands

Demo Examples

Inactive Brand (888-ladies-casino)

Expand me...

IP-Excluded Brand (campobet-casino) with Custom Banner Text

Expand me...

Usage Examples

Basic Implementation (Inactive Brand)

<nw-blocks id="toplist3blocked"
    cloakedlink="888-ladies-casino"
    country="FR"
    language="fr"
    product="CA"
    ctakey="cta-claim-bonus">
</nw-blocks>

Note: This example uses an inactive brand (888-ladies-casino)

IP-Excluded Brand with Custom Text

<nw-blocks id="toplist3blocked"
    cloakedlink="campobet-casino"
    country="FR"
    language="fr"
    product="CA"
    availabilitytext="A custom availability to say Campobet is unavailable"
    suggestiontext="Campobet has been disabled by IP in this country"
    ctakey="cta-claim-bonus">
</nw-blocks>

Note: Campobet is IP-excluded in Cameroon, Malta, France, Bulgaria

With Custom CTA Colors

<nw-blocks id="toplist3blocked"
    cloakedlink="blocked-casino"
    country="US"
    language="en"
    product="CA"
    ctacolors='["#d4af37", "#c9a22b"]'
    ctahovercolors='["#c9a22b", "#b8991a"]'
    ctatext="Visit Alternative">
</nw-blocks>

Multi-language with Translation Keys

<nw-blocks id="toplist3blocked"
    cloakedlink="restricted-brand"
    country="DE"
    language="de"
    product="CA"
    availabilitykey="wgt-brand-unavailable-de"
    suggestionkey="wgt-alternatives-de"
    ctakey="cta-besuchen">
</nw-blocks>

Sportsbook with Tracking

<nw-blocks id="toplist3blocked"
    cloakedlink="blocked-sportsbook"
    country="UK"
    language="en"
    product="SB"
    trackingTarget="blocked-banner"
    trackingdata="sb-alternatives"
    referer="review-page">
</nw-blocks>

Attributes Reference

Attribute Type Required Default Description
id string Yes - Unique widget identifier
cloakedlink string Yes - Brand identifier (must be inactive or IP-excluded)
product string Yes - Product code (CA/SB/BI/PO/LO/LI/FN/ES/CR/CF/ST)
country string Yes - Country code (ISO 3166-1) for IP exclusion check
language string Yes - Language code (ISO 639-1)
availabilitytext string No - Custom unavailability message (overrides translation)
suggestiontext string No - Custom suggestion message (overrides translation)
availabilitykey string No "wgt-toplist3blocked-ribbon" Translation key for availability ribbon
suggestionkey string No "wgt-toplist3blocked-label" Translation key for suggestion label
ctakey string No "cta-claim-bonus" Translation key for alternative brands CTA
ctatext string No - Override CTA text for alternative brands
ctacolors JSON array No ["#05842A", "#05842A"] CTA button colors for alternatives
ctahovercolors JSON array No ["#096725", "#096725"] CTA hover colors for alternatives
trackingTarget string No "" Tracking link target for alternatives
trackingdata string No "" Additional tracking metadata
target string No "_blank" Link target attribute
rel string No "nofollow" Link relationship attribute
referer string No - Referrer identifier
sellingpointtype string No "general" Selling point type for alternatives
bonustype string No "tb" Bonus type for alternatives
eagercount number No 0 Number of images to eager load

Note: maxRows is internally fixed to 3 for alternative brands

Widget Components

1. Unavailable Brand Notification

  • Component: <UnavailableBrandNotification>
  • Content:
    • Brand logo (from transparent asset)
    • Availability ribbon (top section)
    • Suggestion label (bottom section)
  • Props:
    • casinoName: Brand name
    • casinoUrl: Brand URL
    • casinoLogo: Logo image path
    • label: Suggestion text or translation key
    • ribbon: Availability text or translation key
  • Styling: Custom styles via $id prop

2. Alternative Brands Toplist

  • Component: <Toplist3>
  • Configuration:
    • isHero: false for all items
    • Fixed to 3 brands (maxRows: 3)
    • Inherits CTA colors from parent widget
    • Uses same tracking configuration
  • Data Source: topData array from CMS
  • Props: { id, data: toplistItems }

Display Logic

Condition: Brand Excluded

if (is_brand_excluded) {
  // Display notification + alternatives
  return (
    <>
      <UnavailableBrandNotification />
      <Toplist3 />
    </>
  );
}

Condition: Brand Available

if (!is_brand_excluded) {
  // Hide widget silently
  return (
    <span className="active-brand" style={{ display: 'none' }}>
      The brand with name {name} is available for your country.
    </span>
  );
}

Data Requirements

Sanity CMS Structure

{
  is_brand_excluded: boolean;        // IP exclusion or inactive status
  brandData: {
    name: string;                    // Brand display name
    url: string;                     // Brand website URL
    transparent: {
      asset: {
        imagePath: string;           // Logo image path
      }
    }
  };
  label: string;                     // Suggestion text
  ribbon: string;                    // Availability text
  topData: Array<{                   // Alternative brands (3 items)
    brandId: string;
    brandName: string;
    imgUrl: string;
    trackingLink: string;
    bonus: string;
    rating: number;
    // ... other Toplist3 fields
  }>;
}

Brand KV Key

Format: brand-{product}-{cloakedlink} (lowercase)

Example: brand-ca-campobet-casino

Translation Keys

Key Default Text Purpose
wgt-toplist3blocked-ribbon “This casino is unavailable” Availability ribbon
wgt-toplist3blocked-label “Check out these alternatives” Suggestion label
cta-claim-bonus “Claim Bonus” Alternative brands CTA

Common Use Cases

1. Inactive Casino Brand

<nw-blocks id="toplist3blocked"
    cloakedlink="888-ladies-casino"
    country="FR"
    language="fr"
    product="CA"
    ctakey="cta-claim-bonus"
    ctatext="My default text">
</nw-blocks>

Scenario: Brand is completely inactive across all regions

2. IP-Excluded Casino (France)

<nw-blocks id="toplist3blocked"
    cloakedlink="campobet-casino"
    country="FR"
    language="fr"
    product="CA"
    availabilitytext="A custom availability to say Campobet is unavailable"
    suggestiontext="Campobet has been disabled by IP in this country"
    ctakey="cta-claim-bonus">
</nw-blocks>

Scenario: Campobet blocked in Cameroon, Malta, France, Bulgaria

3. Regional Sportsbook Restriction

<nw-blocks id="toplist3blocked"
    cloakedlink="restricted-sportsbook"
    country="US"
    language="en"
    product="SB"
    availabilitytext="This sportsbook is not available in your state"
    suggestiontext="Try these licensed alternatives"
    ctacolors='["#ff6b35", "#f7931e"]'>
</nw-blocks>

4. Multi-language Blocked Brand

<nw-blocks id="toplist3blocked"
    cloakedlink="blocked-casino"
    country="DE"
    language="de"
    product="CA"
    availabilitykey="wgt-unavailable-de"
    suggestionkey="wgt-try-these-de"
    ctakey="cta-jetzt-spielen">
</nw-blocks>

5. Poker Room with Tracking

<nw-blocks id="toplist3blocked"
    cloakedlink="blocked-poker"
    country="UK"
    language="en"
    product="PO"
    trackingTarget="blocked-poker"
    trackingdata="alternatives-displayed"
    referer="poker-reviews">
</nw-blocks>

6. Custom Styling for Alternatives

<nw-blocks id="toplist3blocked"
    cloakedlink="unavailable-brand"
    country="ES"
    language="es"
    product="CA"
    availabilitytext="Este casino no está disponible"
    suggestiontext="Prueba estas alternativas"
    ctacolors='["#d4af37", "#c9a22b"]'
    ctahovercolors='["#c9a22b", "#b8991a"]'>
</nw-blocks>

7. Crypto Casino IP Block

<nw-blocks id="toplist3blocked"
    cloakedlink="blocked-crypto-casino"
    country="US"
    language="en"
    product="CR"
    availabilitytext="This crypto casino is restricted in your region"
    suggestiontext="Check out these licensed crypto casinos">
</nw-blocks>

8. Live Casino with Custom Target

<nw-blocks id="toplist3blocked"
    cloakedlink="restricted-live-casino"
    country="FR"
    language="fr"
    product="LI"
    target="_self"
    rel="sponsored"
    availabilitytext="Ce casino live n'est pas disponible"
    suggestiontext="Découvrez ces alternatives">
</nw-blocks>

Best Practices

Content Strategy

  1. Clear Messaging: Explain why brand is unavailable (inactive vs IP-blocked)
  2. Custom Text: Use availabilitytext and suggestiontext for region-specific messages
  3. Relevant Alternatives: Ensure CMS provides suitable alternatives for blocked brand
  4. Product Consistency: Alternative brands should match the blocked brand’s product type
  5. Translation Keys: Use translation keys for multi-language sites

User Experience

  1. Immediate Alternatives: Show top 3 alternatives to minimize user frustration
  2. Visual Clarity: Blocked brand notification should be distinct from alternatives
  3. Consistent Styling: Alternative CTAs should match site design
  4. Mobile Optimization: Test notification layout on mobile devices
  5. Loading States: Consider loading states for alternative brands

Visual Design

  1. Color Consistency: Use site’s color scheme for alternative CTAs
  2. Logo Display: Ensure blocked brand logo is clearly visible
  3. Separation: Visual distinction between notification and alternatives
  4. Contrast: Notification should stand out from alternatives list
  5. Spacing: Adequate whitespace between components

Performance

  1. Eager Loading: Use eagercount for above-fold images
  2. Image Optimization: Compress brand logos and alternative images
  3. Conditional Rendering: Widget returns early for available brands
  4. Cache Strategy: Leverage brand KV key for caching
  5. Minimal Overhead: Widget only loads when needed

Accessibility

  1. Alt Text: All logos include descriptive alt attributes
  2. Screen Readers: Hidden “active-brand” message for debugging only
  3. Keyboard Navigation: All alternative links keyboard accessible
  4. Focus Management: Clear focus indicators on CTAs
  5. Semantic HTML: Proper structure for notification and list

SEO

  1. NoFollow Links: Use rel="nofollow" for affiliate links
  2. Hidden Content: Active brand message is display:none (not indexed)
  3. Alt Attributes: Descriptive alt text for all images
  4. Structured Content: Proper semantic markup
  5. Link Attributes: Appropriate target and rel values

Advanced Configuration

Custom Notification with Brand Colors

<nw-blocks id="toplist3blocked"
    cloakedlink="blocked-casino"
    country="FR"
    language="fr"
    product="CA"
    availabilitytext="This premium casino is temporarily unavailable"
    suggestiontext="Try these hand-picked alternatives"
    ctacolors='["#1a1a1a", "#0d0d0d"]'
    ctahovercolors='["#2a2a2a", "#1a1a1a"]'>
</nw-blocks>

Multiple Product Types on Same Page

<!-- Blocked Casino -->
<nw-blocks id="blocked-casino"
    cloakedlink="blocked-ca-brand"
    country="US"
    language="en"
    product="CA"
    availabilitytext="Casino not available"
    suggestiontext="Try these casinos">
</nw-blocks>

<!-- Blocked Sportsbook -->
<nw-blocks id="blocked-sportsbook"
    cloakedlink="blocked-sb-brand"
    country="US"
    language="en"
    product="SB"
    availabilitytext="Sportsbook not available"
    suggestiontext="Try these sportsbooks">
</nw-blocks>

Advanced Tracking Configuration

<nw-blocks id="toplist3blocked"
    cloakedlink="tracked-blocked-brand"
    country="UK"
    language="en"
    product="CA"
    trackingTarget="blocked-notification"
    trackingdata="exclusion-france"
    referer="review-page-2024"
    availabilitytext="This casino is not available in your region"
    suggestiontext="We recommend these alternatives">
</nw-blocks>

Regional Exclusion with State Support

<nw-blocks id="toplist3blocked"
    cloakedlink="us-blocked-brand"
    country="US"
    language="en"
    product="CA"
    availabilitytext="Not licensed in your state"
    suggestiontext="Check out these state-licensed alternatives"
    ctatext="Play Now">
</nw-blocks>

Error Handling

Active Brand (Not Blocked)

If is_brand_excluded === false:

<span className="active-brand" style="display: none;">
  The brand with name {name} is available for your country.
</span>

Result: Widget hidden, no alternatives shown

Missing Alternative Data

  • No topData: Widget may fail to render alternatives
  • Empty topData array: Notification shows but no alternatives
  • Less than 3 alternatives: Shows available alternatives (may be less than 3)

Missing Brand Data

  • No brandData: Widget may fail to render notification
  • Missing logo: Logo section may be empty or show broken image
  • No name: May display undefined in hidden message

Invalid Product Code

  • Invalid product: May fail to generate correct brand KV key
  • Missing product: Widget may not load properly
Feature Toplist3Blocked Toplist3 Hero
Purpose Show alternatives for blocked brands Display top brands Single-row toplist
Max Rows Fixed to 3 Configurable Usually 1
Notification ✅ Unavailable brand banner No No
Use Case IP exclusions, inactive brands Standard toplists Homepage hero
Custom Messages ✅ Availability + suggestion text No No
Conditional Display ✅ Only if brand blocked Always Always
Alternative Brands ✅ Automatic fallback list Primary list Single brand
isHero Flag Always false Configurable Always true
Best For Geo-restrictions Brand comparisons Featured promotions

Backward Compatibility

Legacy bw-widget Tag

All examples using <bw-widget> remain fully functional:

<bw-widget id="toplist3blocked"
    cloakedlink="888-ladies-casino"
    country="FR"
    language="fr"
    product="CA"
    ctakey="cta-claim-bonus"
    ctacolors='["#05842A", "#05842A"]'
    ctahovercolors='["#096725", "#096725"]'>
</bw-widget>

Migration Path: Replace <bw-widget> with <nw-blocks> - all attributes compatible.

Attribute Naming

Supports both camelCase and lowercase:

  • cloakedLink / cloakedlink ✅
  • availabilityText / availabilitytext ✅
  • suggestionText / suggestiontext ✅
  • availabilityKey / availabilitykey ✅
  • suggestionKey / suggestionkey ✅
  • trackingTarget / trackinglinktarget ✅
  • ctaColors / ctacolors ✅
  • ctaHoverColors / ctahovercolors ✅