How to create a widget quiz funnel

Before building your widget quiz in ConvertFlow, figure out what questions to ask and what results come from each combination of answers.

Quizzes can look very different from one business to another. But there are some general best practices that will apply to most widget quiz funnels:

Keep your widget quiz concise:

The more questions you ask, the more likely a shopper is to drop out before completing it.

And a lengthy widget quiz could mean more results combinations for you to create.

Ask just enough questions to give accurate results to quiz takers and personalize their funnel path.

3-5 questions will be plenty for many use cases.

You can always expand your widget quiz if you learn you’re missing crucial information.

Limit product recommendations for each result:

Remember, one of the main points in creating a widget quiz is to reduce overwhelm and choice overload.

It’s your job to figure out the best-fit recommendation for the customer.

Occasionally, it makes sense to recommend multiple products, like if you’re recommending items to buy as a set. Or if there are a few products that would make sense for the customer.

But you should still limit their choice to three or four max and differentiate the options you recommend to make their decision easy.

Keep flow in mind:

The questions you ask in your widget quiz should make sense together and lead naturally from one to the next.

And ask simple questions first. For example, if you’re making a skincare quiz, you’ll probably ask about skin type before you ask about goals or concerns.

Draft your widget quiz questions and answers

Let’s take the example of a fictional furniture store. We want to recommend specific Shopify product collections based on the customer’s style and use case.

Our questions with their answers might look something like this:

Question 1: What room are you furnishing?

Living room

Bedroom

Kitchen

Bathroom

Patio

Question 2: What’s your interior style preference?

Contemporary

Modern

Rustic

Question 3: What’s the size of this room?

Small

Medium

Large

Match widget quiz answer combinations to product & content recommendations

Now, we can define each answer combination into unique results. There are a lot of potential combinations here—which is a great reason to keep your quiz short—but you don’t necessarily need to come up with unique results for each combination of answers.

Instead, keep your widget quiz simple to start, focusing on personalization for your top shopper segments. You can always add additional quiz logic later.

With this in mind, here are a few that we came up with for our quiz:

Recommendation #1

Answer combination: Living room, Contemporary, Large

Recommendation: Contemporary living room furniture for large spaces

Recommendation #2

Answer combination: Living room, Contemporary, Medium

Recommendation: Contemporary living room furniture for medium-sized spaces

Recommendation #3

Answer combination: Living room, Contemporary, Small

Recommendation: Contemporary living room furniture for small spaces

Recommendation #4

Answer combination: Kitchen, Large

Recommendation: Large kitchen furniture

Recommendation #5

Answer combination: Kitchen, Small

Recommendation: Small kitchen furniture

Recommendation #6

Answer combination: Bathroom

Recommendation: All bathroom furniture

Recommendation #7

Answer combination: Patio‍

Recommendation: All patio furniture

As a mindmap, the combination of questions and recommendation options would look something like this:

Copy this FigJam whiteboard to create something similar for your product quiz. Or if you prefer a spreadsheet, copy this Google Sheet quiz template.

When it came to determining what results to provide, we created more personalized recommendations to the more popular, high-ticket room categories. Each combination of style and size responses for people shopping for their living room will get a unique result.

But our store doesn’t have a lot of variety in terms of style when it comes to kitchen furniture, so we can just create kitchen recommendations based on size.

Meanwhile, we have fewer items in our bathroom and patio collections. Plus, these items are less popular. So, it makes sense to recommend the whole room collection to shoppers here.

Build your widget quiz in ConvertFlow

With your widget quiz mapped out, you’re ready to build it in ConvertFlow ⚡

Let’s do it together step-by-step.

Make the widget quiz creation process easier by choosing a that aligns with your product’s end goal.

ConvertFlow has a wide range of customizable quiz templates for all kinds of verticals, niches, and outcomes. Browse our template library to see them all.

Now decide how you want your widget quiz to display on your website.

You can display a quiz:

On a dedicated landing page

As an overlay popup

Embedded onto an existing page on your website

We’ll choose a landing page for this playbook.

We typically recommend using landing pages for quizzes so you can have a single quiz URL to promote in a variety of ways.

Adding a quiz element

If you started from scratch, or your template doesn't have a quiz element, to add a quiz element, first, click to add a new element from the toolbar.

Then, choose the "Quiz" element from the element types to the right.

You'll now have a quiz added to your campaign, with controls to customize the quiz displayed to the right.

In the panel, you can toggle the quiz progress bar, manage quiz questions, toggle next & back buttons for the quiz, and manage quiz completion actions.

Adding questions to your widget quiz

To add a new question, click "Add Question".

You'll be able to either create your widget quiz's question from scratch, or choose from a library of quiz question templates.

We'll click to create from scratch. A new question will be added to your widget quiz for you to customize in a panel.

Note at the top of the panel, that you can switch between editing the content, the design, and the logic of the question, by clicking the tabs up top.

Mapping to a custom field

First, you'll want to select a contact custom field to map your widget quiz question to.

This way when someone answers the widget quiz question, their answer will be stored within that custom field in their contact profile in ConvertFlow and in your integrated email provider.

