← Back to Blog

How to Make a Campaign Monitor Popup (Step-by-Step)

  • Conversion Rate Optimization

Campaign Monitor is a powerful email marketing platform with robust automation capabilities. 

As of mid-2020, it was used by over 250,000 small to medium-sized businesses, largely because of its simplicity and beautiful aesthetics. 

And when you combine Sleeknote and Campaign Monitor to make a personalized popup, it’s truly a match made in heaven. 

Use them together to create a jaw-dropping design that pulls in new email subscribers left and right. 

So without any further ado, let’s get right down to it. 

Here’s a step-by-step tutorial on how to make a Campaign Monitor popup with Sleeknote.

Free Downloadable Bonus

Want More Popup Examples?

Get access to our personal swipe file of 15 top-performing popup examples, popup copy templates, and more (includes resources not found in the blog post).

Step 1: Create Your Campaign

First, from your Sleeknote dashboard, you’ll need to select “Create New Campaign” at the very top. 

Then, enter the URL of your website, and click “Use this website.”

Step 2: Choose Your Goal

Next, Sleeknote will ask you what you want to use this campaign for. 

You’ll most likely want to use it to collect email addresses, which you can select here.

Otherwise, you can use it to increase product sales, connect with visitors, or guide your visitors—whatever you’d like. 

Step 3: Select a Position for Your Campaign

Then, you’ll need to decide what position you want your campaign to be located at on your e-commerce store.

You can go with center, bottom left, or bottom right. 

I’ll go with the “Slide-In; Bottom Right” position. 

From there, Sleeknote will ask you to confirm the position. 

Click “Continue” to do so. 

Step 4: Choose a Template

Now it’s time to select a template to use for your Campaign Monitor popup. 

And Sleeknote has a ton to choose from.

Most are pre-built themed templates, but there are also a handful of blank ones you can use to build it from scratch. 

Also, note that a few of the themes are multistep, meaning they require a bit more effort to set up, and these will say “Multistep” at the top right-hand corner. 

If you’re brand new to the process and just learning how to make a Campaign Monitor popup, I usually suggest sticking with a basic, themed template that’s not multistep. 

Then, once you get the hang of things, you can branch out to a more complex design later. 

For simplicity’s sake, I’ll go with the themed template called “Newsletter Value” for this example. 

Here it is. 

Step 5: Start Personalizing

One of the main reasons why people love Campaign Monitor and Sleeknote is because they both allow you to personalize the heck out of your campaign.

And that’s exactly what you’ll want to start doing with step five. 

Tweak, optimize, and fine-tune your Campaign Monitor popup so that it’s just perfect and captivates your shoppers to the point that they want to sign up for your newsletter. 

To begin, Sleeknote will give you a completely default popup that you can immediately start tinkering with. 

Here’s what it looks like for this particular theme. 

And there are three main ways to make changes—through the “Edit,” “Layout,” and “Add Elements” features. 

Let me give you a quick walkthrough on how to use all three of these. 

With “Edit,” you simply click on whatever element of the popup you want to change and select “Click to Edit.”

I’ll go ahead and change the tagline by selecting this section.

Then, Sleeknote lets you change the text, the font, the font size, the font color, and so on. 

I’m going to tweak it slightly and say “become a fashion savant.”

I’m also going to increase the font size from 16 pixels to 22 to make it a bit bigger, as well as make it bold. 

Once you’re done with an element and happy with the way it looks, click “Save Changes.”

So, after making the changes, the element of this Campaign Monitor popup went from looking like this…

…to this. 

Just follow the same sequence of steps for any other elements you want to change. 

You can tweak literally everything, including the image, the logo, the email address box, the CTA, and the section about the privacy policy. 

It’s really easy. 

With “Layout,” Sleeknote will provide you with a list of all of the elements present in your campaign. 

This way you can quickly locate individual elements and make any adjustments that you’d like. 

Let’s say that I want to change the background color of the container on the right side of this Campaign Monitor popup. 

All I have to do is click here. 

Then, I can choose another background color here. 

I’ll go with a turquoise color instead of the beige that looks like this:

Then, you just need to click “Save” and you’re good to go. 

And finally, with “Add elements,” you can do just that—add any other elements you’d like to flesh out your Campaign Monitor popup. 

