CTA Button 4 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 4 components provide a streamlined call-to-action solution with optional brand logos displayed inline with the button. This variant offers a more compact design compared to CTA Button 3, with the logo appearing alongside the button rather than above it.

• ctabutton4: Compact CTA button with optional inline brand logo
• ctageobutton4: Geo-targeted version that automatically selects brands based on user location and product

ctabutton4

A compact CTA button component with an optional brand logo displayed inline to the right of the button.

Basic Usage (No Logo)

<nw-blocks id="ctabutton4" 
    ctakey='cta-claim-bonus' 
    ctatext="Override translation!" 
    cloakedlink="greatwin-casino" 
    target="_blank" 
    rel="nofollow" 
    trackinglinktarget="" 
    ctacolors="#05843A" 
    ctahovercolors="#096735"
    trackinglinktarget="">
</nw-blocks>

With Brand Logo

Display the brand logo inline to the right of the button for a compact branded experience.

<nw-blocks id="ctabutton4" 
    ctakey='cta-claim-bonus' 
    ctatext="Play Now" 
    cloakedlink="greatwin-casino" 
    showlogo="true"
    target="_blank" 
    rel="nofollow" 
    trackinglinktarget="" 
    ctacolors="#05843A" 
    ctahovercolors="#096735"
    trackinglinktarget="">
</nw-blocks>

With Custom Colors

Customize button colors to match your brand or design theme.

<nw-blocks id="ctabutton4" 
    ctakey='cta-claim-bonus' 
    ctatext="Join Now" 
    cloakedlink="greatwin-casino" 
    showlogo="false"
    target="_blank" 
    rel="nofollow" 
    trackinglinktarget="" 
    ctacolors="#FF6B35" 
    ctahovercolors="#E85A2B"
    trackinglinktarget="">
</nw-blocks>

Attributes Reference

ctageobutton4

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

Basic Usage

<nw-blocks id="ctageobutton4" 
    ctatext="Get now" 
    ctakey='cta-claim-bonus' 
    sellingpointtype="general" 
    product="CA" 
    language="en" 
    country="ZZ" 
    target="_blank" 
    rel="nofollow" 
    trackinglinktarget="" 
    ctacolors="#05843A" 
    ctahovercolors="#096735" 
    brandposition="1"
    trackinglinktarget="">
</nw-blocks>

With Brand Logo

Display the geo-targeted brand logo inline with the button.

<nw-blocks id="ctageobutton4" 
    ctatext="Play Now" 
    ctakey='cta-claim-bonus' 
    sellingpointtype="general" 
    product="SB" 
    language="fr" 
    country="ZZ" 
    showlogo="true"
    target="_blank" 
    rel="nofollow" 
    trackinglinktarget="" 
    ctacolors="#05843A" 
    ctahovercolors="#096735" 
    trackinglinktarget=""
    brandposition="1">
</nw-blocks>

For Different Products

Easily switch between Casino, Sports Betting, or other products with the product attribute.

<nw-blocks id="ctageobutton4" 
    ctatext="Bet Now" 
    ctakey='cta-claim-bonus' 
    sellingpointtype="general" 
    product="SB" 
    language="en" 
    country="US" 
    showlogo="true"
    target="_blank" 
    rel="nofollow" 
    trackinglinktarget="" 
    ctacolors="#1E90FF" 
    ctahovercolors="#0066CC" 
    trackinglinktarget=""
    brandposition="1">
</nw-blocks>

Attributes Reference

Key Differences from CTA Button 2

Design & Layout

• Compact Design: CTA Button 3 has a more streamlined, horizontal layout
• Inline Logo: Brand logo appears to the right of the button, not above it
• No Description Text: CTA Button 3 focuses solely on the button and logo
• Simpler Styling: Uses solid colors instead of gradients

Use Cases

• CTA Button 2: Best for featured placements with description text and larger visual impact
• CTA Button 3: Ideal for inline placements, sidebars, or when space is limited

Color Configuration

CTA Button 3 uses solid colors only (no gradients like CTA Button 2).

Single Color Format

ctacolors="#05843A"
ctahovercolors="#096735"

Colors should be specified as standard CSS color values (hex, rgb, etc.).

Key Features

1. Inline Brand Logo

• Set showlogo="true" to display the brand logo
• Logo appears to the right of the button in the same row
• Maintains compact design with 42px logo height

2. Simplified Styling

• Solid color backgrounds instead of gradients
• Clean, minimal design
• Consistent arrow icon on all buttons

3. Geo-Targeting

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

4. Space-Efficient Layout

• Horizontal button and logo arrangement
• Perfect for sidebars and narrow spaces
• Maintains brand recognition without taking vertical space

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

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

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

Common Use Cases

1. Simple Compact Button

<nw-blocks id="ctabutton4" 
    cloakedlink="your-casino" 
    ctatext="Play Now"
    trackinglinktarget=""
    ctacolors="#05843A">
</nw-blocks>

2. Branded Button with Logo

<nw-blocks id="ctabutton4" 
    cloakedlink="your-casino" 
    showlogo="true"
    ctatext="Join Today"
    trackinglinktarget=""
    ctacolors="#FF6B35">
</nw-blocks>

3. Geo-Targeted Casino Button

<nw-blocks id="ctageobutton4" 
    product="CA" 
    language="en" 
    brandposition="1"
    showlogo="true"
    trackinglinktarget=""
    ctatext="Claim Bonus">
</nw-blocks>

4. Inline Sportsbook CTA

<nw-blocks id="ctageobutton4" 
    product="SB" 
    language="fr" 
    showlogo="true"
    ctacolors="#1E90FF"
    trackinglinktarget=""
    ctahovercolors="#0066CC"
    ctatext="Parier Maintenant">
</nw-blocks>

Choosing Between CTA Versions