Skip to main content

Configure Embedded Widget for Incentive Statistics

Overview​

The Incentive Request Program Statistics Widget is a powerful tool that allows you to display real-time social proof on your website. This widget shows how many customers have earned incentives through your program, complete with customer avatars and attractive animations.

What the Widget Shows​

  • Customer Avatars: Up to 5 recent customer profile pictures with hover tooltips showing usernames
  • Customer Count: Total number of customers who have participated in your incentive program
  • Incentive Count: Total number of incentives earned through your program
  • Interactive Link: Clicking the widget redirects visitors to your incentive request program page

Widget Features​

  • ✨ Animated Design: Floating avatars with smooth hover effects
  • 📱 Responsive: Works on desktop and mobile devices
  • 🎨 Professional Styling: Modern gradient effects and smooth transitions
  • ⚡ Fast Loading: Lightweight with loading states
  • 🔗 Clickable: Direct link to your program page
  • 🛡️ Error Handling: Graceful fallback when data is unavailable

Widget Example​

Here's what the embedded statistics widget looks like when active on your website:

Incentive Request Program Statistics Widget Example

What you see in the example:

  • Customer Avatars: Real customer profile pictures displayed in an attractive floating layout
  • Participation Stats: Shows "X customers earned incentives" with the actual count
  • Total Incentives: Displays the total number of incentives distributed through your program
  • Professional Design: Clean, modern styling with gradient effects that complement any website design
  • Hover Effects: Customer avatars include hover tooltips showing usernames for enhanced interactivity

This widget serves as powerful social proof, showing potential customers that others have successfully participated in your incentive program, which can significantly boost conversion rates and customer trust.

Getting Started​

Prerequisites​

Before embedding the widget, ensure you have:

  1. Active Incentive Request Program: Your program must be created and published
  2. Program ID: You'll need your unique incentive request program identifier
  3. Website Access:

Step 1: Find Your Program ID​

  1. Navigate to your Business Dashboard
  2. Go to Incentive Request Programs
  3. Select the program you want to embed
  4. Copy the Program ID from the URL or program details

Example Program ID: 2x1dop57S1GxkzoMRx4wj3B9qiR

Step 2: Basic Embed Code​

Add this HTML code to your website where you want the widget to appear:

<iframe 
  src="https://incentise.com/embed-widget.html?incentive_request_program_id=YOUR_INCENTIVE_REQUEST_PROGRAM_ID&total_show_customer_image_avatar=10" 
  width="320" 
  height="120" 
  frameborder="0" 
  style="border-radius: 8px;">
</iframe>

Replace YOUR_INCENTIVE_REQUEST_PROGRAM_ID with your actual program ID.

Step 3: Advanced Configuration​

Full Configuration Example​

<iframe 
  src="https://incentise.com/embed-widget.html?incentive_request_program_id=2x1dop57S1GxkzoMRx4wj3B9qiR&total_show_customer_image_avatar=10" 
  width="320" 
  height="120" 
  frameborder="0" 
  style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
</iframe>

Available Parameters​

ParameterDefaultDescription
incentive_request_program_idRequiredYour unique program identifier
total_show_customer_image_avatar10Number of customer avatars to fetch for display

Step 4: Custom HTML Websites​

Simply paste the embed code into your HTML file where you want the widget to appear:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Store</h1>
    
    <!-- Incentive Widget -->
    <iframe 
      src="https://incentise.com/embed-widget.html?incentive_request_program_id=YOUR_INCENTIVE_REQUEST_PROGRAM_ID&total_show_customer_image_avatar=10" 
      width="320" 
      height="120" 
      frameborder="0" 
      style="border-radius: 8px;">
    </iframe>
    
    <p>More content here...</p>
</body>
</html>

Customization Options​

Styling the Container​

You can style the iframe container to match your website's design:

<div style="text-align: center; margin: 20px 0;">
    <iframe 
      src="https://incentise.com/embed-widget.html?incentive_request_program_id=YOUR_INCENTIVE_REQUEST_PROGRAM_ID&total_show_customer_image_avatar=10" 
      width="320" 
      height="120" 
      frameborder="0" 
      style="border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15);">
    </iframe>
</div>

Responsive Design​

For mobile-friendly widgets, use responsive CSS:

<div style="width: 100%; max-width: 320px; margin: 0 auto;">
    <iframe 
      src="https://incentise.com/embed-widget.html?incentive_request_program_id=YOUR_INCENTIVE_REQUEST_PROGRAM_ID&total_show_customer_image_avatar=10" 
      width="100%" 
      height="120" 
      frameborder="0" 
      style="border-radius: 8px; min-width: 300px;">
    </iframe>
</div>

Multiple Widgets​

You can embed multiple widgets for different programs:

<!-- Widget for Program A -->
<iframe src="https://incentise.com/embed-widget.html?incentive_request_program_id=PROGRAM_A_ID&total_show_customer_image_avatar=10" width="320" height="120" frameborder="0" style="border-radius: 8px; margin: 10px;"></iframe>

<!-- Widget for Program B -->
<iframe src="https://incentise.com/embed-widget.html?incentive_request_program_id=PROGRAM_B_ID&total_show_customer_image_avatar=10" width="320" height="120" frameborder="0" style="border-radius: 8px; margin: 10px;"></iframe>

Best Practices​

Placement Recommendations​

  1. Product Pages: Near the "Add to Cart" button
  2. Landing Pages: In the hero section or testimonials area
  3. Homepage: In the featured products section
  4. Checkout Pages: To build trust during purchase process

Performance Optimization​

  • Lazy Loading: Consider implementing lazy loading for widgets below the fold
  • Caching: The widget caches data automatically for optimal performance
  • Size Limits: Don't make the widget too small (minimum 300px width recommended, standard size is 320px × 120px)

SEO Considerations​

  • The widget content is loaded dynamically and may not be indexed by search engines
  • Consider adding static testimonials or reviews for SEO purposes
  • Use the widget as a complement to, not replacement for, other trust signals

Troubleshooting​

Widget Not Loading​

Symptoms: Blank iframe or loading spinner that doesn't disappear

Solutions:

  1. Verify your Program ID is correct
  2. Check that your program is published and active
  3. Check browser console for JavaScript errors

No Customer Data Showing​

Symptoms: Widget loads but shows "Widget temporarily unavailable"

Solutions:

  1. Confirm customers have participated in your program
  2. Check program settings and permissions
  3. Verify the program is receiving incentive requests
  4. Contact support if the issue persists

Styling Issues​

Symptoms: Widget doesn't match your website design

Solutions:

  1. Adjust iframe dimensions (width and height)
  2. Add custom CSS to the container element
  3. Use border-radius and box-shadow for better integration
  4. Ensure responsive design on mobile devices

Connection Problems​

Symptoms: "Failed to fetch data" errors

Solutions:

  1. Check your internet connection
  2. Ensure the embed domain is whitelisted (contact support)
  3. Try refreshing the page

Security Considerations​

Data Privacy​

  • The widget only displays publicly available customer information
  • Customer emails and sensitive data are never exposed
  • All data transmission is encrypted via HTTPS

Content Security Policy (CSP)​

If your website uses CSP headers, you may need to whitelist:

frame-src https://incentise.com;

Support​

Getting Help​

If you encounter issues or need assistance:

  1. Documentation: Check this guide and other business documentation
  2. Support Ticket: Create a ticket through your business dashboard
  3. Email Support: Contact [email protected]
  4. Live Chat: Available during business hours in your dashboard

Reporting Issues​

When reporting problems, please include:

  • Your Incentive Request Program ID
  • The exact embed code you're using
  • Website URL where the widget is embedded
  • Browser and device information
  • Screenshots of any error messages

Ready to get started? Copy your Program ID and use the embed code above to add social proof to your website today!