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

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

Basic Usage

Expand me...

404: disclaimerTextWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

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

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

Basic Usage

Expand me...

404: logosWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

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

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Display Modes

Logo Only Mode

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Text Only Mode

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Content Order Variations

Logos First

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Text First (Default)

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Alignment Options

Left Alignment (Default)

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Center Alignment

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Right Alignment

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Advanced Combinations

Center-Aligned with Logos First

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Right-Aligned with Text First

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

Multiple Widgets with Different Alignments

Expand me...

404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined 404: footerContentWidget, cfRayID 9de488c7ca7d7929, short: undefined, product: undefined, country: ES, language: es, currency: undefined

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.