This means you’ll be able to run highly segmented email & SMS sequences based on the answers people give to your widget quiz 😎

Either write in a new custom field data name to use, or select an existing custom field from the dropdown.

Choosing a widget quiz question type

You can choose between multiple question types for your widget quiz questions, such as simple surveys, image surveys, surveys to choose an icon, color, letter, or emoji.

You can also have your widget quiz question be a form field, like a text input, dropdown select, numerical inputs, range sliders, etc.

Pro tip: Want to just show a message in between questions, or a loading screen before completing your quiz? Use the "show a message" type!

Customizing the widget quiz question content

Next, you'll want to edit each of your widget quiz questions' titles, descriptions, and images that are displayed.

By uploading images and gifs for each question, you can make longer widget quizzes more fun and engaging, to increase your completion rate.

Defining answers for your widget quiz

Then, customize the answers for your widget quiz by adding answers, as well as editing/removing any pre-populated answers.

Each answer can have a label and value, which you can edit by double-clicking on the answer to open its settings.

The label is what shows to widget quiz takers, while the value is what gets stored in as a custom field value for contacts.

Pro tip: If you plan to have your widget quiz outcome depend on a score, you can use the score setting to increment/decrement the widget quiz taker's score by a certain amount for each answer.

For other types of surveys, such as image surveys, icon surveys, color surveys, etc, each answer can have the visual representation for the answer customized.

Adding sub-questions

Sub-questions let you organize widget quiz questions under their parent question.

When sub-questions are displayed, the progress bar doesn't progress. The progress bar only visualizes the progress of parent questions.

By default, widget quiz takers will be automatically routed to sub-questions after answering the parent question.

This can be overridden by

Styling your widget quiz

The funnel builder has tools for efficiently styling long widget quizzes:

Quiz theme-level styling

Quiz element-level styling

Per-question styling

Quiz theme-level styling

In the builder panel to the right, click the "Theme" tab.

You'll then find theme styling controls for all types of content. Adjust headings, and paragraph styles, as well as theme styles for buttons and progress bars.

You'll also see theme styles for quizzes, so you can style the majority of your widget from one place.

Quiz element-level styling

For each quiz element you add to your widget quiz funnel, you can select the quiz element, scroll to the "Design" settings for that element, and adjust styles for that quiz element.

This includes design controls for the widget quiz's progress bar, questions, next/back buttons, etc. These element-level styles will override any theme styles you have set.

Per-question styling

Each question you add to your widget quiz will often have slightly different styling and formatting.

For example, one question may have horizontally positioned text options to choose from, and then the next question may call for vertically stacked image options to choose from.

To adjust design settings for each question, click to edit the question. When the panel appears, click the "Design" tab.

Here you can adjust design settings like options layout, spacing, colors etc, for that specific widget quiz question.

Integrate your widget quiz with your email software or CRM

With your questions created and your fields mapped, let’s connect your email tool or CRM of choice (Klaviyo, Attentive, HubSpot, Drip, etc.). Then you’ll be able to pass on the subscriber and contact data you collect from your widget quiz.

To do this, we’ll jump to the form step of the widget quiz.

Then, select the form in the funnel builder and click to the “Actions” tab in the side panel.

Click to add or manage integrations, find your CRM from the list of options, click the “Connect” button, and follow the on-screen instructions to verify the integration with ConvertFlow.

Segment contacts in your email software or CRM

Now, we can set up an automation to sync the field values from any form submissions into your email provider/CRM. Then you’ll be able to segment customers based on their widget quiz answers and add them to your subscriber lists for further outreach.

After authenticating the integration, you’ll be brought back to the “Manage Actions” window. From here, scroll down to the automations section and click the “Add Automation” button.

Then, select the automation type that will add a contact to the relevant list or database in your ESP/CRM.

Let’s say we want to add subscribers to our newsletter list in Klaviyo. Select the “Klaviyo - Add to list” automation from the dropdown menu and choose the appropriate list:

Segment contacts in your email software or CRM

Now, we can set up an automation to sync the field values from any form submissions into your email provider/CRM. Then you’ll be able to segment customers based on their widget quiz answers and add them to your subscriber lists for further outreach.

After authenticating the integration, you’ll be brought back to the “Actions” modal. From here, scroll down to the automations section and click the “Add Automation” button.

Then, select the automation type that will add a contact to the relevant list or database in your email provider/CRM.

Let’s say we want to add subscribers to our newsletter list in . Select the “ - Add to list” automation from the dropdown menu and choose the appropriate list:

All new subscribers will now get added to this list when they fill out the widget quiz form.

You can add further automations here, too—such as adding the subscriber to a list with SMS consent (if you collected a phone number in the capture form), updating contact properties, adding/removing tags, etc.

You’ll also want to add an automation to track completing the widget quiz as an event in your integrated software. That will enable you to fire off an email/SMS flow for post-quiz follow-up.

Configuring widget quiz completion actions

You'll want to set the confirmation type. This is what the widget quiz taker visually sees upon completing of the quiz.