You can choose from layout elements, forms elements, and 3rd party apps. 

Say, for example, you want to let visitors know exactly what they’ll get by signing up for your newsletter.

You could delete the section that says “All in your inbox, every day,” and instead, add a divider to create some more space between the sections. 

All you have to do is drag-and-drop a divider to that location.

Then, it’s just a matter of adjusting the height to how many pixels you want. 

I’ll go with 16. 

Then click “Save.”

So when I’m done, the Campaign Monitor popup goes from looking like this…

…to this, which reduces clutter and gives it a bit more breathing room. 

Step 6: Tweak Your Teaser 

At this point, your Campaign Monitor popup is nearly done. 

But there are a few more steps you’ll need to complete to put the finishing touches on everything, with the first being to customize the teaser.

To clarify, “the teaser will show at the bottom of the screen before your popup is triggered. Whenever a visitor clicks the teaser, the popup will appear. If a visitor closes the popup, the teaser will return to its position. The teaser gives your visitors a chance to reopen the popup if they change their mind.”

You’ll find the teaser editor at the bottom of the dashboard right here. 

Click on it, and the default version of the teaser will appear. 

Editing it with Sleeknote is incredibly easy. 

Just click on one of the two elements—the text or the background — and make any changes you’d like. 

I’ll go ahead and modify the teaser so that it jives with the popup by changing the text to, “Become a Fashion Savant,” and changing the color from beige to turquoise. 

I’ll also make the text a bit bigger by switching it from 16 pixels to 22. 

Once everything looks good, click “Save.”

Bam! Just like that, the teaser is fully customized. 

Step 7: Personalize the “Success” Step

After a visitor signs up to your newsletter using the Campaign Monitor popup, they’ll see the “success step,” which is the last chance to give them information. 

For instance, you may thank them for signing up and let them know that they should check their inbox for their next instructions. 

Here’s what the default success step looks like before it’s been modified. 

To make changes, just follow the same process I’ve discussed in the previous steps. 

Click on the different elements and edit it how you’d like. 

Overall, I like this success step, but I’ll change the text slightly so that it has the same message about becoming a fashion savant, as well as the background color from beige to turquoise. 

So, it goes from looking like this…

…to this. 

Also, note that you don’t have to use the success step. 

If you’d rather not show one to your visitors, you can do so by clicking here…

…then clicking on “Just hide success step.”

Sleeknote will then let you know that this step is disabled. 

That’s all there is to it. 

Step 8: Go to Settings

Once you’re happy with your Campaign Monitor popup and have completed the form, teaser, and success step, you’ll want to click on “Continue” at the bottom right-hand corner. 

Now you can complete the rest of the setup process by doing the following.

First, decide who you want to target in your campaign under the section called “ Target a Specific Audience with Targeting Rules.”

Then, select which pages you want to show your campaign on…

…and which targeting options you want to apply. 

For example, with targeting, you might want to wait until a shopper has viewed a certain number of pages or scrolled down a certain percentage of your site before the popup appears. 

Here are a few options to consider.

Once you’re happy with everything, click “Save Condition,” and you’re all set. 

Step 9: Integrate with Campaign Monitor 

The last step is to go ahead and integrate your popup with Campaign Monitor. 

It’s really simple.

Just click on “Set Up Integration.”

You’ll then see this screen, where you’ll want to click on “Campaign Monitor” toward the top left-hand side. 

From there, it’s just a matter of entering your Campaign Monitor API key and mail list ID and then clicking on “Authenticate.”

That’s it!

If you need any assistance with the integration process, check out this Sleeknote tutorial for a complete walkthrough. 

Free Downloadable Bonus

Want More Popup Examples?

Get access to our personal swipe file of 15 top-performing popup examples, popup copy templates, and more (includes resources not found in the blog post).

Conclusion

Creating a beautiful popup with an enticing offer is a surefire way to boost your opt-in rate.

In fact, some tests have seen the number of subscribers increase by as much as 1,375%

And as we’ve just learned, creating a Campaign Monitor popup with Sleeknote is pretty straightforward. 

Just follow the steps I’ve outlined above and personalize it to your heart’s content. 

Which Sleeknote template are you planning to use for your popup?

Like what you read? Leave a comment