General Info 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 General Info widget displays comprehensive casino or betting site information in an organized, expandable card format. It shows essential details like website URL, game types, payment methods, mobile apps, and founding year - perfect for casino review pages and comparison sections.

Key Features:

  • Comprehensive Data: Display website, game types, payment methods, apps, and founding year
  • Expandable Content: Show more/less toggle for space-efficient display
  • Customizable Fields: Control visible items and field labels
  • Brand Integration: Automatically fetches data from casino brand profiles
  • Link Tracking: Built-in analytics tracking for website links
  • Responsive Design: Adapts to mobile and desktop layouts
  • Custom Styling: Full control over colors and font sizes

Basic Usage

Expand me...

With Custom Styling

Expand me...

Attributes Reference

Attribute Type Required Default Description
id string Yes - Must be “General_Info”
cloaked-link string Yes - Brand identifier/cloaked link for fetching brand 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)
heading-key string No “General Informations” Main heading text
sub-heading JSON array No Default labels Array of field labels (6 items)
tracking-target string No “homepage” Tracking parameter for analytics
target string No “_blank” Link target attribute
rel string No “nofollow” Link rel attribute
items-displayed number No 3 Number of items visible before “Show More”
referer string No - Referrer tracking parameter
configuration JSON No {} Styling configuration object

Configuration Object Properties

Property Type Default Description
heading-text-color string “#b1b1b1” Color of the main heading text
sub-heading-text-color string “#b1b1b1” Color of the field labels (sub-headings)
heading-font-size string “14px” Font size for main heading
sub-heading-font-size string “14px” Font size for field labels

Default Information Fields

The widget displays six standard information fields:

Field Description Data Source
Website Casino website URL (clickable link) Brand profile
Game Types Available game categories (Slots, Live Casino, etc.) Brand profile
Deposit Methods Accepted payment methods for deposits Brand profile
Withdrawal Methods Available withdrawal options Brand profile
Apps Mobile app platforms (iOS, Android) Brand profile
Founded Year Year the casino was established Brand profile

Display Format:

  • Available Data: Shown as text or comma-separated list
  • Missing Data: Displays “N/A”
  • Website Link: Clickable with tracking parameters

Widget Features

Expandable Content

Show More/Less Toggle:

  • Initially displays items-displayed fields (default: 3)
  • “Show More” button expands to show all 6 fields
  • “Show Less” button collapses back to initial view
  • Smooth height animation during toggle
  • Triangle indicators (▼/▲) for visual feedback

Responsive Behavior:

  • Mobile: Stacks fields vertically
  • Desktop: Maintains consistent spacing
  • Auto-adjusts height based on content
  • Touch-friendly button sizing

Website Link Features:

  • Automatically generates tracking URL with widget ID
  • Includes custom tracking target (e.g., “homepage”, “review”)
  • Adds referrer parameter for source attribution
  • Supports custom link attributes (target, rel)
  • Full click analytics integration

URL Structure:

/go/{cloaked-link}/{tracking-target}?wid={widget-id}&trackingData={data}&referer={referer}

Custom Field Labels

Override default field labels using sub-heading attribute:

<nw-blocks
    id="General_Info"
    cloaked-link="..."
    sub-heading='[
        "Website",
        "Game Types",
        "Deposit Methods",
        "Withdrawal Methods",
        "Apps",
        "Founded Year"
    ]' >
</nw-blocks>

Requirements:

  • Must be valid JSON array
  • Must contain exactly 6 items
  • Order matches display order
  • Localize labels for international audiences

Common Use Cases

Casino Review Page

<nw-blocks
    id="General_Info"
    cloaked-link="betsson-casino"
    heading-key="Casino Details"
    tracking-target="review-page"
    items-displayed="6" >
</nw-blocks>

Comparison Table Sidebar

<nw-blocks
    id="General_Info"
    cloaked-link="fresh-casino"
    heading-key="Quick Facts"
    items-displayed="3"
    configuration='{
        "heading-font-size": "16px",
        "sub-heading-font-size": "13px"
    }' >
</nw-blocks>

Branded Dark Theme

<nw-blocks
    id="General_Info"
    cloaked-link="leovegas-casino"
    tracking-target="homepage"
    configuration='{
        "heading-text-color": "#FFFFFF",
        "sub-heading-text-color": "#B0B0B0",
        "heading-font-size": "22px",
        "sub-heading-font-size": "15px"
    }' >
</nw-blocks>

Regional Display (US State)

<nw-blocks
    id="General_Info"
    cloaked-link="draftkings-casino"
    country="US"
    heading-key="New Jersey Casino Info"
    tracking-target="nj-review" >
</nw-blocks>

Localized for French Market

<nw-blocks
    id="General_Info"
    cloaked-link="cresus-casino"
    language="fr"
    country="FR"
    heading-key="Informations Générales"
    sub-heading='["Site Web", "Types de Jeux", "Méthodes de Dépôt", "Méthodes de Retrait", "Applications", "Année de Création"]' >
</nw-blocks>

Mobile-Optimized Compact View

<nw-blocks
    id="General_Info"
    cloaked-link="betmgm-casino"
    items-displayed="2"
    configuration='{
        "heading-font-size": "18px",
        "sub-heading-font-size": "14px"
    }' >
