Menu
close
Start Free Trial
Start Free Trial

Smart Button Widget - Setup Guide

Last Updated: December 2025

What is the Smart Button Widget?

The Smart Button Widget is an inline banner that displays prominently on your website, featuring AI-powered headline rotation and A/B testing. Unlike the Sidebar Widget, the Smart Button is designed to be embedded directly in your page content, making it impossible to miss.

Key Features:

  • Inline Display: Appears as a full-width or contained banner in your page layout
  • AI-Powered Headlines: Automatic headline rotation with A/B testing
  • Transparent Mode: Optional transparent background to blend with your site design
  • Analytics Tracking: Detailed performance metrics for every headline
  • Customizable Design: Full control over colors, fonts, and styling
  • Responsive: Automatically adapts to mobile, tablet, and desktop screens

Setup Instructions

Step 1: Enable the Smart Button Widget

  1. Log into your Client Dashboard
  2. Navigate to the Settings tab
  3. Scroll to Enabled Widgets section
  4. Check the box for "Smart Button Widget"
  5. Click "Save Settings" at the bottom of the page

Step 2: Configure Basic Settings

In the Smart Button Configuration section:

  1. Background Color: Choose your primary background color
    • Use transparent mode for seamless integration
    • Or select a solid color to make button stand out
  2. Text Color: Select color for headline text (ensure good contrast)
  3. Button Color: Choose CTA button background color
  4. Button Text Color: Select color for text on the button
  5. Button Text: Customize your CTA (e.g., "Get Started", "Learn More", "Book Now")
  6. Booking URL: Enter the destination URL when button is clicked
  7. Transparent Mode: Toggle ON to use transparent background

Step 3: Configure Headlines

Navigate to the Widget Configuration tab:

  1. Create URL Groups: Define which pages show which headlines
    • Primary Page URL: Main page for this headline group (e.g., /)
    • Additional URLs: Other pages to show these headlines (one per line)
    • Excluded URLs: Pages to NOT show these headlines
  2. Add Headlines: Create 3-5 headline variations for A/B testing
    • Examples: "Limited Time: 20% Off All Services", "Free Consultation - Book Today", "Join 500+ Happy Customers"
    • Keep headlines concise and action-oriented
    • System automatically tests which performs best
  3. Click "Save Headlines"

Step 4: Install Widget Code

  1. Go to the Installation tab in your dashboard
  2. Copy the installation code snippet (includes your unique client ID)
  3. Paste into your website's <head> section or before </body> tag
  4. Save/publish your website

Note: The Smart Button will appear automatically on pages where it's enabled. You don't need to manually place it - the widget system handles positioning.

Step 5: Test the Widget

  1. Visit your website in an incognito/private browser window
  2. Verify the Smart Button appears on the correct pages
  3. Check that colors and styling match your configuration
  4. Click the button to ensure it navigates to the correct URL
  5. Test on mobile devices to verify responsive behavior
  6. Refresh multiple times to see different headlines rotate

Platform-Specific Installation

WordPress

Use a plugin like "Insert Headers and Footers" or add to your theme's header.php or footer.php file.

Wix

Dashboard → Settings → Custom Code → Add code to "Body - End" section.

Squarespace

Settings → Advanced → Code Injection → Footer section.

Shopify

Online Store → Themes → Edit Code → theme.liquid file before </body>.

Custom HTML Sites

Paste in the global header or footer template so it appears on all pages.

Design Customization

Transparent Mode vs. Solid Background

Transparent Mode (Recommended for seamless integration):

  • Widget background is invisible
  • Headline and button appear to float on your page
  • Blends naturally with any website design
  • Best for minimalist or modern sites

Solid Background:

  • Widget has a colored background box
  • Creates clear visual separation from page content
  • Draws more attention to the CTA
  • Best for high-contrast, attention-grabbing placements

To toggle: Settings tab → Smart Button Configuration → "Transparent Mode" checkbox

Color Best Practices

  1. High Contrast: Ensure text is easily readable against background
  2. Brand Consistency: Match your website's color scheme
  3. Button Visibility: Button color should stand out from background
  4. Mobile Testing: Colors may appear different on mobile screens

