⚠️ 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.
The CTA (Call-to-Action) components provide flexible ways to display links and buttons with tracking capabilities. There are four main component types:
A simple call-to-action link with tracking and styling options.
You can specify whether the link should be wrapped in a span (inline, default) or div (block).
Customize font size, colors, and hover effects using the configuration attribute.
| 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 |
A geo-targeted call-to-action link that automatically selects brands based on user location, product, and language.
Use ##brand_name## in your text to dynamically insert the brand name.
| 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 |
A styled button component with customizable colors, gradients, and hover effects.
Customize button appearance with gradient colors, hover effects, size, and more.
Control the display of the right arrow icon.
| 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"
}
A geo-targeted button that automatically selects brands based on user location, product, and language.
| 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) |
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.
<nw-blocks id="ctaLink" cloaked-link="your-casino" text="Play Now"></nw-blocks>
<nw-blocks id="ctaGeoButton"
product="CA"
language="en"
text="Join ##brand_name## Today!">
</nw-blocks>
<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!