Best widget Quiz ExamplesTemplates & Builder

How to create the best widget quiz funnels

Before building your widget quiz in ConvertFlowfigure 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 askthe 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:

Rememberone 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.

Occasionallyit makes sense to recommend multiple productslike 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 exampleif you’re making a skincare quizyou’ll probably ask about skin type before you ask about goals or concerns.

Draft your widget quiz questions and answers

Match widget quiz answer combinations to product & content recommendations

Nowwe 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.

Insteadkeep your widget quiz simple to startfocusing on personalization for your top shopper segments. You can always add additional quiz logic later.

Build your widget quiz in ConvertFlow

With your widget quiz mapped outyou’re ready to build it in ConvertFlow ⚡

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

Choose a widget quiz template

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

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

Select a format for your widget quiz

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

Adding questions to your widget quiz

To add a new questionclick "Add Question".

You'll be able to either create your widget quiz's question from scratchor 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 panelthat you can switch between editing the contentthe designand the logic of the questionby clicking the tabs up top.

Mapping to a custom field

Firstyou'll want to select a contact custom field to map your widget quiz question to.

This way when someone answers the widget quiz questiontheir 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 useor 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 questionssuch as simple surveysimage surveyssurveys to choose an iconcolorletteror emoji.

You can also have your widget quiz question be a form fieldlike a text inputdropdown selectnumerical inputsrange slidersetc.

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

Customizing the widget quiz question content

Nextyou'll want to edit each of your widget quiz questions' titlesdescriptionsand images that are displayed.

By uploading images and gifs for each questionyou can make longer widget quizzes more fun and engagingto increase your completion rate.

Defining answers for your widget quiz

Thencustomize the answers for your widget quiz by adding answersas well as editing/removing any pre-populated answers.

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

The label is what shows to widget quiz takerswhile 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 scoreyou 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 surveyssuch as image surveysicon surveyscolor surveysetceach 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 displayedthe progress bar doesn't progress. The progress bar only visualizes the progress of parent questions.

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

This can be overridden by skipping questions based on answers.

Styling your widget quiz

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

Quiz theme-level styling

In the builder panel to the rightclick the "Theme" tab.

You'll then find theme styling controls for all types of content. Adjust headingsand paragraph sas well as theme s for buttons and progress bars.

You'll also see theme s for quizzesso you can the majority of your widget from one place.

Quiz element-level styling

For each quiz element you add to your widget quiz funnelyou can select the quiz elementscroll to the "Design" settings for that elementand adjust s for that quiz element.

This includes design controls for the widget quiz's progress barquestionsnext/back buttonsetc. These element-level s will override any theme s you have set.

Per-question styling

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

For exampleone question may have horizontally positioned text options to choose fromand then the next question may call for vertically stacked image options to choose from.

To adjust design settings for each questionclick to edit the question. When the panel appearsclick the "Design" tab.

Here you can adjust design settings like options layoutspacingcolors etcfor that specific widget quiz question.

Integrate your widget quiz with your email software or CRM

With your questions created and your fields mappedlet’s connect your email tool or CRM of choice (KlaviyoAttentiveHubSpotDripetc.). Then you’ll be able to pass on the subscriber and contact data you collect from your widget quiz.

To do thiswe’ll jump to the form step of the widget quiz.

Thenselect the form in the funnel builder and click to the “Actions” tab in the side panel.

Click to add or manage integrationsfind your CRM from the list of optionsclick the “Connect” buttonand follow the on-screen instructions to verify the integration with ConvertFlow.

Segment contacts in your email software or CRM

Nowwe 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 integrationyou’ll be brought back to the “Manage Actions” window. From herescroll down to the automations section and click the “Add Automation” button.

Thenselect 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:

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

You can add further automations heretoo—such as adding the subscriber to a list with SMS consent (if you collected a phone number in the capture form)updating contact propertiesadding/removing tagsetc.

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.

Firing quiz completion conversion scripts & pixels

If you need to add conversion pixels and custom scripts to fire upon the completion of your widget quizyou 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.

Complex widget quiz outcomes

Reduce complex widget quiz scenarios by ordering your quiz answers alphabeticallyand 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 Bredirect to bundle B

Orif you want to get fancyyou can use numerical quiz scoring to more dynamically handle widget quizzes with lots of possible outcomesas well as display a widget quiz score result at the end.

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 goodselect “Launch” to go through to the final step.

Launch your widget quiz funnel

On the Launch pageyou’ll see slightly different options heredepending on the kind of format chosen earlier—landing pagepopupembeddedetc.

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 popupyou 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 strategygo to our quiz funnel playbook →