Example combinations:

  • Transparent background + Dark blue text + Orange button
  • White background + Black text + Green button
  • Navy background + White text + Yellow button

Headline Guidelines

Effective headlines are:

  • Concise: 30-60 characters ideal
  • Action-oriented: Use verbs (Get, Book, Save, Join, Start)
  • Value-focused: Highlight benefits or offers
  • Urgent: Create FOMO with limited time offers

Examples:

  • "Book Your Free Consultation Today"
  • "Save 25% on Your First Order"
  • "Join 1,000+ Satisfied Customers"
  • "Limited Spots Available - Register Now"
  • "Get Your Custom Quote in 24 Hours"

Common Issues & Solutions

Smart Button doesn't appear

Troubleshooting checklist:

  1. Smart Button is enabled in Settings → Enabled Widgets
  2. Installation code is correctly pasted in website
  3. Subscription is active (not expired or suspended)
  4. At least one headline is configured for current page/URL
  5. Browser cache is cleared (test in incognito mode)
  6. No JavaScript errors in browser console (press F12)

Button appears in wrong location

Explanation: The Smart Button widget automatically positions itself based on your website's layout. The default positioning is controlled by the widget code and may vary by theme/platform.

Solutions:

  • The widget inserts itself into the page DOM automatically
  • If placement needs adjustment, you may need custom CSS
  • Contact support for help with custom positioning

Headlines not rotating

How rotation works: Headlines use A/B testing and rotate per visitor session, not per page load. Each visitor sees a consistent headline during their session, but different visitors see different headlines.

