Lucky Wheel
Connect Lucky Wheel with Webflow to capture visitor email addresses through interactive spin-to-win popups that collect visitor information.
How to build with Lucky Wheel and Webflow
Smartarget Lucky Wheel adds spin-to-win popups to Webflow sites that display a spinning wheel interface where visitors submit their email address to reveal discount codes or promotional offers. The widget triggers based on visitor behavior, including scroll depth percentage, time on page, or exit intent detection when visitors move their cursor toward the browser's close button. You can customize colors, prize configurations, and display rules through Smartarget's dashboard before embedding on your Webflow site.
This approach differs significantly from traditional email capture methods. Static email signup forms require visitors to manually enter their information without any interactive element, which can result in lower engagement. In contrast, Lucky Wheel provides a pre-built popup system with a gamified spinning wheel interface that visitors interact with in exchange for their email address. The widget handles display triggers and data collection automatically, eliminating the need for custom code.
To get started, you can add Lucky Wheel to Webflow through two methods: using the Lucky Wheel app from the marketplace for integrated management, or adding Lucky Wheel with Code Embed element for page-specific popups. Both methods support full visual customization through Smartarget's dashboard.
Use the Lucky Wheel app
The Lucky Wheel app in the Webflow Apps marketplace is available as a native Webflow integration. Install the app through Webflow's standard marketplace installation flow, authenticate your account, and configure settings within Webflow.
The marketplace app includes these features:
- Lead capture interface: Customizable spinning wheel for collecting visitor information
- Display triggers: Exit-intent detection, time-on-page delays, and scroll-depth percentages
- Promotional configuration: Discount amounts, prize types, and win probability settings
- Real-time reporting: Engagement metrics tracking
- Mobile responsiveness: Touch-enabled interfaces on all device sizes
The app requires permissions to read and write custom code for implementing the interactive wheel, plus read site data for proper integration.
Add Lucky Wheel with Code Embed element
For targeted landing page implementations, add Lucky Wheel to specific pages using Webflow's Code Embed element. This method works well when you want to test different popup campaigns on select pages or run promotions only on high-traffic landing pages without affecting your entire site.
Open Webflow, access the Add panel in the left sidebar, and drag a Code Embed element onto your canvas. Double-click the element to open the embedded code editor, paste your Lucky Wheel JavaScript snippet from Smartarget's dashboard, and publish.
This method supports up to 50,000 characters per embed and accepts HTML, CSS (<style> tags), and JavaScript (<script> tags). Scripts display only as a placeholder in the canvas and functionality appears after publishing to your staging or live site. Before embedding, configure all settings through Smartarget's dashboard. You can adjust color schemes, customize call-to-action text, set trigger conditions (scroll position percentage, time delay in seconds, exit intent cursor detection), and configure data collection fields without code editing.
What you can build
Integrating Lucky Wheel with Webflow enables email list building through a spin-to-win popup mechanism that captures visitor information in exchange for discount incentives.
- E-commerce discount campaigns: Display exit-intent triggered Lucky Wheel popups when visitors show abandonment behavior, offering percentage discounts or promotional codes to encourage cart completion and capture email addresses for retargeting campaigns
- Lead generation landing pages: Add scroll-depth triggered Lucky Wheel displays to product launch pages or webinar registration sites that collect visitor information in exchange for exclusive content, early access codes, or premium feature trials
- Seasonal promotion pages: Create time-limited campaign pages with branded Lucky Wheel designs matching holiday themes (Black Friday, summer sales) that distribute promotional incentives while building segmented email lists for future marketing
- Mobile-first engagement experiences: Deploy touch-enabled Lucky Wheel interactions on mobile landing pages where traditional forms create friction, capturing leads through gamified exchanges with full responsiveness across device sizes
Frequently asked questions
Add Lucky Wheel to Webflow through two primary methods. The simplest approach is to install the native Lucky Wheel app directly from the Webflow Apps marketplace, which offers integrated management within Webflow without any code installation. Alternatively, use manual JavaScript embedding: sign up on Smartarget's platform, configure your wheel settings through their visual dashboard, copy the JavaScript snippet from the Integrations section, and paste it into your Webflow site using either the Code Embed element for page-specific implementation or site-wide custom code settings for cross-site deployment.
According to Smartarget's Webflow integration documentation, you can customize colors, call-to-action text, popup behavior, and prize configurations through Smartarget's visual dashboard before embedding. The widget supports display triggers including exit intent cursor detection, time-on-page delays, and scroll-depth percentages. All customization happens through the visual interface without editing embedded code directly.
Yes. According to Smartarget's official Webflow integration guide, the Lucky Wheel widget is fully responsive and functions on both desktop and mobile devices. The widget automatically adapts to different screen sizes and supports touch-based spinning interactions on mobile browsers.
Webflow's Custom Code Embed documentation specifies several constraints. Each Code Embed element supports a maximum of 50,000 characters—if Lucky Wheel's code exceeds this, you must host it externally and reference it via
<script>tags. Webflow only supports client-side code (HTML, CSS, JavaScript), not server-side languages. Script tags display as placeholders in Designer mode and only function after publishing. Webflow provides no official support for troubleshooting third-party integrations, meaning developers are entirely responsible for resolving any code conflicts or compatibility issues with the Lucky Wheel widget.
Lucky Wheel operates through client-side JavaScript without public API endpoints for server-side integration. You can capture form submissions through Webflow's native forms and sync data to your CMS using the Webflow CMS API. Create a CMS collection for leads, use the
POST /collections/{collection_id}/itemsendpoint to store captured emails, and publish items withPOST /collections/{collection_id}/items/publish. Since Lucky Wheel doesn't provide webhook capabilities, handle data flow through custom JavaScript or Webflow's native form submission events.
Description
Smartarget Lucky Wheel is a JavaScript-based widget that displays spin-to-win popups for email capture. The tool supports customizable visual design, display triggers based on visitor behavior (exit intent, scroll depth, time delays), and mobile-responsive layouts.
This integration page is provided for informational and convenience purposes only.
Beehiiv
Connect Beehiiv's newsletter platform with Webflow to capture subscribers, sync content, and monetize your audience. You can also build seamless email capture forms, automate content distribution, and track engagement.
ActiveCampaign
Connect the ActiveCampaign App for Webflow to engage those prospects with automated email, SMS, or WhatsApp messages — personalized to their form submissions and site activity.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
