Quizell

How to integrate Quizell with Webflow

Quizell quizzes run inside your Webflow pages as embedded iframes. Visitors interact with the quiz directly on your site, and all quiz logic, scoring, and product matching happens on Quizell's side. Quiz content updates you make in the Quizell dashboard reflect on your published Webflow site automatically, with no need to re-embed.

The three integration methods below are independent. The marketplace app is the fastest path for most sites. HTML embed codes offer additional display options like popups and floating buttons.

Install the Quizell app

Install the Quizell Product Quiz app from the Webflow Apps Marketplace. The app lets you embed quizzes directly into any page using a block element.

To set up the integration:

1. Install the Quizell app from the Webflow Apps Marketplace
2. Select or create a block element (such as a div or section) on the page where you want the quiz
3. Open the Quizell App panel and paste your quiz link from the Quizell dashboard
4. Replace preview with quiz in the URL path (for example, change https://app.quizell.com/preview/QuizID to https://app.quizell.com/quiz/QuizID)
5. Click Embed, adjust styling as needed, and publish your site

This URL modification is required. Using the preview URL causes display and responsiveness issues. The Quizell Webflow embedding guide documents this step and provides troubleshooting details.

The app handles responsive sizing and mobile optimization automatically. Any changes you make to quiz content in your Quizell dashboard will appear on your Webflow site without re-embedding.

Embed with HTML snippet codes

Quizell also generates HTML/JavaScript embed snippets for use with Webflow's Code Embed element. This method gives you access to five display types that control how visitors see and interact with the quiz:

• Full Page displays the quiz as the entire page view, which works well for dedicated quiz landing pages
• In Page renders the quiz inline within surrounding content, which is useful for product pages or blog posts
• Popup triggers the quiz in a modal overlay based on user actions or time delays
• Greet Bar shows a slide-in bar at the top or bottom of the page to prompt quiz participation
• Floating Button adds a persistent button that opens the quiz when clicked

Each display type is available from the Quizell dashboard under Share > Embed on a Webpage.

To embed using this method:

1. Open your quiz in the Quizell dashboard and go to the Share tab
2. Select Embed on a Webpage and choose your display type
3. Click Copy Code to copy the generated HTML snippet
4. In Webflow, add a Code Embed element from the Add panel and paste the snippet
5. Publish your site

When using the HTML embed snippet method, Quizell generates the correct URL for you, so you do not need to manually swap preview for quiz the way you do with the app method. The general embedding guide covers configuration options for each display type.

What you can build

Integrating Quizell with Webflow lets you add guided, interactive experiences to any page on your site. Here are a few examples of what you can build:

• Product recommendation quizzes: Build a skincare routine finder or supplement selector that asks about preferences and concerns, then displays matching products from your Quizell catalog with links to the relevant Webflow product pages.
• Lead qualification funnels: Create a "Find Your Plan" quiz for a SaaS site that scores responses and redirects high-intent leads to a sales calendar URL while directing others to a self-serve resources page.
• Gift finder experiences: Add a holiday gift guide quiz that matches recipients to products based on age, interests, and budget, displaying results on the quiz's recommendation page with links to your Webflow store.
• Segmented landing page routing: Build an onboarding quiz that segments new visitors by use case, then redirects each segment to a different Webflow page with pre-filtered case studies and testimonials relevant to their answers.