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.

Expand me...

With Long Description Text

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

Expand me...

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

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