CTA Button 2 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

CTA Button 2 components provide enhanced call-to-action functionality with optional brand logos and customizable styling. There are two main component types:

ctaButton2: Enhanced CTA button with optional brand logo and description text
ctaGeoButton2: Geo-targeted version that automatically selects brands based on user location and product

ctaButton2

An enhanced CTA button component with support for brand logos, custom colors, description text, and flexible styling options.

Basic Usage (No Logo)

Expand me...

With Long Description Text

For descriptions with 75 or more characters, the layout automatically adjusts to accommodate longer text.

Expand me...

With Brand Logo

Display the brand logo alongside the CTA button. Supports ##brand_name## placeholder in text.

Expand me...

Attributes Reference

Attribute	Type	Default	Description
`id`	string	required	Component identifier (ctabutton2)
`cloakedlink`	string	`"cresus-casino"`	The cloaked tracking link slug
`showlogo`	boolean	`true`	Display brand logo alongside button
`text`	string	`""`	Description text (supports ##brand_name## placeholder)
`ctatext`	string	`""`	Button text (overrides ctakey translation)
`ctakey`	string	`""`	i18n translation key for button text
`target`	string	`"_blank"`	Link target attribute
`rel`	string	`"nofollow"`	Link rel attribute
`trackinglinktarget`	string	`""`	Additional tracking target parameter
`referer`	string	-	Referer parameter for tracking
`ctacolors`	string/array	`["#05842A", "#05842A"]`	Button gradient colors [start, end]
`ctahovercolors`	string/array	`["#096725", "#096725"]`	Button hover gradient colors [start, end]

ctaGeoButton2

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

Basic Usage (No Logo)

Expand me...

With Brand Logo and Placeholder

Display the geo-targeted brand logo with dynamic brand name insertion.

Expand me...

Attributes Reference

Attribute	Type	Default	Description
`id`	string	required	Component identifier (ctageobutton2)
`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	`"en"`	Language code (e.g., “fr”, “en”)
`country`	string	`"ZZ"`	Country code (e.g., “FR”, “US”, “ZZ” for generic)
`countryState`	string	-	State code for US/CA (e.g., “NY”, “ON”)
`sellingpointtype`	string	`"general"`	Type of selling point to display
`showlogo`	boolean	`true`	Display brand logo alongside button
`text`	string	`""`	Description text (supports ##brand_name## placeholder)
`ctatext`	string	`""`	Button text (overrides ctakey translation)
`ctakey`	string	`""`	i18n translation key for button text
`target`	string	`"_blank"`	Link target attribute
`rel`	string	`"nofollow"`	Link rel attribute
`trackinglinktarget`	string	`""`	Additional tracking target parameter
`referer`	string	-	Referer parameter for tracking
`maxRows`	number	`9999`	Maximum number of rows to fetch
`ctacolors`	string/array	`["#05842A", "#05842A"]`	Button gradient colors [start, end]
`ctahovercolors`	string/array	`["#096725", "#096725"]`	Button hover gradient colors [start, end]

Color Configuration

Both components support flexible color configuration for button styling:

Single Color

ctacolors="#05842A"

Gradient Colors (Array Format)

ctacolors="['#05842A', '#04691E']"

The button will create a gradient from the first color to the second color.

Key Features

1. Brand Logo Integration

Set showlogo="true" to display the brand logo
Logo is automatically fetched based on the brand
Layout adapts based on logo presence

2. Dynamic Text with Placeholders

Use ##brand_name## in text or ctatext attributes
Placeholder is automatically replaced with the actual brand name
Useful for personalized messaging

3. Long Text Support

Text descriptions with 75+ characters trigger responsive layout
Automatically adjusts spacing and alignment
Maintains readability across different text lengths

4. Flexible Color Customization

Support for solid colors or gradients
Separate hover state colors
CSS-compatible color values (hex, rgb, etc.)

5. Geo-Targeting

Automatically select brands based on location
Product-specific targeting (Sports, Casino, etc.)
Language and country-specific content

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="ctabutton2" cloakedlink="greatwin-casino" showlogo="true">
</nw-blocks>

<!-- Old way (still supported) -->
<bw-widget id="ctabutton2" cloakedlink="greatwin-casino" showlogo="true">
</bw-widget>

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

Common Use Cases

1. Simple Button Without Logo

<nw-blocks id="ctabutton2" 
    cloakedlink="your-casino" 
    showlogo="false" 
    ctatext="Play Now"
    ctacolors="['#FF6B35', '#F7931E']">
</nw-blocks>

2. Branded CTA with Logo and Description

<nw-blocks id="ctabutton2" 
    cloakedlink="your-casino" 
    showlogo="true" 
    text="Join ##brand_name## and get a 100% welcome bonus!"
    ctatext="Claim Bonus">
</nw-blocks>

3. Geo-Targeted Casino Button

<nw-blocks id="ctageobutton2" 
    product="CA" 
    language="en" 
    country="US"
    showlogo="true"
    text="Best online casino for ##brand_name##"
    ctatext="Play Now">
</nw-blocks>

4. Custom Styled Sportsbook Button

<nw-blocks id="ctageobutton2" 
    product="SB" 
    brandposition="1"
    language="fr" 
    showlogo="true"
    ctacolors="['#1E90FF', '#0066CC']"
    ctahovercolors="['#0066CC', '#004C99']"
    text="Pariez sur ##brand_name##">
</nw-blocks>