Compliance Widgets

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

Compliance widgets provide essential regulatory content for gambling and gaming websites, including disclaimer text, compliance logos, and comprehensive footer content. These widgets ensure your site meets legal requirements for responsible gaming and regulatory compliance across different jurisdictions.

Available Widgets:

  • disclaimerTextWidget: Display localized disclaimer text with custom styling
  • logosWidget: Show compliance and responsible gaming logos
  • footerContentWidget: Combined widget for flexible footer layouts with text and logos

Disclaimer Text Widget

Displays regulatory disclaimer text with full styling customization. Content is automatically localized based on country and language settings.

Basic Usage

Expand me...

Attributes Reference

Attribute Type Required Description
id string Yes Must be “disclaimerTextWidget”
country string Yes ISO 3166-1 alpha-2 country code (e.g., “ES”, “FR”, “UK”)
language string Yes ISO 639-1 language code (e.g., “es”, “fr”, “en”)
configuration JSON No Styling configuration object

Configuration Object Properties

Property Type Default Description
color string “#000000” Text color (hex or CSS color)
font-size string “14px” Font size with units
font-weight string “400” Font weight (100-900 or keywords)
background-color string “transparent” Background color for text container

Logos Widget

Displays compliance and responsible gaming logos with customizable height and background. Logos are automatically selected based on country regulations.

Basic Usage

Expand me...

Attributes Reference

Attribute Type Required Description
id string Yes Must be “logosWidget”
country string Yes ISO country code for logo selection
language string Yes ISO language code for localization
height string No Logo height with units (default: “50px”)
background string No Background color (default: transparent)

Comprehensive footer widget supporting multiple display modes, content ordering, and alignment options. Combines disclaimer text and logos with flexible layout control.

Default Configuration (Text First)

Expand me...

Display Modes

Logo Only Mode

Expand me...

Text Only Mode

Expand me...

Content Order Variations

Logos First

Expand me...

Text First (Default)

Expand me...

Alignment Options

Left Alignment (Default)

Expand me...

Center Alignment

Expand me...

Right Alignment

Expand me...

Advanced Combinations

Center-Aligned with Logos First

Expand me...

Right-Aligned with Text First

Expand me...

Multiple Widgets with Different Alignments

Expand me...

Attribute Type Required Default Description
id string Yes - Must be “footerContentWidget”
country string Yes - ISO country code (e.g., “ES”, “FR”, “UK”)
language string Yes - ISO language code (e.g., “es”, “fr”, “en”)
display-text string No “yes” Show disclaimer text (“yes” | “no”)
display-logo string No “yes” Show compliance logos (“yes” | “no”)
alignment string No “Left” Content alignment (“Left” | “Center” | “Right”)
logofirst string No “false” Display order (“true” = logos first, “false” = text first)
configuration JSON No {} Styling configuration object

Configuration Object Properties

Property Type Default Description
color string “#000000” Disclaimer text color
font-size string “14px” Text font size
font-weight string “400” Text font weight
background-color string “transparent” Widget background color
logo-height string “50px” Height of compliance logos

Common Use Cases

<nw-blocks 
  id="footerContentWidget" 
  country="ES" 
  language="es" 
  alignment="Center"
  configuration='{ 
    "color":"#666666", 
    "font-size": "12px", 
    "font-weight": "400", 
    "background-color": "#F5F5F5", 
    "logo-height": "40px"
  }'\>
</nw-blocks>

Separated Text and Logos

<!-- Disclaimer section -->
<nw-blocks 
  id="disclaimerTextWidget" 
  country="FR" 
  language="fr" 
  configuration='{ 
    "color":"#333333", 
    "font-size": "13px", 
    "font-weight": "500"
  }'\>
</nw-blocks>

<!-- Logos section -->
<nw-blocks 
  id="logosWidget" 
  height="60px" 
  background="#FFFFFF" 
  country="FR" 
  language="fr"\>
</nw-blocks>

Minimal Logo Display

<nw-blocks 
  id="footerContentWidget" 
  country="UK" 
  language="en" 
  display-text="no" 
  alignment="Center"
  configuration='{ 
    "logo-height": "35px"
  }'\>
</nw-blocks>
<nw-blocks 
  id="footerContentWidget" 
  country="DE" 
  language="de" 
  alignment="Center"
  logofirst="true"
  configuration='{ 
    "color":"#FFFFFF", 
    "font-size": "14px", 
    "font-weight": "600", 
    "background-color": "#1A1A1A", 
    "logo-height": "50px"
  }'\>
</nw-blocks>

Layout Configuration Matrix

Use Case Alignment Logo First Display Text Display Logo Description
Standard Footer Left false yes yes Default layout with text then logos
Centered Footer Center false yes yes Centered layout for symmetric design
Logo-First Footer Left true yes yes Logos displayed before disclaimer
Text Only Center N/A yes no Disclaimer text without logos
Logos Only Right N/A no yes Compliance logos without text
Centered Logos First Center true yes yes Centered with logos above text
Right Text Only Right N/A yes no Right-aligned text without logos
Custom Split Varies N/A varies varies Use multiple widget instances

Best Practices

Localization

  • Always provide both country and language attributes for proper content localization
  • Disclaimer text is automatically fetched from the CMS based on country/language
  • Compliance logos are jurisdiction-specific and automatically selected

Styling

  • Use configuration object for consistent styling across widgets
  • Match background colors with your site’s footer design
  • Ensure text color provides sufficient contrast for accessibility
  • Logo height should be proportional to text size (typically 3-4x font size)

Layout Design

  • Use center alignment for symmetric footer designs
  • Consider logo-first layout for prominent compliance display
  • Use separate widgets (text-only + logo-only) for complex layouts
  • Test alignment on mobile devices to ensure proper display

Performance

  • Widgets are server-side rendered for optimal performance
  • Configuration changes don’t require page reloads
  • Logos are optimized and cached automatically

Compliance

  • Required for gambling and gaming sites in regulated markets
  • Display both text and logos for full compliance coverage
  • Update country/language when user location changes
  • Ensure widgets are visible on all pages

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="disclaimerTextWidget" 
  country="ES" 
  language="es" 
  configuration='{ 
    "color":"#FFFFFF", 
    "font-size": "14px", 
    "font-weight": "700"
  }'\>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="disclaimerTextWidget" 
  country="ES" 
  language="es" 
  configuration='{ 
    "color":"#FFFFFF", 
    "font-size": "14px", 
    "font-weight": "700"
  }'\>
</nw-blocks>

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