How_To_Create_a_Two-Step_Popup_with_Depicter-min

How To Create a Two-Step Popup with Depicter

Two-step popups have emerged as a dynamic and effective strategy for website owners looking to boost engagement and drive conversions. Unlike traditional popups that present all information or requests at once, two-step popups unfold in stages, creating a more interactive and user-friendly experience. It’s common to refer to these as two-step, multi-step, yes/no, or success popups, all of which describe a popup with two steps or more: one for a successful subscription and the other for a subscription that did not occur, and other optional steps for other scenarios. This article explores the mechanics of two-step popups, exploring why they are so effective, how to implement them, and what kind of information they can help you gather. We’ll also explore how to create a two-step popup using a specific tool.

What is a two-step popup?

Imagine a popup that doesn’t hit your visitors with a form right away. That’s essentially what a two-step popup is – it unfolds in stages. Instead of instantly asking for an email or phone number, it starts by showing something interesting or asking a quick question.

It’s only after someone clicks on that initial prompt or shows they’re interested that the second part appears. This could be where you ask for their contact info or suggest they take a specific action.

Think of it less like a sudden sales pitch and more like starting a conversation. You first get people to agree to something small and easy, and that makes them more open to what you ask for next.

You could also think of this as warming up your audience. By getting them to interact with a simple first step, they’re more invested and likely to complete the main action in the second step. This approach can be a really effective way to build your email list and get people engaging with your offers.

Why do two-step popups work so well?

Well, it really comes down to how our minds work. These popups tap into something called the commitment and consistency principle, which a psychologist named Robert Cialdini talked about a lot.

Think of it like this: when someone interacts with the first part of the popup, like clicking a button, they’ve already given a little “yes” to what you’re offering. This small action makes them feel more inclined to go through with the second step.

Plus, instead of hitting people with a big request right away – like “give us your email!” – two-step popups ease them into it. It feels more natural and less like an interruption because you’re often giving them something of value first before asking for anything.

Essentially, by breaking things down into smaller, manageable steps, these popups make the whole process feel less daunting and more engaging for people. This can really boost how many folks actually complete the form and, in turn, helps you get better results. Each little step they take makes them a bit more invested in finishing, which is pretty powerful.

How to Create Two-Step Popups with Depicter

Depicter is your all-in-one solution to engage visitors and boost conversions. It features a visual drag-and-drop editor, 550+ templates, including Multi-Step Popup templates, and an intuitive UI for all skill levels. Easily build popups, notification bars, and sliders with dynamic content from posts and products. Target the right audience at the right time with flexible triggers and display conditions. Plus, create effective lead-generating forms to maximize your conversion rates.

Installing Decpiter

The first step is to install Depicter. This is as easy as installing any other plugin in WordPress. Just go to the Plugins menu and install Depicter with a few clicks. For a complete guide, please watch the video below.

Once you’ve installed it, go to the Depicter menu and click on the ‘Popups’ option. Here, we’ll take advantage of Depicter’s great feature of having over 550 ready-made templates to speed up our workflow.

Depicters' Dashboard

Depicter’s templates are available in various categories to suit different needs, all with diverse and appealing designs. For our current goal of creating two-step popups, we’ll choose a template from the “Grow Email List” category and click the “Import” button

Importing a Template

After a few seconds, we’ll enter the Depicter Editor. Here, we can edit every aspect of our popup, from its style and appearance to its functionality and features. Everything in Depicter is designed to be completely intuitive for this purpose and is available to you. 

Depicters' Editor

To see a demonstration of working with the Depicter Editor and how to build a popup from start to finish, you can watch the video below:

Alright, let’s get straight to the point. The popup we have here currently only has one step and includes a form that includes a checkbox, an input field for email, and a submit button. 

Our scenario is that we want to have another step where the discount code we want to give the customer is located. This second step should only be shown if the customer successfully enters their email in the first step and submits the form.

