Smart Coupons Widget - Setup Guide

Last Updated: December 2025

What is the Smart Coupons Widget?

The Smart Coupons Widget displays promotional offers on your website with sophisticated A/B testing and three elegant design styles. It's the most feature-rich widget in the platform, designed to maximize conversions through compelling offers and intelligent optimization.

Key Features:

• 3 Concurrent Offers: Run up to 3 different promotions simultaneously (plan-dependent)
• 3 Design Styles: Dashed (classic), Ticket (modern), Badge (elegant)
• Per-Offer Style Rotation: Each offer can use different design styles
• URL Targeting: Show specific offers on specific pages
• Rolling Expirations: 7-day or 14-day countdown timers
• VIP Badge & Ribbon: Add urgency with decorative elements
• Multi-Variable A/B Testing: Tests styles, colors, button text, and headlines
• Session Consistency: Visitors see the same design during their session
• Comprehensive Analytics: Track performance by offer, style, color, and button text

Setup Instructions

Step 1: Enable the Smart Coupons 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 Coupons Widget"
5. Click "Save Settings" at the bottom of the page

Step 2: Configure Global Settings

In the Smart Coupons Configuration section, set your global preferences:

Background Colors (up to 5):

• Add 3-5 background color variations for A/B testing
• System rotates between colors to find best performer
• Examples: Red (#FF0000), Blue (#0066CC), Green (#00AA00)
• Plan limits:
  • Starter: 3 colors
  • Pro: 5 colors
  • Premium: 5 colors
  • Expert: 5 colors

Button Text Variations (up to 5):

• Add 3-5 different call-to-action phrases
• System tests which CTA drives most clicks
• Examples: "Claim Offer", "Get Discount", "Save Now", "Redeem Code", "Shop Now"
• Keep button text short (1-3 words ideal)
• Plan limits: Same as background colors (Starter: 3, Pro/Premium/Expert: 5)

Rotating Headlines (Optional):

• Enable to show AI-generated headlines above coupon
• Choose headline text color
• Headlines rotate and A/B test automatically
• Can disable if you prefer clean coupon-only display

VIP Badge (Optional):

• Select badge text from dropdown (VIP ONLY, EXCLUSIVE, LIMITED, etc.)
• Badge appears in top-left corner of coupon
• Adds exclusivity and urgency
• Can be left as "None" to disable

Ribbon (Optional):

• Select ribbon text from dropdown (SAVE BIG, BEST DEAL, NEW OFFER, etc.)
• Ribbon appears diagonally across top-right corner
• Creates visual interest and urgency
• Can be left as "None" to disable

Step 3: Configure Individual Offers

You can create multiple offers based on your plan:

• Starter Plan: 1 offer
• Pro Plan: 2 offers
• Premium Plan: 3 offers
• Expert Plan: 3 offers

Offer Tab Navigation:

• Click tabs labeled "Offer 1", "Offer 2", "Offer 3"
• Configure each offer independently
• Each offer can have its own targeting, styles, and content

Offer Content:

1. Headline: Eye-catching text for the offer
   • Example: "First-Time Customer Special!"
   • Keep under 50 characters for best display
   • This is the main headline ON the coupon itself
2. Discount Type: Choose "Percentage" or "Dollar Amount"
   • Percentage: Shows as "20% OFF"
   • Dollar: Shows as "$50 OFF"
3. Discount Value: The actual discount
   • For percentage: Enter number without % symbol (e.g., "20")
   • For dollar: Enter number without $ symbol (e.g., "50")
   • Displays prominently in center of coupon
4. Disclaimer: Fine print or terms
   • Example: "Valid on first purchase only. Cannot be combined with other offers."
   • Appears at bottom of coupon in small text
   • Optional but recommended for clarity

Design Styles for This Offer:

Select which design styles this offer will rotate between:

• Dashed: Classic coupon with dashed border (traditional feel)
• Ticket: Modern ticket design with perforated edge
• Badge: Elegant circular badge design

Check one, two, or all three boxes. The system will rotate between selected styles.

URL Targeting:

5. Use URL Targeting: Enable to show this offer on specific pages only
   • When disabled: Offer can appear on any page
   • When enabled: Offer only appears on specified URLs
6. Primary Page URL: Main page where offer appears
   • Example: /services/landscaping
   • Can be full URL or path
7. Additional URLs: Other pages to show this offer
   • Enter one URL per line
   • Example: /services/lawn-care, /services/garden-design, /about/landscaping-team
8. Excluded URLs: Pages to NOT show this offer
   • Enter one URL per line
   • Useful for excluding specific sections
   • Example: /blog, /contact

Expiration Settings:

9. Expiration Mode: Choose rolling expiration
   • 7 Days: Expires 7 days from visitor's first impression
   • 14 Days: Expires 14 days from visitor's first impression
   • Countdown updates in real-time
10. Expiration Display Position:
    • Below Disclaimer: Traditional placement at bottom
    • Above Disclaimer: More prominent for urgency

Step 4: Preview Your Coupons

Before going live:

1. Use the Preview Carousel in your dashboard
2. Click arrows to cycle through different design styles
3. Verify colors, text, and layout look correct
4. Check mobile preview if available
5. Make adjustments as needed

What you'll see in preview:

• Current offer's headline and discount
• Selected design styles rotating
• Background colors
• VIP badge and ribbon (if enabled)
• Expiration countdown (simulated)

Step 5: Install Widget Code

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

Note: Same installation code works for all widgets. If already installed for other widgets, no additional installation needed.

Step 6: Test on Your Website

1. Visit your website in an incognito browser window
2. Navigate to pages where coupons should appear
3. Verify correct offer shows based on URL targeting
4. Check that design style looks correct
5. Click the button to ensure it works
6. Test on mobile devices
7. Refresh multiple times to see style/color rotation

Testing rotation:

• Close incognito window
• Open new incognito window
• You may see different style or color (or same if it's winning)
• This is the A/B testing in action

Understanding the Three Design Styles

Dashed Style (Classic Coupon)

Visual: Traditional coupon with dashed border

Best for:

• Retail promotions
• Percentage discounts
• Familiar, trusted feel
• Broad audiences

Design details:

• Dashed border around entire coupon
• Large, bold discount text (75px)
• Prominent headline (30px)
• Classic coupon aesthetic

When to use: General promotions, traditional businesses, familiar offer types

Ticket Style (Modern Event)

Visual: Ticket design with perforated edge effect

Best for:

• Event tickets or registrations
• Service bookings
• Modern, creative brands
• Time-sensitive offers

Design details:

• Decorative perforated edge on left side
• Uppercase headline with letter-spacing
• Modern, clean aesthetic
• Ticket stub feel

When to use: Event promotions, experiences, services, modern brands

Badge Style (Premium Circular)

Visual: Elegant circular badge design

Best for:

• Premium offers
• Exclusive deals
• High-end brands
• Award-style presentation

Design details:

• Circular badge layout
• Curved text for headline and disclaimer
• Centered discount
• Elegant, sophisticated feel

When to use: Premium services, exclusive offers, luxury brands, VIP deals

A/B Testing & Optimization

What Gets Tested?

The Smart Coupons Widget tests multiple variables simultaneously:

1. Design Styles: Dashed vs. Ticket vs. Badge
2. Background Colors: Up to 5 color variations
3. Button Text: Up to 5 CTA variations
4. Headlines: AI-generated rotating headlines (if enabled)

How it works:

• Each visitor gets a random combination
• Combination stays consistent during their session
• Analytics track impressions and clicks for each variation
• System identifies winning combinations over time

The Epsilon-Greedy Algorithm

80% Exploitation (Winner):

• Shows the current best-performing combination
• Maximizes conversions with proven winners

20% Exploration (Testing):

• Tests alternative combinations
• Discovers new winning variations
• Prevents getting stuck in local maxima

Why this matters:

• Most visitors see the best offer (maximizes revenue)
• Still tests alternatives (finds even better options)
• Automatically adapts to changing audience preferences
• Balances learning with earning

Best Practices for A/B Testing

Give it time:

• Run tests for at least 7-14 days
• Need minimum 100 impressions per variation
• Don't make changes too frequently
• Let the algorithm work

Create variety:

• Use contrasting colors (red, blue, green, orange, purple)
• Test different button CTAs (action verbs vs. benefits)
• Try multiple design styles per offer
• Vary headlines significantly

Monitor analytics:

• Check Analytics tab weekly
• Look for clear winners (marked with badge)
• Export data monthly (Pro/Premium/Expert plans)
• Track conversion rates over time

Don't interfere:

• Avoid manually rotating styles
• Let algorithm choose what to show
• Trust the data over intuition
• Make changes based on analytics, not guesses

URL Targeting Strategies

Single Offer, Site-Wide

Use case: One promotion for entire website

Configuration:

• Offer 1: Enabled, URL targeting OFF
• Offers 2-3: Disabled
• All visitors see same offer regardless of page

Example: "Grand Opening - 20% Off Everything"

Multiple Offers, Different Pages

Use case: Different promotions for different services

Configuration:

• Offer 1: Landscaping pages only
  • Primary: /services/landscaping
  • Additional: /portfolio/landscaping, /blog/landscaping-tips
• Offer 2: Design services only
  • Primary: /services/design
  • Additional: /portfolio/design, /design-consultation
• Offer 3: Homepage only
  • Primary: /
  • Excluded: /blog, /services

Benefits:

• Highly relevant offers per page
• Better conversion rates
• Professional, targeted experience

Seasonal/Rotating Campaigns

Use case: Run different promotions throughout year

Configuration:

• Q1: New Year special (Offer 1 enabled)
• Q2: Spring sale (Switch to Offer 2)
• Q3: Summer promotion (Switch to Offer 3)
• Q4: Holiday deals (Back to Offer 1, updated content)

Process:

1. Configure all 3 offers with different campaigns
2. Enable/disable as needed throughout year
3. Update content when reusing offer slots
4. Monitor analytics to compare campaign performance

A/B Test Different Offers

Use case: Test which promotion converts better

Configuration:

• Offer 1: "20% Off First Purchase"
• Offer 2: "$50 Off Orders Over $200"
• Offer 3: "Buy One Get One 50% Off"
• All three: Same URL targeting (site-wide or specific pages)

Analysis:

• Let run for 2-4 weeks
• Compare conversion rates in analytics
• Winner becomes permanent, losers get replaced with new tests

Common Issues & Solutions

Coupon doesn't appear on website

Troubleshooting checklist:

1. Smart Coupons Widget is enabled in Settings → Enabled Widgets
2. At least one offer is fully configured
3. URL targeting allows offer on current page
4. Installation code is correctly pasted
5. Subscription is active
6. Browser cache is cleared (test in incognito)

Debug steps:

• Open browser console (F12)
• Look for JavaScript errors
• Verify widget-gateway.js loads from CDN
• Check that enabled_widgets array includes 'smart_coupons'

Wrong offer showing on page

Check URL targeting:

1. Review offer's Primary Page URL
2. Check Additional URLs list
3. Verify Excluded URLs don't include current page
4. Confirm "Use URL Targeting" is enabled/disabled correctly

URL matching:

• System checks exact path matches first
• Then checks if current URL contains any additional URLs
• Finally checks excluded URLs (if match, offer won't show)
• If multiple offers match, system picks randomly (weighted by performance)

Design looks different than preview

Common causes:

1. Font inheritance: Your website's CSS may override widget fonts
2. Container width: Coupon adapts to container size
3. Mobile vs. Desktop: Responsive design changes on small screens
4. Browser differences: Some browsers render slightly differently

Solutions:

• Widget uses explicit font families to avoid inheritance
• Test on actual device sizes (mobile, tablet, desktop)
• Check that no custom CSS is conflicting
• Contact support if persistent issues

Colors look wrong or washed out

Possible issues:

1. Color codes entered incorrectly (missing # symbol)
2. Website CSS overriding widget styles
3. Transparent overlays affecting color appearance
4. Monitor color calibration

Solutions:

• Verify hex codes include # (e.g., #FF0000 not FF0000)
• Test on multiple devices/browsers
• Use color picker to get exact codes
• Ensure widget CSS has proper specificity

Expiration countdown not working

Check these settings:

1. Expiration Mode is set to "7 Days" or "14 Days"
2. JavaScript is enabled in browser
3. No errors in browser console
4. Widget code is up to date

How countdown works:

• First impression timestamp stored in browser localStorage
• Countdown calculated from that timestamp
• Resets if localStorage cleared
• Each visitor has their own countdown

Button click doesn't work

Troubleshooting:

1. Verify button URL is complete and valid (include https://)
2. Check for JavaScript errors in console
3. Test on different browsers
4. Ensure destination page is accessible
5. Try different button text (sometimes caching issues)

Debug steps:

• Right-click button → Inspect Element
• Verify href attribute is correct
• Check for click event listeners
• Test with simple URL (like https://google.com) to isolate issue

VIP Badge or Ribbon not showing

Possible causes:

1. Badge/Ribbon set to "None" in global settings
2. CSS conflicts with website styles
3. Z-index issues (badge behind other elements)
4. Design style doesn't support badges (verify with preview)

Solutions:

• Confirm badge/ribbon text is selected (not "None")
• Check preview in dashboard - should show there
• Inspect element to verify badge HTML is present
• Contact support if present in HTML but not visible

Performance issues (slow loading)

Optimization tips:

1. Limit to 3-5 background colors (not 10+)
2. Use web-safe colors (load faster)
3. Keep button text variations to 3-5
4. Disable rotating headlines if not needed
5. Ensure CDN is loading correctly (not blocked by firewall)

Check these:

• Widget loads from CDN (fast global delivery)
• No errors preventing script execution
• Website itself isn't slow (widget is lightweight)
• Test on fast connection to isolate issue

Analytics & Performance Tracking

Accessing Smart Coupon Analytics

1. Navigate to Analytics tab in dashboard
2. Select "Smart Coupons Widget" from filter
3. View metrics by:
   • Offer: Performance of each individual offer
   • Design Style: Dashed vs. Ticket vs. Badge
   • Background Color: Which colors convert best
   • Button Text: Which CTAs drive most clicks

Key Metrics to Monitor

Impressions:

• Number of times coupon was displayed
• Broken down by offer, style, color, button text
• Higher impressions = more visibility

Conversions (Clicks):

• Number of times coupon button was clicked
• Indicates interest and engagement
• Directly correlates to potential revenue

Conversion Rate:

• Clicks ÷ Impressions × 100
• Most important metric for optimization
• Typical range: 2-8% depending on industry

Winner Badges:

• System automatically identifies best performers
• Marked with trophy/badge icon
• Focus on replicating winning elements

Understanding the Data

If Offer 1 has high conversions:

• This promotion resonates with audience
• Consider extending duration
• Use similar messaging for future offers
• Analyze what makes it successful (discount amount, wording, etc.)

If Dashed style outperforms Badge:

• Audience prefers traditional coupon aesthetic
• Focus on Dashed style for future campaigns
• May indicate audience demographic (older, traditional)
• Don't disable other styles completely (keep testing)

If red background has highest conversion rate:

• Red creates urgency and catches attention
• Use red for time-sensitive offers
• Test variations of red (bright vs. dark)
• Consider psychology of color in your industry

If "Save Now" outperforms "Get Discount":

• Action-oriented CTAs work better
• Test similar variations ("Claim Now", "Shop Now")
• Short, punchy CTAs preferred
• Consider adding urgency to other CTAs

Optimization Strategies

Weekly review:

• Check which combinations are winning
• Note patterns (certain styles + colors + buttons)
• Look for clear losers (remove or replace)
• Identify opportunities for new tests

Monthly deep dive:

• Export analytics data (Pro/Premium/Expert plans)
• Compare month-over-month performance
• Analyze seasonal trends
• Plan next month's offers based on data

Quarterly strategy:

• Review all-time best performers
• Create playbook of winning combinations
• Retire consistently poor performers
• Test bold new approaches based on confidence in current winners

Continuous improvement cycle:

1. Launch initial offers with variety
2. Let run for 2 weeks minimum
3. Identify clear winners and losers
4. Replace losers with new variations
5. Keep winners but continue testing
6. Repeat cycle

Advanced Techniques

Seasonal Coordination

Align offers with seasons/holidays:

Winter (Dec-Feb):

• Holiday sales, New Year specials
• Colors: Red, green, gold, blue
• Offers: Gift packages, winter services

Spring (Mar-May):

• Spring cleaning, renewal themes
• Colors: Green, yellow, light blue
• Offers: Refresh services, new beginnings

Summer (Jun-Aug):

• Summer sales, vacation specials
• Colors: Orange, yellow, bright blue
• Offers: Outdoor services, adventure packages

Fall (Sep-Nov):

• Back-to-school, harvest themes
• Colors: Orange, brown, red
• Offers: Preparation services, maintenance packages

Multi-Site Strategy (Premium & Expert Plans)

For multiple websites:

1. Configure different offers per site
2. Tailor to each site's audience
3. Compare performance across sites
4. Apply learnings from best-performing site to others

Example:

• Site 1 (Budget audience): "$50 Off" performs best
• Site 2 (Premium audience): "20% Off" performs best
• Site 3 (Local service): "Free Consultation" performs best

Integration with Marketing Campaigns

Coordinate coupons with:

• Email campaigns (same offer in email and on-site)
• Social media ads (match messaging and design)
• Paid search (align landing page offers with ad copy)
• Print advertising (QR codes to specific coupon URLs)

Benefits:

• Consistent messaging across channels
• Better conversion attribution
• Professional, coordinated brand experience
• Track which channel drives most engagement

Psychological Triggers

Use proven conversion tactics:

Urgency:

• Rolling expirations create countdown
• "Limited Time" in headlines
• Ribbon: "ENDS SOON", "LAST CHANCE"

Scarcity:

• "Limited Spots", "While Supplies Last"
• VIP Badge: "EXCLUSIVE", "VIP ONLY"
• Create perception of limited availability

Social Proof:

• Headlines: "Join 500+ Happy Customers"
• Disclaimers: "Trusted by 1,000+ clients"
• Leverage existing customer base

Authority:

• "Award-Winning Service"
• "Certified Professionals"
• "20 Years in Business"

Value:

• Emphasize savings amount
• Dollar amounts feel more concrete than percentages
• "Save $500" vs "Save 20%"

Compliance & Best Practices

Legal Considerations

Ensure your offers comply with:

1. Truth in Advertising: Discount must be genuine
2. Terms & Conditions: Clearly state restrictions in disclaimer
3. Expiration Dates: Honor the countdown expiration
4. Geographic Restrictions: Specify if offer is location-specific
5. Product/Service Availability: Don't advertise unavailable items

Disclaimer best practices:

• Be specific about restrictions
• State exclusions clearly
• Mention expiration/validity period
• Include "Cannot be combined with other offers" if applicable
• Add "While supplies last" for limited inventory

Ethical Marketing

Don't:

• Create fake urgency (if offer repeats weekly, don't say "One Time Only")
• Inflate original prices to make discount seem larger
• Hide important restrictions in tiny text
• Use misleading headlines that don't match actual offer

Do:

• Honor all advertised discounts
• Be transparent about terms
• Make disclaimers readable (12px minimum)
• Ensure booking URL leads to relevant page
• Respond to questions about offer details

Accessibility

Consider visitors with disabilities:

• Use sufficient color contrast (4.5:1 minimum ratio)
• Don't rely solely on color to convey information
• Keep text readable (minimum 12px font size)
• Ensure button is keyboard-accessible
• Test with screen readers if possible

Widget is designed for accessibility:

• Semantic HTML structure
• ARIA labels on interactive elements
• Keyboard navigation support
• High contrast text options

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)

Before Contacting Support:

1. Review this guide thoroughly
2. Check FAQ document
3. Test in incognito mode (clears cache)
4. Check browser console for errors (F12)
5. Verify settings in dashboard

When Contacting Support Include:

• Website URL where coupon should appear
• Client ID (from Account tab)
• Screenshot of issue
• Screenshot of relevant dashboard settings
• Browser and device information
• Description of expected vs. actual behavior

Common support requests:

• Custom CSS for specific design needs
• Integration with specific e-commerce platforms
• Bulk analytics exports
• Custom expiration schedules
• Multi-language support

Checklist: Go-Live Readiness

Before launching your Smart Coupons Widget, verify:

• ☐ Widget enabled in Settings → Enabled Widgets
• ☐ At least one offer fully configured (headline, discount, disclaimer)
• ☐ Design styles selected for each offer
• ☐ 3-5 background colors configured
• ☐ 3-5 button text variations configured
• ☐ URL targeting configured correctly (if using)
• ☐ Expiration settings make sense for your business
• ☐ VIP badge/ribbon configured (or intentionally disabled)
• ☐ Preview looks correct in dashboard
• ☐ Installation code pasted on website
• ☐ Tested in incognito mode on your website
• ☐ Tested on mobile device
• ☐ Button click navigates to correct destination
• ☐ Analytics are tracking (check after a few test clicks)
• ☐ Legal disclaimers are accurate and complete
• ☐ Team/staff aware of promotion terms

Ready to boost conversions with Smart Coupons? Follow this guide and you'll have a high-converting coupon campaign live in under 30 minutes!