Toplist Blocked Widget

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)

<nw-blocks id="toplist3blocked"
    country="FR"
    language="fr"
    product="CA"
    sellingpointtype="general"
    ctakey="cta-claim-bonus"
    ctatext="My default text"
    cloakedlink="888-ladies-casino"
    trackingTarget="homepage"
    target="_blank"
    rel="nofollow"
    ctacolors='["#05842A", "#05842A"]'
    ctahovercolors='["#096725", "#096725"]' \>
</nw-blocks>

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

<nw-blocks id="toplist3blocked-campobet"
    country="FR"
    language="fr"
    product="CA"
    sellingpointtype="general"
    ctakey="cta-claim-bonus"
    ctatext="My default text"
    availabilitytext="A custom availability to say Campobet is unavailable"
    suggestiontext="Campobet has been disabled by IP in this country" 
    cloakedlink="campobet-casino"
    trackingTarget="homepage"
    target="_blank"
    rel="nofollow"
    ctacolors='["#05842A", "#05842A"]'
    ctahovercolors='["#096725", "#096725"]' \>
</nw-blocks>

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>

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

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

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

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

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>

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

Comparison: Toplist3Blocked vs Related Widgets

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 ✅