Successfully submitting the form signifies that the customer has subscribed, and now we have their email address, which we can use for other purposes in the future, such as newsletters or email marketing.

To add a new step, the best approach is to duplicate the current step and then make the necessary changes specific to the new step on the duplicated version.

To do this, We’ll click on the navigation at the bottom to see the number of steps and which one we are currently on. Then, we’ll use the duplicate option to create a copy of the current step.

Adding a new Step to the Popup

Now, we’ll make the necessary changes to the second step. Here, we’ve changed the text, and we’ve also removed the form and replaced it with a Coupon element, which is one of Depicter’s exclusive elements.

Customizing the Second Step

Now it’s time to specify what happens after a customer submits the form. The process is straightforward. We want to set it up so that the second step is only shown when the user has successfully submitted the form. To do this, we’ll first go back to the first step.

Returning back to the first step

Note: Keep in mind that in Depicter, whenever you select an element, the options panel will display the relevant settings for that element.

Here, we’ll click on the Form. Notice that the element name “Form” on the left side also confirms this. Then, from the Options panel, we’ll go to the Actions tab.

Selecting the Form element

Here, we’ll set the Action Type to “Go to Step” and the Trigger to “Form Submit Success”.

Adding the Form Submit Success Action

After that, our action is added like this:

Go the Step Action

If we ever click the ‘edit’ option, we can see the settings available for adjusting this Action, such as which Step it goes to, what its Trigger is, or setting a Delay.

Customizing the Action parameters

This is how the final result of a successful popup will look on your website.

Step one, before submitting the form:

Step one, before submitting the form

Step two, after submitting the form:

Step two, after submitting the form

In Depicter, there’s no limit to the number of steps you can have. You can create as many steps as you need, not just two, and guide your visitors through them step by step, gathering the necessary information and engaging with them at different stages, according to your website’s needs.

To add a new step, simply follow the previous procedure, or duplicate existing steps.

Adding another step to the popup

For example, here we’ve created another step, making our previous popup a 3-step process. After entering their email, we collect information such as their name, website, etc., from the user, and in the third step, we provide them with the desired discount code.

the third step as a middle step

Conclusion

Two-step popups offer a powerful way to enhance user engagement and boost conversions by breaking down information requests into more manageable interactions. By leveraging psychological principles like commitment and consistency, these popups create a smoother, less intrusive experience for visitors, ultimately increasing the likelihood of desired actions, such as email subscriptions or form submissions. As demonstrated, Depicter Popup Builder simplifies the creation of these dynamic popups with intuitive interfaces and pre-designed templates, making them accessible to users of all skill levels. Incorporating two-step popups into your website strategy can lead to significant improvements in lead generation, user interaction, and overall conversion rates.

Now, we’d love to hear from you! What are your thoughts on two-step popups? Have you had success using yes/no popups or successful step popups on your website, or do you have any questions about how they work? Please share your experiences and insights in the comments below!

FAQs

  • What is a two-step popup?
    • A two-step popup is a type of popup that presents information or requests in stages, rather than all at once. This approach can improve user engagement and increase conversion rates.
  • Why are two-step popups effective?
    • They work well because they utilize the psychological principles of commitment and consistency. By getting users to complete a small initial action, they are more likely to complete subsequent steps. two-step popups also feel less intrusive by breaking down larger requests into smaller, more manageable steps.
  • How do I create two-step popups?
    • Tools like Depicter allow you to easily create two-step popups using visual drag-and-drop editors and pre-designed templates. The process generally involves designing each step and then setting the triggers that lead users from one step to the next.
  • What kind of information can I gather with two-step popups?
    • You can gather a variety of information, including email addresses, contact details, survey responses, and product preferences. They are also effective for lead generation and offering incentives like discount codes.
  • Can I customize the design of my two-step popups?
    • Yes, tools like Depicter offer a high degree of customization, allowing you to modify the style, appearance, functionality, and features of each step to match your website’s branding.