CTA Button 3 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 3 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 2, with the logo appearing alongside the button rather than above it.

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

ctaButton3

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="ctabutton3" 
    ctakey='cta-claim-bonus' 
    ctatext="Override translation!" 
    cloakedlink="greatwin-casino" 
    target="_blank" 
    rel="nofollow" 
    ctacolors="#05843A" 
    ctahovercolors="#096735" >
</nw-blocks>

With Brand Logo

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

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

With Custom Colors

Customize button colors to match your brand or design theme.

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

Attributes Reference

ctaGeoButton3

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

Basic Usage

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

With Brand Logo

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

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

For Different Products

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

<nw-blocks id="ctageobutton3" 
    ctatext="Bet Now" 
    ctakey='cta-claim-bonus' 
    sellingpointtype="general" 
    product="SB" 
    language="en" 
    country="US" 
    showlogo="true"
    target="_blank" 
    rel="nofollow"
    trackinglinktarget="homepage" 
    ctacolors="#1E90FF" 
    ctahovercolors="#0066CC" 
    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="ctabutton3" cloakedlink="greatwin-casino" showlogo="true" >
</nw-blocks>

<!-- Old way (still supported) -->
<bw-widget id="ctabutton3" cloakedlink="greatwin-casino" 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="ctabutton3" 
    cloakedlink="your-casino" 
    ctatext="Play Now"
    ctacolors="#05843A" >
</nw-blocks>

2. Branded Button with Logo

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

3. Geo-Targeted Casino Button

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

4. Inline Sportsbook CTA

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

Choosing Between CTA Versions