</nw-blocks>

Best Practices

Display Configuration

  • Review Pages: Show all 6 fields (items-displayed="6") for comprehensive info
  • Sidebars: Limit to 3-4 fields for compact display
  • Mobile: Use items-displayed="2" for minimal initial view
  • Comparison: Show consistent fields across multiple brands

Content Strategy

  • Place widget high on review pages for quick casino overview
  • Use descriptive heading like “Casino Details” or “Quick Facts”
  • Combine with other widgets (ratings, bonuses) for complete profile
  • Update tracking-target for different page types (review, comparison, homepage)

Localization

  • Translate heading-key for international audiences
  • Customize sub-heading labels in local language
  • Set correct language for proper translations
  • Use country for region-specific payment methods

Styling Integration

  • Match colors with your site’s theme
  • Use larger font sizes (18-24px) for main headings on premium pages
  • Ensure contrast meets accessibility standards (WCAG AA)
  • Test on both light and dark backgrounds
  • Use rel="nofollow" for affiliate compliance
  • Set target="_blank" for external links
  • Include tracking-target to segment traffic sources
  • Add referer parameter to track widget placement

Performance

  • Widget loads quickly with minimal JavaScript
  • Data cached from brand profiles
  • Show/hide toggle uses efficient CSS animations
  • Lazy loads brand data on demand

Advanced Configuration

State/Province Support

For US and Canadian markets:

<!-- New Jersey, USA -->
<nw-blocks id="General_Info" cloaked-link="..." country="US" >
</nw-blocks>

<!-- Ontario, Canada -->
<nw-blocks id="General_Info" cloaked-link="..." country="CA-ON" >
</nw-blocks>

The widget automatically:

  • Parses country and state from hyphenated format
  • Filters payment methods by regional availability
  • Shows state-specific licensing info
  • Applies regional compliance rules

Full Styling Example

<nw-blocks
    id="General_Info"
    cloaked-link="betsson-casino"
    language="sv"
    country="SE"
    heading-key="Allmän Information"
    tracking-target="sv-review"
    items-displayed="6"
    target="_blank"
    rel="nofollow"
    referer="review-section"
    sub-heading='["Webbplats", "Speltyper", "Insättningsmetoder", "Uttagsmetoder", "Appar", "Grundat År"]'
    configuration='{
        "heading-text-color": "#1A1A1A",
        "sub-heading-text-color": "#666666",
        "heading-font-size": "24px",
        "sub-heading-font-size": "16px"
    }' >
</nw-blocks>

Dynamic Items Display

Adjust visible fields based on layout:

<!-- Compact: Show essentials only -->
<nw-blocks id="General_Info" cloaked-link="..." items-displayed="3" >
</nw-blocks>

<!-- Standard: Show most fields -->
<nw-blocks id="General_Info" cloaked-link="..." items-displayed="5" >
</nw-blocks>

<!-- Full: Show all fields (no toggle) -->
<nw-blocks id="General_Info" cloaked-link="..." items-displayed="6" >
</nw-blocks>

Data Requirements

Sanity CMS Structure

Brand data is fetched from Sanity CMS:

{
  brand: {
    cloakedLink: "betsson-casino",
    name: "Betsson Casino",
    website: "www.betsson.com",
    gameTypes: ["Slots", "Live Casino", "Table Games", "Sports Betting"],
    depositMethods: ["Credit Card", "PayPal", "Skrill", "Bank Transfer"],
    withdrawalMethods: ["PayPal", "Skrill", "Bank Transfer"],
    apps: ["iOS", "Android"],
    yearLaunched: "2001"
  }
}

Required Fields:

  • cloakedLink: Brand identifier
  • name: Casino name

Optional Fields:

  • website: Domain (without https://)
  • gameTypes: Array of game categories
  • depositMethods: Array of deposit options
  • withdrawalMethods: Array of withdrawal options
  • apps: Array of app platforms
  • yearLaunched: Founding year (string or number)

KV Storage

Brand data is cached for performance:

  • Key: BRAND_INFO:{cloakedLink}:{country}
  • TTL: 24 hours
  • Invalidation: On brand profile update

Error Handling

Inactive Brand

If the brand is inactive or not available:

<p id="inactive-brand" style="display: none;">
  The brand with name {brand-name} is currently inactive or not allowed in this country!
</p>

Handling:

  • Widget automatically hides
  • No visual output shown to users
  • Check browser console for debugging
  • Verify brand status in CMS

Missing Data

Fields with no data display “N/A”:

  • Website: Shows “N/A” if URL not configured
  • Game Types: Shows “N/A” if empty array
  • Payment Methods: Shows “N/A” if no methods available
  • Apps: Shows “N/A” if no apps listed
  • Founded Year: Shows “N/A” if not set

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="General_Info"
    cloaked-link="greatwin-casino"
    tracking-target="homepage"
    target="_blank"
    rel="nofollow" >
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks
    id="General_Info"
    cloaked-link="greatwin-casino"
    tracking-target="homepage"
    target="_blank"
    rel="nofollow" >
</nw-blocks>

Both tags work identically, but <nw-blocks> is recommended for all new implementations.