To test rotation:

  1. Open incognito browser window
  2. Note the headline displayed
  3. Close incognito window
  4. Open a new incognito window
  5. You should see a different headline (or same if it's winning)

Note: The system shows the best-performing headline 80% of the time (exploitation) and tests alternatives 20% of the time (exploration).

Colors don't look right on mobile

Solutions:

  • Test color combinations on actual mobile devices
  • Ensure sufficient contrast between text and background
  • Check that button is large enough to tap easily (minimum 44x44 pixels)
  • Review transparent mode setting - may need solid background on mobile

Button click doesn't navigate to URL

Check these items:

  1. Booking URL is complete and valid (include https://)
  2. URL doesn't have typos or extra characters
  3. Destination page exists and is accessible
  4. Browser isn't blocking popups (if URL opens new window)
  5. Test on different browsers and devices

Debug steps:

  • Right-click the button and "Inspect Element"
  • Verify the href attribute matches your configured URL
  • Check browser console for JavaScript errors

Widget conflicts with site design

Solutions:

  • Enable Transparent Mode for better blending
  • Adjust colors to match your site's color scheme
  • Review placement on mobile - may need responsive adjustments
  • Consider using custom CSS to fine-tune appearance
  • Contact support for assistance with complex layouts

Analytics & Performance

Viewing Smart Button Analytics

  1. Go to Analytics tab in your dashboard
  2. Select "Smart Button Widget" from the widget filter
  3. Review these metrics:
    • Impressions: Number of times widget was displayed
    • Conversions: Number of times button was clicked
    • Conversion Rate: Click-through percentage
    • Winner Badge: Best-performing headline

Interpreting Results

Good conversion rates:

  • 3-5%: Typical baseline for most websites
  • 5-10%: Strong performance, headlines resonate with audience
  • 10%+: Excellent performance, compelling offers and messaging

If conversion rate is low (<2%):

  • Test more compelling headlines
  • Ensure button text is action-oriented
  • Verify booking URL leads to relevant destination
  • Check if widget is visible (not hidden by page content)
  • Review color contrast and button visibility

Optimization Tips

Headline testing:

  • Run tests for at least 7-14 days before drawing conclusions
  • Create diverse headline variations (different angles/benefits)
  • Monitor which headlines get the winner badge
  • Use Auto-Evolve (Pro/Premium/Expert plans) for automatic optimization

Button optimization:

  • Test different CTAs: "Book Now" vs. "Get Started" vs. "Learn More"
  • Ensure destination page matches expectation set by headline
  • Verify booking process is simple and mobile-friendly
  • Track conversions beyond the click (bookings, purchases, etc.)

Advanced Features

Auto-Evolve Headlines (Pro, Premium & Expert Plans)

The Auto-Evolve feature uses AI to automatically refresh underperforming headlines:

How it works:

  1. System analyzes headline performance over time
  2. Identifies headlines with low conversion rates
  3. AI generates new alternatives based on successful patterns
  4. New headlines automatically enter A/B testing rotation
  5. Process repeats on schedule:
    • Pro Plan: Every 30 days
    • Premium Plan: Every 14 days
    • Expert Plan: Every 14 days

Benefits:

  • Keeps messaging fresh and relevant
  • Automatically improves conversion rates over time
  • No manual work required
  • Learns from your specific audience behavior

To enable:

  1. Navigate to Widget Configuration tab
  2. Toggle "Auto-Evolve Headlines" ON
  3. Save changes
  4. System runs automatically in background

Multi-URL Group Targeting

Create sophisticated headline targeting across your website:

Example strategy:

Group 1 - Homepage:

  • Primary URL: /
  • Headlines: General value propositions, brand messaging
  • "Join 500+ Happy Customers - Get Started Today"

Group 2 - Service Pages:

  • Primary URL: /services
  • Additional URLs: /services/landscaping, /services/design
  • Headlines: Service-specific offers
  • "Professional Landscaping - Book Free Consultation"

Group 3 - Blog/Content:

  • Primary URL: /blog
  • Excluded URLs: /blog/category/news
  • Headlines: Educational CTAs, lead magnets
  • "Download Our Free Guide - 10 Landscaping Tips"

Group 4 - Pricing Page:

  • Primary URL: /pricing
  • Headlines: Urgency, limited-time offers
  • "Save 20% Today Only - Limited Spots Available"

A/B Testing Strategy

The widget uses epsilon-greedy algorithm:

  • 80% Exploitation: Shows the current best-performing headline
  • 20% Exploration: Tests alternative headlines

Why this matters:

  • Ensures most visitors see the best headline (maximizes conversions)
  • Still tests alternatives to discover even better options
  • Adapts over time as audience preferences change
  • Balances learning with earning

Best practices:

  • Create at least 3-5 headline variations per URL group
  • Let tests run for minimum 100 impressions before evaluating
  • Don't manually interfere with rotation - let the algorithm work
  • Export analytics monthly to track trends (Pro/Premium/Expert plans)

Branding Disclosure

Branding visibility by plan:

  • Starter Plan & Trial Accounts: Small branding link appears on widget
  • Pro Plan ($49/month): No branding displayed (white-label)
  • Premium Plan ($79/month): No branding displayed (white-label)
  • Expert Plan ($99/month): No branding displayed (white-label)
  • Complimentary Accounts: No branding (unless configured as Marketing Account by admin)

To remove branding: Upgrade to Pro plan or higher from Billing tab.

Integration Tips

Works great with:

  • Landing pages: High-converting standalone pages
  • Homepage: Welcome messaging and primary CTAs
  • Service pages: Feature-specific offers and consultations
  • Blog posts: Content upgrades and lead magnets
  • Product pages: Special offers and discounts

May conflict with:

  • Sites with very minimal design (widget might feel intrusive)
  • Pages with existing prominent banners (too many CTAs)
  • Very narrow mobile layouts (test thoroughly)

Pro tip: Use URL exclusions to hide Smart Button on pages where it doesn't fit naturally.

Need Help?

Support Response Times:

  • Starter Plan: 48 hours
  • Pro Plan: 24 hours (priority support)
  • Premium Plan: 12 hours (premium support)
  • Expert Plan: 12 hours (premium support)

How to get help:

  1. Contact support from your Client Dashboard
  2. Include:
    • Website URL
    • Client ID (from Account tab)
    • Description of issue
    • Screenshots showing the problem
    • Browser and device information

Self-help resources:

  • FAQ document
  • General Troubleshooting Guide
  • Dashboard tooltips (hover over "?" icons)
  • Preview feature in dashboard (test before going live)

Ready to boost conversions? Follow the setup steps above and your Smart Button Widget will be live in minutes!

© 2026 -  Crave Media LLC. All rights reserved.
Privacy PolicyTerms of Service