← Back to Blog

How to Make an ActiveCampaign Popup That’ll Drive More Leads

  • Conversion Rate Optimization

ActiveCampaign is an amazing platform that offers “integrated email marketing, marketing automation, and small business CRM.”

ActiveCampaign is an amazing platform that offers “integrated email marketing, marketing automation, and small business CRM.”

As of 2020, it was used by over 100,000 businesses to ignite growth and create an awesome customer experience.

It also happens to be a platform that integrates with Sleeknote, where you can create killer popups that crank up opt-in rates to keep a steady stream of new email subscribers coming in.

And that’s what I’m going to discuss in this post—how to make an ActiveCampaign popup, including screenshots every step of the way.

Here we go.

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 an ActiveCampaign Campaign on Sleeknote

To begin, you’ll need to start a new campaign from your Sleeknote dashboard, which can be done by clicking on “Create New Campaign” at the top left-hand corner.

That will take you to this screen, asking you to enter the URL of your website. 

Go ahead and do that, then click “Use this website.”

From there, Sleeknote will show you this screen asking what you want to use this campaign for.

Since we’re integrating Sleeknote with ActiveCampaign for an email campaign, select “Collect Email Addresses” on the left.

Tada! 

Your campaign is officially set up.

Step 2. Choose a Position

Sleeknote will then ask you where you want your ActiveCampaign popup to be positioned—the bottom left, center, or bottom right.

I’ll go with “Slide-In; Bottom Right” for this example.

Just click “Continue,” and you’re ready to go. 

Step 3: Pick a Theme

Now it’s time to choose from one of Sleeknote’s beautiful pre-built templates.

Currently, there are 50 of them, so there’s certainly no lack of options. 

For instance, there are themes for discounts and deals. 

There are themes for competitions and giveaways. 

There are themes for giveaways and to download free guides. 

And much more.

So I suggest taking some time to fully explore the theme options to see what your audience is most likely to be interested in. 

I should also point out that there are a handful of blank templates like these that allow you to build your own theme from scratch. 

For this example, I’m going to go with a pre-built theme called “Early Access,” which gives visitors the inside scoop on an upcoming product line in exchange for signing up for your newsletter. 

Here it is.

Step 4: Edit and Personalize Your ActiveCampaign Popup

At this point, you’ll see the default version of your ActiveCampaign popup, which currently looks like this.

Of course, Sleeknote allows you to edit and personalize literally every aspect of it so that it matches your brand and speaks to your exact audience.

Given that “67% of consumers say it’s important for brands to automatically adjust their content based on their current context for a real-time personalized experience,” this is something you’ll want to take full advantage of. 

And it’s super easy. 

Start from the “Edit” form step (it’s the first one that pops up) and click on whatever element you’d like to change.

I’m going to start by changing the font color, so I click this area, and the edit box appears. 

All I have to do is click on “Text Color” and choose the new color I want. 

I want something that really pops, so I’m going to choose this green. 

I just click on it and voila—the “Get Early Access” text goes from looking like this…

…to this. 

I like the way it looks, so I’m going to and change the rest of the font colors, as well as the CTA button background to the same shade of green. 

So, when I’m done it, looks like this.

Not too shabby.

And that’s just the tip of the iceberg.

With Sleeknote, you can customize whatever you’d like with your ActiveCampaign popup.

Say, for example, you wanted to promote your new line of jackets you’re selling.

You could easily switch up the headline here.

Just add the text.

And since it takes up more space, I’ll reduce the pixel size from 38 pixels to 32.

After making those edits, the ActiveCampaign popup now looks like this.

I’m also going to switch up the text beneath the header so that it jives with the message. 

I’ll say, “Get first dibs on new arrivals!”

Also, note that you can use a different image, change the image size, the alignment, and so on until you get what you want. 

Sleeknote makes it a breeze, and the learning curve is next to nothing. 

For an overview of all of the elements that are featured in your popup, click on the “Layout” form step.

This will give you a full rundown of what you’ve got, giving you a bird’s eye view and allowing you to seamlessly make edits. 

Say, for instance, you wanted to use a slightly lighter background color around the text, you would just click on “Container,” click on “Background Color” under “Background Options”…

…then choose the new color you want. 

I’ll go with this shade of gray.

Click “Save Changes,” and you’re all set. 

The third and final form step is “Add elements,” which is located here.

With this, you can add layout elements…

…as well as form elements and 3rd party apps.

For a quick demonstration, I’m going to add a divider between the email address box and the “Get Early Access Now” CTA.

All I have to do is drag-and-drop “Divider” to that spot.

Once I do that, I can adjust the height and width of the spacing to my preference.

I’ll adjust the height from 1 pixel to 5 pixels. 

Click “Save Changes” and here’s what the new ActiveCampaign popup looks like.

I’m happy with it, so it’s time to move on to the next step. 

Step 5: Modify Your Popup Teaser

A teaser is a small, condensed version of your ActiveCampaign popup that appears on the bottom of the screen.

When a shopper clicks on it, the full version of the popup appears.

And if they close the popup, the teaser goes back to its normal position.

This gives shoppers the chance to reopen the popup at any time and subscribe to your newsletter without making your e-commerce store look cluttered or annoying your shoppers.

Here’s what the default version of the teaser is for this popup template.

But just like when building anything else with Sleeknote, you can modify it completely.

So let me walk you through it really quickly.

First, I’m going to change the text and the font color so that it matches our popup. 

Click on each individual element to do so. 

I’ll go ahead and switch these to the same color of green I used in the popup. 

Bam! There it is.

Now, I’ll change the wording just a bit. 

There you go. 

Step 6: Edit the “Success Step”

Next, it’s time to tweak the “success step,” where you thank shoppers for signing up and let them know what they need to do next. 

“For example, if visitors have to confirm their subscription because you use a double opt-in, you can inform them here. A visitor is most likely to take action after having already complied with a request (like entering their email)—so make it count.”

Here’s what the default version of the success step currently looks like.

I like the message wording, so I’ll leave it as is.

But I’ll go ahead and change the font color to the same green I’ve used throughout this ActiveCampaign popup.

Again, just click on the individual element to do this.

Then, make the change. 

That’s all there is to it. 

But what if you don’t want to show the success step and would rather skip it?

To do this, click on the “Success Actions” drop-down box…

…then click on “Just hide success step.”

It will then say that this step is disabled, and you’re good to go.

Step 7: Start Wrapping it Up By Clicking “Continue”

At this point, the design part of your ActiveCampaign popup is done, and it’s time to put the finishing touches on your campaign.

To do this, click on “Continue” in the bottom right-hand corner.

Next, 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 8: Integrate with ActiveCampaign

We’re almost done—just one last order of business.

You’ll come to this page where you’ll want to click on the ActiveCampaign box right here.

Then, it’s just a matter of entering your ActiveCampaign API key and your API URL.

For step-by-step instructions on where to find this information, check out this guide from Sleeknote.

Step 9: Save Your Campaign

Once you’ve done with that, exit out of “Set Up Integration” and seal the deal by clicking “Save Campaign” at the bottom.

That’s a wrap.

You’ve just learned how to make an ActiveCampaign popup. Great job!

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

As you can see, you don’t need to be an expert designer to make an awesome popup that wins you boatloads of new subscribers.

With Sleeknote and ActiveCampaign, you can do it with virtually no design chops and zero coding skills.

Just follow the steps I’ve outlined here, and you’ll have a winning popup in no time.

What’s your number goal when making an ActiveCampaign popup?

Like what you read? Leave a comment