Quiz Popup

How to integrate Quiz Popup with Webflow

Quiz Popup connects to Webflow through two methods: the Quiz Popup app from the Webflow Apps Marketplace for a no-code setup managed entirely through the Smartarget dashboard, and custom code embedding for direct control over where and how the widget script loads on your site.

Install the Quiz Popup app

Install Quiz Popup from the Webflow Apps Marketplace. The app connects your Webflow site to the Smartarget dashboard, where all quiz configuration happens.

To set up the integration:

1. Install the Quiz Popup app from the marketplace listing
2. Open the Smartarget dashboard to configure your quiz: add questions with photos, text, date pickers, and number ranges, set which fields are required or optional, and define the number of steps
3. Customize colors, fonts, and button styles to match your site's branding
4. Choose when the quiz appears: automatically on page visit, after a time delay, or through a floating button
5. Use Smartarget's built-in reporting to track quiz starts, completions, email captures, and discount code usage

All quiz configuration lives in the Smartarget dashboard, not inside Webflow. Changes you make in the dashboard apply to your published site without needing to republish in Webflow.

Smartarget's free plan limits the widget to your homepage and displays a "Powered by Smartarget" watermark. After a 14-day trial period where the widget appears on all pages, the free plan restricts display to the homepage only. The paid plan removes both restrictions and supports all pages with unlimited traffic.

Embed Quiz Popup with custom code

Use this method when you want direct control over where the quiz script loads, or when you need the widget on specific pages rather than site-wide.

In the Smartarget Quiz Popup setup, copy the generated JavaScript snippet for your quiz. Where you paste it in Webflow depends on the scope you need:

1. For a site-wide quiz popup, go to Site settings → Custom Code and paste the script into the Footer Code section so it loads on every page before the closing </body> tag. This follows Webflow's custom code in the head and body guidance.
2. For a page-specific quiz, open that page's Page Settings → Custom Code and paste the script there.
3. For inline placement within a specific section, add a Code Embed element to the canvas and paste the script inside. This positions the quiz relative to that section rather than as a global overlay.

Webflow supports custom code in preview mode, but third-party scripts that enforce domain validation may not load correctly on Webflow's preview domain. Test on your published site to confirm the widget renders as expected. Each Code Embed element and each custom code section supports up to 50,000 characters. For very large scripts, use the site-level footer code rather than multiple separate embeds.

If you use asynchronous JavaScript loading, wrap the Quiz Popup script in a DOMContentLoaded handler so the page content exists before the quiz runs.

Webflow does not provide support for debugging third-party scripts. Smartarget's own documentation and support team are your resource for Quiz Popup issues.

What you can build with the Quiz Popup Webflow integration

Quiz Popup adds branching, multi-step quiz flows to your Webflow site without building custom form logic. The widget handles conditional question paths, result screens, email capture, and discount code delivery, so the implementation work is in configuration rather than code.

Here are a few things you can build:

• Product recommendation quiz: Configure a branching question flow that maps visitor answers to specific products. A beauty brand, for example, can use photo-based questions about skin type and concerns, then display a matched product on the result screen with a link to its product page.
• Lead qualification funnel: Add a multi-step quiz popup to a B2B service page that collects budget range, team size, and project needs using multiple choice and number range questions. Segment the results by score or answer pattern to prioritize follow-up.
• Email list growth with gated results: Set the quiz to display automatically on page load, then require an email input before showing the final result screen. A coaching site could run a "What's Your Leadership Style?" quiz that captures the email and delivers a discount code to new subscribers.
• Timed recommendation popup on product pages: Configure the display trigger to show a short quiz after visitors spend time on a product page. A two-to-three-question flow captures their preferences and routes them to a recommended product based on their answers.

These builds all work through the Smartarget dashboard configuration — no custom code beyond the initial installation. For more complex patterns, such as writing quiz responses to Webflow CMS collections, a developer would need to add custom JavaScript that captures responses client-side and sends them to a server-side endpoint, which could then write to the Webflow API. Smartarget does not expose quiz response data through an API or webhooks, so this path requires a custom implementation.