How to Make a Campaign Monitor Popup (Step-by-Step)
Emil Kristensen
By Emil Kristensen CMO
@ Sleeknote

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 an email 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.

Table of Contents

1. Create Your Campaign

2. Choose Your Goal

3. Select a Position for Your Campaign

4. Choose a Template

5. Start Personalizing

6. Tweak Your Teaser

7. Personalize the “Success” Step

8. Go to Settings

9. Integrate with Campaign Monitor

Step 1: Create Your Campaign

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

1 Sleeknote Dashboard

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

2 Where to Use

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.

3 Choose Campaign

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. 

4 Slide in

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

Click “Continue” to do so. 

5 Position Continue

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. 

6 Select a Template

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. 

7 Newsletter Template

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. 

8 Original

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

9 The Form Step

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.

10 Bigger version

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. 

11 Pre-header

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

12 Save Change

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

13 Original

…to this. 

14 New Pre-header

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. 

15 Layout Elements

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. 

16 Design Layout

Then, I can choose another background color here. 

17 Colour Change

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

18 Turqois

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

19 Color Save

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

20 Drag & Drop

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.

21 Divider

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

I’ll go with 16. 

22 Enlarge Divider

Then click “Save.”

23 Save Divider

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

24 Previous

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

25 Afterwards

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. 

26 Teaser

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

27 Original Teaser

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. 

28 New Teaser

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. 

29 Original Success Step

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. 

30 Change Text

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…

31 Before SS

…to this. 

31 After SS

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…

33 Show SS

…then clicking on “Just hide success step.”

34 Hide SS

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. 

35 Continue

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

36 Triggers

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

37 Page-Level

…and which targeting options you want to apply. 

38 Targeting Options

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.

39 Options

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

40 Continue

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

41 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.”

42 API Key

That’s it!

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

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?