CTA Components

⚠️ Important Notice: We are transitioning from <bw-widget> to <nw-blocks> tags. While <bw-widget> is still supported for backward compatibility, all new implementations should use <nw-blocks>. Please update your existing widgets when possible.


Overview

The CTA (Call-to-Action) components provide flexible ways to display links and buttons with tracking capabilities. There are four main component types:

  • ctaLink: Renders a simple styled hyperlink
  • ctaGeoLink: Geo-targeted link based on user location and product
  • ctaButton: Renders a styled button with customizable colors
  • ctaGeoButton: Geo-targeted button based on user location and product

A simple call-to-action link with tracking and styling options.

Basic Usage

Expand me...

dcKey d9436a112cce3915a3bff12b79e43f6e

Claim bonus

With Custom Text

Expand me...

dcKey 288822d4f281d837b6cc26f9401a1cd8

Override translation

Container Specification

You can specify whether the link should be wrapped in a span (inline, default) or div (block).

Expand me...

dcKey 87326cd65ac3418bbbea80a439dacf55

Container is div
  it is not inlined with text
Expand me...

dcKey f24c25583fa7f9b05c8b34306c98552c

Container is span by default
  it is inlined with text (default is span)

Advanced Configuration

Customize font size, colors, and hover effects using the configuration attribute.

Expand me...

dcKey f4be7bdb9c14714069d280f432b4d57c

Claim bonus

Attributes Reference

Attribute Type Default Description
id string required Component identifier (ctaLink)
cloaked-link string - The cloaked tracking link slug
text string - Custom link text (overrides translation)
translation string "cta-claim-bonus" i18n translation key
target string "" Link target attribute (_blank, _self, etc.)
rel string "nofollow" Link rel attribute
container string "span" Container element (span or div)
hover-color string "#0E5DB9" Link color on hover
tracking-target string - Additional tracking target parameter
tracking-data string - Custom tracking data
override-url string - Override the generated URL
referer string - Referer parameter for tracking
configuration JSON {"fontSize": "inherit", "color": "#0F73E6"} Styling configuration object

Blocked brands

Every brand carries an “IP’s excluded” list in Vulcan (Brand details > IP Control). The widget checks that list against the country it resolves for the page: the country attribute when the tag has one, otherwise the visitor’s country. When the country is on the list, the link text stays on the page but there is no link: no href, no redirect, no tracking click. The text is rendered as a plain <span class="cta-link--blocked" aria-disabled="true" data-brand-blocked="true"> in the inherited text color, so it does not look clickable; style it through those hooks if the theme needs a different look. A brand that is switched off in Vulcan (status not active) renders nothing visible, as before.


A geo-targeted call-to-action link that automatically selects brands based on user location, product, and language.

Basic Usage

Expand me...

dcKey 771861319a71a046a2e6398c68a7ffde

S'inscrire updated

With Custom Configuration

Expand me...

dcKey 3b856b9932625ba663173a1c0579f86b

Claim bonus

With Brand Name Placeholder

Use ##brand_name## in your text to dynamically insert the brand name.

Expand me...

dcKey a4f5ff8bfc07e450d8202ee7e96e5e5d

Ton bonus chez Royalistplay Casino

With Text Override and Brand Placeholder

Expand me...

dcKey 9bf4b0c27e06b68074bd06c3b9ecddae

Youpi trop bien : Legendplay Sports !

Attributes Reference

