How to Create a Multi-Step Popup: 2 Methods
Before we begin, we should note that we understand not everyone learns in the same way. For that reason, check out this video tutorial if you’re more of a visual learner:
Otherwise, keep reading this in-depth guide.
In this tutorial, we’ll cover 2 methods for adding multi-step popups to your site to boost conversions:
- Yes/No Campaign
But before we begin, you’ll need one thing for this tutorial: an OptinMonster account.
OptinMonster helps you get more conversions in less time and with no headaches. Plus, with our 14-day money-back guarantee, you can test out the software with zero risk.
Sign up for OptinMonster today!
Ready? Let’s get started.
Method 1: Using MonsterLinks™
The first method of our multi-step popup will be using a MonsterLink™, which is an embeddable link that you can add to any text or button.
When users click this link, your popup campaign will appear. Thanks to the Zeigarnik effect, users will be more likely to opt into your offer because they already kicked off the process.
Plus, most users who click on your campaign’s link will have a heightened interest in the content.
At any rate, you can expect higher conversions from multi-step popups that use MonsterLinks™. Here’s how you make them:
Step 1: Create Your Popup
Once you’re in your OptinMonster dashboard, click Create New Campaign in the top right corner:
Now it’s time to select your campaign type. For today’s tutorial, we’ll go with a Popup campaign:
Then you’ll need to select a template:
OptinMonster has over 50 pre-built templates that work great across all devices. And if most of your traffic comes from their smartphones, you can even filter your template options to be mobile optimized:
You can also filter your templates depending on the goal of your multi-step popup:
This is an excellent filter because it helps you decide which template would work best for the specific campaign you’re creating.
And if you want to create a multi-step popup that’s 100% unique to your brand, you can use our Canvas template:
The canvas template allows you to create a pop up from scratch. And thanks to our drag and drop editor, there are no coding skills required.
Today, we’ll use the Basic template:
Then, you simply need to name your popup campaign to stay organized, assign it to your website, and click Start Building:
Step 2: Design Your Popup
Now your template will be in the OptinMonster editor. We won’t get into too much detail today about how to design your multi-step popup.
That’s because there are too many customization options to cover in a single post. But if this is your first time building a campaign with OptinMonster, don’t worry.
You can check out this resource on how to create and design your first campaign with OptinMonster.
What you need to know for today’s tutorial is that you can quickly and easily modify any part of your multi-step popup campaign.
All of our campaigns are broken down into different elements that we call “blocks.” If you want to modify any of these blocks, all you need to do is click on them in your editor.
So, for example, the Basic template has a text block:
And it has an optin block:
To modify any part of your multi-step popup, just click on the block in your editor. That will pull up the editing tools on the left-hand side:
Plus, if you want to add a new block, that’s easy. Just click + Add Block at the top of your editing menu:
If you scroll down in the left-hand side menu, you’ll see the different block options that you can add to your multi-step popup. These blocks include,
- Countdown Timer
You can add the new block with a drag and a drop:
Again, customizing your multi-step popup couldn’t be easier with OptinMonster. Here’s an example of the multi-step popup we built specifically for this tutorial:
And the best part is that this popup took us less than 5 minutes to create.
Keep in mind that you may need to customize your Success page depending on the goal of your campaign:
If you’re growing your email list, for example, you’ll want to modify your Success page with a small “Thank You” message after users sign up:
If you’re redirecting users to another URL, then you won’t need to display your Success page at all. You’ll need to decide if you should customize a Success page depending on your goals.
Once you designed a popup campaign that you’re happy with, it’s time to set the display rules.
Step 3: Add Your MonsterLink™
For this first method of creating a multi-step popup campaign, we’re going to be using a MonsterLink™. When a user clicks on your MonsterLink™, your popup will appear.
And as we discussed earlier, people will be more likely to finish opting into your campaign once they’ve started with that first single click.
At the top of your editor, click Display Rules:
By default, your first display rule will be Time on page, but you’ll see a drop-down menu below with different options for display rules that you can add. Look for MonsterLink™ (On Click):
Now you simply need to click Copy MonsterLink™ Code:
And that’s it! Your MonsterLink™ will be copied to your clipboard, and you can embed it wherever you would like.
Keep in mind that your MonsterLink™ is currently copied in an HTML form. That means it looks like this if you paste it as-is:
But many times, you’ll simply want the link and won’t need the HTML embed code. For that, select the URL in between the quotations marks (starting with “https://”) from the HTML code above.
In this example, we would get the following link:
Now you have an embeddable link that you can put over any anchor text. When a user clicks on this link, your popup campaign will appear.
As a result, you can expect higher conversions for 2 reasons:
- People who click the link will have a higher interest in the content of your popup
- Thanks to the Zeigarnik effect, people will be more likely to finish opting in because they’ve already started the process
All that’s left is to Save and Publish your campaign. 😉
Now let’s take a look at the second method for creating a multi-step campaign.