Skip to main content

Multi-Step Popup: Step-by-step guide

In this article you'll learn how to create a multi-step popup from scratch.

Build a multi-step popup fully tailored to you with a drag-and-drop editor: ask quiz-style questions, collect email and phone, and show a success screen with the coupon. By splitting capture into short steps, you reduce friction and get more subscribers and better customer data. And like the other popups, it boosts your sales too: visitors get a discount coupon when they participate!


How to create a popup?

Click "Create popup" and choose the Multi-Step template.

On the editing screen you'll find:

  • On the left: the panel to add blocks.

  • In the center: the live preview of your popup (with buttons to switch between desktop and mobile).

  • On the right: the properties panel for whatever you have selected.

  • At the top: the steps bar, where you add, reorder, and edit each step.


How does the editor work?

The popup is built with steps and, within each step, with blocks.

  • Steps: the screens the visitor moves through. You can create Question/Quiz, Email, Phone/SMS, custom, and Success steps. Reorder them by dragging from the top bar.

  • Blocks: the elements inside each step. Drag them from the left panel onto the canvas (or click to add them), reorder them by dragging, and edit them in the right panel when selected.


What can you configure?

Available blocks

  • Text: with a rich editor (bold, italic, headings, alignment).

  • Image: upload it and choose width and alignment.

  • Button: set the text and the action (go to next step, submit and finish, close the popup, or open a URL).

  • Spacer: to add room between blocks (with or without a divider line).

  • Fields (inputs): Email, Phone, Name, Birthday, and custom fields. Each with its label, placeholder, and required option.

  • Options / Quiz: buttons, checkboxes, or dropdown. You can allow single or multiple selection and have it auto-advance to the next step on select.

  • Coupon: shows the won code on the success screen, with a copy button.

Design (Styles)

Customize the font, popup size, corner radius, colors (primary, text, buttons, background), and the backdrop color.

You also set up the side image:

  • On desktop: no image, left, or right.

  • On mobile (where the sides don't fit): hide it, set it as background, top, or bottom.

You can also enable a configurable "No, thanks" link (text and color) that closes the popup.

Text

All popup texts are fully editable, from start to finish: titles, subtitles, buttons, field labels, quiz options, etc.

Coupons

Choose the reward type:

  • No discount: you only capture the lead (no code is shown).

  • Auto-generate coupon: a unique, single-use code is created for each visitor (with configurable discount type, value, and prefix).

  • Existing store coupon: use a code you've already created in your store.


Advanced settings

From the Settings tab you'll be able to define:

  • When to show the popup: on site entry or based on conditions (on exit intent, after X seconds, or after scrolling X pixels).

  • Frequency: show it on every visit or limit repeats per day, week, or month.

  • When to stop showing it: once the visitor has subscribed or after X impressions.

  • Which devices it appears on: desktop, mobile, and/or tablet.

  • URL filter: show it only on certain pages or hide it on others.

  • Whether you allow the same email to participate more than once.

  • How to deliver the coupon:

    • On the success screen.

    • By email (with an editable template: sender, subject, texts, button, color).

    • Both.

    • External integration only: the code is neither shown nor emailed; you deliver it to the customer via a webhook or your email marketing platform.


Email

If you choose to deliver the coupon by email (or both), from the Email tab you configure the full template: sender email, subject, store name, texts, disclaimer, button text, website URL, and color.


Pro features

  • A/B testing: test different versions of the popup and keep the one that converts best.

  • Sales attribution: Nuby links purchases made with the coupon to the popup that generated them.

  • Quiz answers: each visitor's answers are saved alongside the subscriber and, if you have an active integration, sent to your webhook to use in your segmentation.

  • Multi-language: the popup is automatically shown in Spanish, English, or Portuguese based on the visitor's language.


You're all set!

Once you finish configuring it, click Save and your popup goes live on your store. You can edit, duplicate, or pause it whenever you want from the Campaigns section.

Did this answer your question?