Attribute Type Default Description
id string required Component identifier (ctaGeoLink)
brandposition number 0 Brand position in the geo-targeted list (0-indexed internally, use 1 for first)
product string - Product type (e.g., “SB” for Sports Betting, “CA” for Casino)
language string - Language code (e.g., “fr”, “en”)
country string - Country code (e.g., “FR”, “US”)
country-state string - State code for US/CA (e.g., “NY”, “ON”)
selling-point-type string "general" Type of selling point to display
text string - Custom link text (supports ##brand_name## placeholder)
translation string "cta-claim-bonus" i18n translation key
target string "" Link target attribute
rel string "nofollow" Link rel attribute
container string "span" Container element (span or div)
hover-color string "#0E5DB9" Link color on hover
tracking-target string - Additional tracking target parameter
configuration JSON {"fontSize": "inherit", "color": "#0F73E6"} Styling configuration object

Blocked brands: a brand excluded for the resolved country never enters the geo-targeted list, so brandposition counts only the brands available in that country and the link always points to an available brand.


ctaButton

A styled button component with customizable colors, gradients, and hover effects.

Basic Usage

Expand me...

dcKey 7e09383567292d6933fdfc5b13ed3c8a

With Custom Text

Expand me...

dcKey 5ca45b995c12483cfe91e4eb33d26a66

With Advanced Configuration

Customize button appearance with gradient colors, hover effects, size, and more.

Expand me...

dcKey 0e93fc53504870a37bea20313a9b4578

With Right Arrow Icon

Control the display of the right arrow icon.

Expand me...

dcKey 8fa899419961af6b4391515bf274e383

Attributes Reference

Attribute Type Default Description
id string required Component identifier (ctaButton)
cloaked-link string - The cloaked tracking link slug
text string - Custom button text (overrides translation)
translation string "cta-claim-bonus" i18n translation key
target string "_blank" Link target attribute
rel string "nofollow" Link rel attribute
show-right-arrow boolean true Show/hide the right arrow icon
tracking-target string - Additional tracking target parameter
tracking-data string - Custom tracking data
override-url string - Override the generated URL
referer string - Referer parameter for tracking
configuration JSON See below Styling configuration object

Configuration Object:

{
  "fontSize": "14px",
  "buttonColors": ["#05842A", "#05842A"],  // [gradient-start, gradient-end]
  "buttonHover": "#096725",
  "width": "300px"
}

Blocked brands: a button exists to be clicked, so when the brand is excluded for the resolved country (Vulcan “IP’s excluded”) the button is not rendered, exactly like an inactive brand. Only ctaLink keeps its text in that case.


ctaGeoButton

A geo-targeted button that automatically selects brands based on user location, product, and language.

Basic Usage

Expand me...

dcKey 514dc5f38b41e94fb48ee4f99a9aa9f7

With Brand Name in Text

Expand me...

dcKey 3ced4a24663e7f6d5e5f0e860cc99388

With Custom Text and Brand Placeholder

Expand me...

dcKey e219a1ed0a7cd0e7a88bad890a904803

Attributes Reference

Attribute Type Default Description
id string required Component identifier (ctaGeoButton)
brandposition number 0 Brand position in the geo-targeted list (0-indexed internally, use 1 for first)
product string - Product type (e.g., “SB” for Sports Betting, “CA” for Casino)
language string - Language code (e.g., “fr”, “en”)
country string - Country code (e.g., “FR”, “US”)
country-state string - State code for US/CA (e.g., “NY”, “ON”)
selling-point-type string "general" Type of selling point to display
text string - Custom button text (supports ##brand_name## placeholder)
translation string "cta-claim-bonus" i18n translation key
target string "_blank" Link target attribute
rel string "nofollow" Link rel attribute
show-right-arrow boolean true Show/hide the right arrow icon
tracking-target string - Additional tracking target parameter
configuration JSON See ctaButton config Styling configuration object (same as ctaButton)

Backward Compatibility

All examples above use the new <nw-blocks> tag. If you need to use the legacy <bw-widget> tag for backward compatibility, simply replace <nw-blocks> with <bw-widget> in any example:

<!-- New way (recommended) -->
<nw-blocks id="ctaButton" cloaked-link="greatwin-casino">
</nw-blocks>

<!-- Old way (still supported) -->
<bw-widget id="ctaButton" cloaked-link="greatwin-casino">
</bw-widget>

Both tags work identically and support all the same attributes and functionality.


Common Use Cases

<nw-blocks id="ctaLink" cloaked-link="your-casino" text="Play Now"></nw-blocks>

2. Geo-Targeted Button for Multiple Markets

<nw-blocks id="ctaGeoButton" 
    product="CA" 
    language="en" 
    text="Join ##brand_name## Today!">
</nw-blocks>

3. Custom Styled Button with Tracking

<nw-blocks id="ctaButton" 
    cloaked-link="your-casino"
    tracking-target="homepage"
    tracking-data="promo-2024"
    configuration='{"buttonColors": ["#FF6B35", "#F7931E"], "width": "200px"}'>
</nw-blocks>
Check out <nw-blocks id="ctaLink" 
    cloaked-link="your-casino" 
    text="this amazing offer"
    container="span"
    configuration='{"color": "#e74c3c", "fontSize": "inherit"}'></nw-blocks> today!