Examples of confirmation types:

Showing a simple thank you message

Redirecting a URL you paste

Jumping to another step in your funnel

Triggering another ConvertFlow campaign (e.g. quiz → popup)

Firing quiz completion conversion scripts & pixels

If you need to add conversion pixels and custom scripts to fire upon the completion of your widget quiz, you can do so by opening the script manager.

Conditionally mapping answers to widget quiz outcomes

Want to conditionally perform actions when your quiz is completed?

You can do so by clicking "Add Conditional Action" from the quiz element's "Actions" tab.

For each conditional action you add, you can conditionally perform actions like:

Redirecting to a different URL

Jumping to a different funnel step

Showing a different thank you message

Displaying a ConvertFlow popup campaign

Running specific automations

Firing specific pixels and custom scripts

Complex widget quiz outcomes

Reduce complex widget quiz scenarios by ordering your quiz answers alphabetically, and use conditions such as:

If answers are mostly A

These types of conditions help define conditional scenarios for widget quiz takers who mostly answer with options positioned alphabetically.

For example:

If answers are mostly B, redirect to bundle B

Or, if you want to get fancy, you can use numerical quiz scoring to more dynamically handle widget quizzes with lots of possible outcomes, as well as display a widget quiz score result at the end.

Set up personalized product recommendations for your widget quiz

Now, add product recommendations to your widget quiz.

Using the products feed and product hero elements, you can quickly showcase personalized product recommendations.

Filtering which products show

First, select the product source you'd like to use. Product elements can use products either added to ConvertFlow or your connected ecommerce platform, such as Shopify.

Conditional widget quiz product recommendations

Using the product element's conditional recommendations feature, you can conditionally show products based on widget quiz answers.

This is useful for widget quiz outcomes and product recommendation feeds, where you want to dynamically recommend products based on conditions, without having to create separate campaigns or funnel steps.

Start by clicking to add a "conditional product recommendation":

Once you've added a conditional product recommendation, you'll want to click to add conditions for the widget quiz funnel's product recommendation scenario.

For example, you may want to have conditional product recommendations based on answers from your widget quiz.

You can add as many conditions as you'd like using ConvertFlow's entire selection of , as well as control whether ALL conditions or ANY condition must be met for the product recommendation to show.

Once you've set the conditions up for your conditional product recommendation, you'll then want to configure which products should conditionally by controlling the Shopify products filter (e.g. Shopify product collection A), or by adding custom products if using the ConvertFlow custom products source.

Simplifying mapping widget quiz answers to lots of product SKUs

Using the quiz auto recommendation filter

By using the "Quiz Auto Recommendation" product filter, ConvertFlow will automatically use answers submitted to your widget quiz questions and custom fields, to filter products in your catalog.

You can toggle between products matching ANY or ALL answers, to set how strict you want the product recommendations to be.

If there are any widget quiz questions or custom fields that you don't want to be considered in your product recommendation, select them using the exclusion dropdown setting.

Using A/B/C mapping

To quickly map widget quiz answers to product recommendations when building long and complex widget quizzes, you can use "If answers are mostly A/B/C" conditions to map lots of answers to multiple product recommendations, based on each answer's alphabetical order.

This way, you can map answers to product collections A/B/C/... efficiently by positioning the widget quiz answers alphabetically.

Example: selecting mostly A answers will recommend Shopify collection A, and so on...

Use widget quiz answer merge tags

ConvertFlow's Shopify products filter supports adding merge tags to the setting, so widget quiz answers can be used to dynamically filter products.

When using this method, you'll want the values of your widget quiz answers to map to how your products are named.

Example: {apparel_type} to only show hoodies, if the shopper selects hoodie.

You can also use merge tags to filter product variants. Example: {shirt_size} to only show small sizes if the shopper selects small.

Pro tip: When using comma separate values or merge tags in product filters, you can configure the filter if the product name contains all keywords, or any keyword, by toggling the AND/OR operator.

Customize the design of your widget quiz product recommendations

With your products added, you can customize a whole heap of design options for your products from the side panel, like:

Grid or list layout

Maximum number of products to show

Margins, padding, container widths

Button colors, font types, text styling

And lots more ✨

Preview your widget quiz funnel

Click “Preview” in the top right of the builder to view your quiz as it will appear on your website. You’ll be able to check the look of your widget quiz and test out its functionality.

Any automations you have set up won’t actually run here. So you won’t be creating contacts and adding to lists while testing.

If it all looks good, select “Launch” to go through to the final step.

Launch your widget quiz funnel

On the Launch page, you’ll see slightly different options here, depending on the kind of format chosen earlier—landing page, popup, embedded, etc.

For a landing page: just select your domain and customize your URL path.

For popups and sticky bars: set the pages you’d like your quiz to be shown on and/or visitor segments to be shown to.

For embeds: you’ll see a simple embed code you can copy-paste to any page on your website. Like with a popup, you can also choose specific visitor segments to show the embed to.

Now all you need to do is activate your widget quiz to set it live!

For more info to build your widget quiz funnel strategy, go to our quiz funnel playbook →