Embed Widgets Guide
Display your deals on external websites, blogs, and landing pages with responsive embed widgets.
What are Embed Widgets?
Embed widgets allow you to display your DrivenCart deals on any website by copying and pasting a simple code snippet. Think of widgets as portable versions of your deal pages that can be embedded anywhere you have web access—your WordPress blog, Shopify store, landing page builder, membership site, or even a custom HTML website. Widgets are fully responsive, automatically adapting to different screen sizes and maintaining your deal's branding and functionality.
Why Use Embed Widgets?
Embed widgets let you promote deals across multiple properties without maintaining separate versions. Update your deal once in DrivenCart, and all embedded versions update automatically. This saves time, ensures consistency, and allows you to leverage traffic from multiple sources.
Types of Embed Widgets
1. Full Deal Embed
Embeds your entire deal page including headline, description, images, pricing, and checkout button. Perfect for dedicated landing pages or long-form content.
Best Used For:
- • Blog posts about the product
- • Dedicated product pages on your main website
- • Sales letter sections
- • Membership site exclusive offers
2. Featured Deals Widget
Displays a grid or carousel of multiple featured deals. Visitors can browse and click to view full details.
Best Used For:
- • Homepage product showcases
- • Sidebar widgets on blogs
- • "You might also like" sections
- • Deal directories or marketplaces
3. Buy Button Widget
A simple, compact button that opens the checkout process in a modal or redirects to your full deal page.
Best Used For:
- • Email signatures
- • Social media bio links
- • Footer areas
- • Quick conversion spots throughout content
4. Countdown Timer Widget
Standalone urgency timer showing time remaining on a limited offer. Can be embedded separately from the full deal.
Best Used For:
- • Header banners announcing flash sales
- • Above-the-fold urgency elements
- • Email marketing (animated GIF timers)
- • Pre-launch countdown displays
Step-by-Step: Creating an Embed Widget
1Access the Embed Code Generator
- Log into your DrivenCart dashboard
- Navigate to Dashboard → Deals
- Find the deal you want to embed
- Click the "Embed Code" or "Share" button
- Select "Generate Embed Widget"
2Configure Widget Settings
Widget Type
Choose: Full Deal Embed, Featured Deals, Buy Button, or Countdown Timer
Widget Size
Set width and height, or choose "Responsive" to auto-adapt to container
Border & Styling
Customize border radius, shadow, and padding to match your site design
Button Behavior
Choose: Open in modal/lightbox, redirect to full page, or open in new tab
3Copy the Embed Code
Once you've configured your widget settings, click "Generate Code". You'll receive a code snippet that looks like this:
<iframe src="https://yourdomain.com/embed/deal/your-product"
width="100%"
height="600"
frameborder="0"
scrolling="auto"
style="border-radius: 8px;">
</iframe>Copy this entire code snippet to your clipboard.
4Paste Code into Your Website
Where you paste the code depends on your platform:
WordPress:
Use the HTML or Code Block in the Gutenberg editor. Paste the embed code directly into the block.
Wix:
Click the (+) button → Embed → Embed Code → Paste your widget code.
Squarespace:
Add a Code Block to your page → Paste the embed code → Click "Apply."
HTML/Custom Sites:
Paste the code wherever you want the widget to appear in your HTML file.
5Test and Publish
- Preview your page to ensure the widget displays correctly
- Test on mobile devices to verify responsive behavior
- Click the embedded button/link to confirm checkout works
- Check loading speed and adjust widget size if needed
- Publish your page when everything looks perfect
Pro Tips for Embed Widgets
📱 Optimize for Mobile First
Over 60% of traffic is mobile. Use responsive width (100%) rather than fixed pixel dimensions. Test your embedded widget on various screen sizes before publishing.
⚡ Consider Page Load Speed
Embedded iframes can impact page load times. Use lazy loading attributes (loading="lazy") to defer loading until the widget is scrolled into view. This improves overall site performance.
🎨 Match Your Brand Styling
Customize widget colors, fonts, and button styles to blend seamlessly with your website's design. Consistent branding increases trust and conversion rates.
🔗 Use Context-Appropriate Widgets
Don't embed full deal pages in every blog post. Use Buy Buttons for sidebar CTAs, Featured Deals for homepage showcases, and Full Embeds only where appropriate. Match widget type to context.
📊 Track Embedded Widget Performance
Use UTM parameters in your widget URLs to track which embedded instances drive the most conversions. Example: ?utm_source=blog&utm_medium=embed&utm_campaign=sidebar
Platform-Specific Integration Guides
WordPress Integration
- Edit the page or post where you want the widget
- Click (+) to add a new block → Search for "HTML" or "Custom HTML"
- Paste your embed code into the HTML block
- Click "Preview" to see how it looks
- Publish or update your page
Pro Tip: For WordPress, you can also use shortcodes. Install a shortcode plugin and wrap your embed code in a reusable shortcode for easy insertion across multiple pages.
Shopify Integration
- Go to Online Store → Pages (or Products)
- Create or edit a page
- Click the HTML button (
</>) in the editor toolbar - Paste your embed code
- Save and preview your page
ClickFunnels / Landing Page Builders
- Drag a "Custom HTML" element onto your page
- Open the HTML editor for that element
- Paste your embed code
- Adjust element sizing and positioning
- Save and test your funnel
Webflow Integration
- Add an Embed element to your page
- Paste your embed code into the code editor
- Set the Embed element's width to 100% for responsive behavior
- Publish your site to see the widget live
Responsive Design Considerations
Ensuring your embedded widgets look great on all devices is critical. Follow these responsive design principles:
✅ Use Percentage-Based Width
Set width="100%" instead of fixed pixel widths. This allows widgets to scale naturally with the container.
width="100%" /* Good */ vs width="800px" /* Avoid */✅ Set Appropriate Heights
Full deal embeds typically need 600-800px height. Buy buttons need 60-100px. Featured deals need 400-600px. Test on actual devices to find the right height.
✅ Enable Responsive Scrolling
Set scrolling="auto" in the iframe. This allows content to scroll if it exceeds the iframe height, preventing cut-off content on smaller screens.
Troubleshooting Embed Issues
Issue: Widget Not Displaying
Possible Causes & Solutions:
- Check if the page builder/CMS supports iframes (some restrict them for security)
- Verify the embed code was pasted completely without truncation
- Ensure no extra spaces or characters were added when copying
- Test in an incognito/private browser window to rule out caching issues
Issue: Widget Looks Cut Off or Distorted
Solution: Adjust the height attribute in your embed code. Increase it gradually (e.g., from 600px to 800px) until all content is visible without unnecessary white space.
Issue: Checkout Button Not Working
Solution: Verify that your deal is published and active (not in draft mode). Test the direct deal URL first. If it works outside the widget but not inside, check for JavaScript conflicts with the parent page.
Issue: Widget Loading Slowly
Solution: Use the loading="lazy" attribute to defer loading. Optimize images in your deal to reduce file sizes. Consider using a CDN to serve embedded content faster.
Embed Widget Best Practices Checklist
Test widgets on desktop, tablet, and mobile before publishing
Use responsive width (100%) for all embedded widgets
Match widget styling to your website's brand colors and fonts
Add UTM tracking parameters to measure widget performance
Use lazy loading to improve page speed
Choose appropriate widget type for each placement context
Update widgets when you make changes to your deals (may require regenerating code)