Skip to main content

🔗 Embed Acknowledgement Widget

Learn how to create embeddable widgets that display incentive offer acknowledgements on your website.

What is the Acknowledgement Widget?​

The Acknowledgement Widget is a small, embeddable component that:

  • Displays acknowledgements for specific incentive offers
  • Shows that recipients have confirmed receiving incentives
  • Builds trust and credibility with website visitors
  • Works on any website that supports HTML/iframe

Prerequisites​

Before creating an embed widget:

RequirementDescription
Incentive Offer existsYou need an existing offer
Status is "Acknowledged"Widget only available for acknowledged offers
Access to embed pageNavigate to the embed configuration

Important: You cannot create an embed widget for offers that haven't been acknowledged yet.

Accessing the Embed Page​

URL: /provider/incentive-offers/embed/[incentive_offer_id]

Navigation:

  1. Go to Incentive Offers in your dashboard
  2. Find an offer with Acknowledged status
  3. Click the three-dot menu (â‹®)
  4. Select Embed Acknowledgement Widget

Alternative: Use the FAB menu on any offer-related page (only appears when status is "Acknowledged").

Understanding the Embed Page​

Left Panel: Widget Configuration​

Embed Code Section​

  • Text Area - Displays the iframe embed code
  • Copy Button - Click to copy code to clipboard
  • Visual Feedback - Checkmark (✓) appears when copied
  • Read-Only - Code is auto-generated

Preview Button​

  • "Preview Widget" button with external link icon
  • Opens the widget in a new browser tab
  • Shows exactly how visitors will see it

Right Panel: Preview and Instructions​

Widget Preview Card​

  • Live Preview - Shows how the widget appears
  • Iframe Display - Actual widget in an iframe
  • Auto-updates - Reflects your configuration

Installation Instructions Card​

  • Step-by-Step Guide - How to install the widget
  • Three Main Steps - Copy, Paste, Customize

Creating an Embed Widget​

Step 1: Navigate to Embed Page​

  1. Ensure your offer status is "Acknowledged"
  2. Access the embed page using navigation methods above
  3. Page loads with embed code already generated

Step 2: Review the Embed Code​

The generated code looks like:

<iframe 
  src="https://incentise.com/incentive-offer-acknowledgement-widget?incentive_offer_id=[your_offer_id]" 
  width="320" 
  height="120" 
  frameborder="0" 
  style="border-radius: 8px;">
</iframe>

Code Components​

AttributeDescription
srcWidget URL with your offer ID
widthWidget width (default: 320px)
heightWidget height (default: 120px)
frameborderBorder setting (0 = none)
styleCSS styling for rounded corners

Step 3: Copy the Embed Code​

  1. Click the Copy Button (📋 icon)
  2. See the checkmark (✓) confirmation
  3. Notice toast: "Copied! Embed code copied to clipboard"
  4. Checkmark disappears after 2 seconds

Step 4: Preview the Widget (Optional)​

  1. Click "Preview Widget"
  2. Widget opens in a new browser tab
  3. Verify display and information
  4. Ensure it matches your expectations

Step 5: Install on Your Website​

Choose your installation method:

Installation Methods​

Method 1: Direct HTML​

<!-- Add to your HTML page -->
<iframe 
  src="https://incentise.com/incentive-offer-acknowledgement-widget?incentive_offer_id=YOUR_ID" 
  width="320" 
  height="120" 
  frameborder="0" 
  style="border-radius: 8px;">
</iframe>

Method 2: Content Management System (CMS)​

WordPress, Shopify, Wix, Squarespace, etc.:

  1. Log into your CMS
  2. Navigate to the target page
  3. Switch to HTML/code editor mode
  4. Paste the embed code
  5. Switch back to visual editor
  6. Save and publish

Method 3: Website Builder​

  1. Open your website builder
  2. Add an "HTML" or "Code" block/component
  3. Paste the embed code
  4. Position and resize as needed
  5. Save and publish

Customizing the Widget​

Adjusting Size​

Modify width and height attributes:

<!-- Smaller widget -->
<iframe src="..." width="240" height="90" ...></iframe>

<!-- Larger widget -->
<iframe src="..." width="400" height="150" ...></iframe>

<!-- Responsive width -->
<iframe src="..." width="100%" height="120" ...></iframe>

Adding Styling​

Enhance with CSS:

<iframe 
  src="..." 
  width="320" 
  height="120" 
  frameborder="0" 
  style="border-radius: 8px; 
         border: 1px solid #e2e8f0; 
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
</iframe>

Responsive Design​

For mobile-friendly widgets:

<div style="max-width: 400px; width: 100%;">
  <iframe 
    src="..." 
    width="100%" 
    height="120" 
    frameborder="0" 
    style="border-radius: 8px;">
  </iframe>
</div>

Installation Steps Summary​

StepAction
1Copy the embed code using the copy button
2Paste on your website where you want the widget
3Customize appearance (optional)

Interactive Tour​

A guided tour is available:

  1. Click "Take Tour" button in the top-right corner
  2. Follow the highlighted areas and tooltips
  3. Tour auto-starts on first visit
  4. Uses localStorage to remember if you've seen it

Best Practices​

Placement Recommendations​

LocationPurpose
Product PagesShow incentives for specific products
Checkout PagesBuild trust during purchase
Landing PagesAdd credibility to promotions
Testimonials SectionUse as social proof
Email SignaturesInclude in marketing emails

Multiple Widgets​

  • ✅ Same widget can be embedded on multiple pages
  • ✅ Each widget shows the same acknowledgement
  • ✅ Create different offers for different products

Performance​

  • Widget loads asynchronously
  • Won't slow down your page
  • Lightweight and optimized
  • No additional JS/CSS files needed

Troubleshooting​

Widget Doesn't Appear​

Possible Causes:

  • Embed code pasted incorrectly
  • Website doesn't support iframes
  • Typos in the code
  • Content blocked by browser

Solutions:

  1. Verify code was pasted correctly
  2. Check website supports iframe embedding
  3. Try previewing the widget URL directly
  4. Check browser console for errors

Widget Shows Incorrect Information​

Possible Causes:

  • Wrong offer ID in the URL
  • Offer not in "Acknowledged" status
  • Offer was deleted or modified

Solutions:

  1. Verify the correct offer ID
  2. Check offer status is "Acknowledged"
  3. Regenerate the embed code

Copy Button Doesn't Work​

Possible Causes:

  • Browser clipboard permissions denied
  • Browser not supported
  • JavaScript disabled

Solutions:

  1. Allow clipboard permissions when prompted
  2. Try a different browser
  3. Manually select and copy the code
  4. Enable JavaScript

Preview Doesn't Load​

Possible Causes:

  • Network connection issue
  • Incorrect offer ID
  • Offer status changed

Solutions:

  1. Check internet connection
  2. Verify offer ID is correct
  3. Ensure status is still "Acknowledged"
  4. Open widget URL directly

Important Notes​

NoteDescription
Status RequirementOnly available when status is "Acknowledged"
One Widget Per OfferEach embed code is specific to one offer
Automatic UpdatesWidget updates when acknowledgements change
No ExpirationEmbed code doesn't expire
PrivacyOnly shows acknowledged information
Mobile FriendlyWidget is responsive

Use Cases​

ScenarioHow to Use
E-commerceShow product incentive acknowledgements
Service Landing PagesDisplay service-based acknowledgements
CheckoutBuild trust during purchase
Marketing CampaignsAdd to promotional pages
Social ProofUse alongside customer reviews