Ever get bombarded with coupons, discounts, and offers at your home’s mailbox? You quickly glance at the stack of papers only to ditch them all in your trash bin (well, hopefully, the recycle bin ♻️).
Then you’re left to wonder, “Why do companies send out all these promotional offers, anyways?”
We’ve got the answer for you:
Because they work.
But the unfortunate truth is that most business owners are missing out on revenue because they’re not offering the right type of promotions to the right type of customer.
Fortunately for you, we know a better way to do this (which doesn’t include cutting down trees for pamphlet paper, either). That’s why, in today’s post, we’re going to teach you how to offer popup coupons to visitors on your site.
More specifically, we’re going to cover:
- Which popup coupon app should you use?
- How to create a popup coupon with OptinMonster
- Welcoming new visitors or retaining exiting customers with a coupon popup
- Creating a coupon code popup for WooCommerce and Shopify online stores
By the end of this article, you’ll fully understand how giving just a little discount can mean getting a lot of revenue in return.
Let’s jump in.
Which Popup Coupon App Should You Use?
There are a lot of tools out there for creating generic coupon popups, but not all of them will get you the results you’re looking for.
Some of your website visitors will find intrusive popups annoying.
If you don’t want to annoy potential customers, it’s important to offer discounts in the right way. A popup coupon at the right time can make your clients feel like they’re part of an exclusive “in-group.” In other words, a well-targeted campaign makes users feel special.
With OptinMonster, you can offer coupons in the right way, at the right time, to the right people which is, after all, the holy grail of marketing.
That’s because OptinMonster has advanced targeting features, allowing you to show coupons on specific pages, to specific visitors, at specific times, and in specific locations.
Hello, holy grail.
You can target coupons by device and show certain popups based on visitors’ activity or inactivity. Your popup coupons can also be used as powerful tools to reduce shopping cart abandonment when used with exit-intent® technology.
And you can combine our advanced targeting rules to be ultra-precise about who sees your popup coupon. For example, you could show your coupon only to shoppers in a specific location with geotargeting or to visitors who clicked on a specific ad.
Unlike a WordPress coupon plugin, OptinMonster works on any site, no matter what content management system you’re using. That includes the industry-leading eCommerce solutions like WooCommerce, Shopify, Magento, BigCommerce, and others.
But enough talk. Let’s get to the good stuff. Here’s how it works…
How to Create a Popup Coupon
In today’s tutorial, we’ll be using OptinMonster. If you haven’t already done so, go sign up for OptinMonster to follow along.
All signed up? Ready to go?
Good. Let’s get started.
Step 1: Create Your Campaign
In this tutorial, we’re going to recreate a popup coupon similar to this one from BaubleBar. Use this as a starting point for creating your own. However, you should also know that there are tons of ways to customize this coupon. For instance, we’re offering a discount, but you could easily offer free shipping instead.
For more examples to inspire you, check out all the coupon popups in our exit-intent® popup gallery.
To get started, log in to your OptinMonster dashboard and click Create Campaign:
Choose a campaign type. For this tutorial, we’re using the Lightbox Popup:
Choose a template for your popup. There are more than 30 professionally-designed templates to choose from, with different layouts and color schemes.
We’re going to use the Coupon theme. Find it by scrolling through the available themes, or type “coupon” in the search box to find it fast:
All OptinMonster templates are flexible and fully customizable. If you prefer to design your own form in HTML, you can use OptinMonster’s Canvas technology to implement it.
Give your campaign a name, choose the website you’ll use the popup on, and press the Start Building button:
Step 2: Customize Your Popup Coupon
Whichever campaign type you’ve selected, the next step is to customize the design and the copy so it meets your needs.
After you press Start Building, you’ll be taken into OptinMonster’s amazing drag and drop campaign builder. You’ll see a live preview of the default coupon popup on the right and the editing tools on the left.
Take special note of the Save button in the top right corner of the builder. Use it often. ?
Our BaubleBar example has a different headline and body text and is a different color. Here’s how you do that.
Click on the headline to bring up the element editing tools on the left. Then, type your new text in the text box. You can format the text with the available tools.
Your headline will be the one big thing you want people to know about your offer, like the “Take 15% Off” statement in the BaubleBar example.
Use the same method to edit the body copy. You can add more details of the offer, and what visitors have to do to get it, such as enter their email address.
We’re not going to use an image in our popup, but adding an image to your optin is really easy. Click on +Add Blocks, then drag and drop the image element to the live preview.
Images usually reflect your business, the offer you’re making, or both.
But if you struggle to find professional photos, there are also plenty of places to get attractive images for free. Check out our guide to 39 Places to Find Images for Better Conversions.
Now we’re going to change the background color of our popup from yellow to white to brighten it up. That happens in Optin Settings » Optin View Styles.
There are 2 ways to get there quickly:
- Click on the Home icon in the builder
- Click on the Design tab
That will get you directly to the home menu where you can access the rest of the editing tools easily. Again, we want to go to Optin Settings » Optin View Styles.
Once there, we’re going to change our background color to hex code #ffffff. You can do tons of other things too, like add an image, overlay color, or a border.
Click on the submit button in the live preview to bring up the Editing Fields Element menu on the left. Here you can edit your optin fields and button formatting and actions.
Change your button text by clicking on the Button tab and typing your text in the Button Text field (we’re using “Get Started Now”). This is the call to action, which is the one thing you want visitors to do to take the next step.
If you struggle with writing copy (even for buttons), check out our guide to writing the perfect call to action for more inspiration.
Step 3: Set Up Delivery of Your Coupon Code
Once you’ve finished the basic design, it’s time to think about how your customers will get their coupons after they hit the submit button. There are several ways to do this.
At OptinMonster, we recommend that you deliver it immediately via our Success view and also send it by email. You’ll need to enable your email service provider integration for this to happen automatically.
You can also use the Success View to:
- Type in the coupon code on the success view as shown above. You can edit this in the same way as the other parts of your campaign.
- Alternatively, redirect visitors to a new page where they can redeem the coupon.
The Success view is already set up as the default button action. This means that you don’t have to change a thing in your button action and your optin will show visitors whatever Success message you design in your Success View.
If you want to change your button action to do something else, like send visitors to a different page once they optin, you’ll need to change the button action.
Don’t worry, it’s really easy.
After you’ve edited your button text, click on the Action section.
Click the dropdown under Form Success Action to see the actions available – there are quite a few of them!
Select Redirect to a URL and type your URL in the Redirect URL field. This is really handy for sending users back to a checkout page to use the coupon you’re giving them.
You can also use a coupon link as the redirect URL, which will apply the coupon automatically when visitors arrive at the target site. Here’s how you create those via Shopify and WooCommerce coupon plugins. And be sure to check out our list of the best WordPress plugins and tools or best Shopify apps for more.
Step 4. Publish Your Popup Coupon
The final step is to save your changes, then publish your campaign. To start the publishing process, click on the Publish tab to see publishing options, then toggle the status button to make it live.
You’ll need to install our WordPress plugin to get your popup coupon on WordPress. Once you’ve done that, go to the OptinMonster section of the WordPress dashboard, and click Refresh optins. You’ll see the name of your new campaign, and you’ll also be able to see if it’s live.
You can also use the sitewide embed code, which you can grab by clicking on a button. Give this to your web developer to make your OptinMonster integration live, or do it yourself by following this guide.
And you can use the campaign-specific embed code to embed your popup coupon only.
Here’s what your final coupon will look like:
This is a great start. But let’s kick things up a notch by targeting certain customer behaviors.
Choose Display Rules to Welcome New Visitors or Say Goodbye to Leaving Visitors
Now you have a published coupon popup on your site. However, it is currently on the default Display settings.
While those work great for most people, other business owners like to go the extra mile for their customers. They prefer to either greet new customers with a welcome offer or try to retain customers who are leaving. Let’s quickly take a look at how you can do either (or both!).
When you’re happy with the look of your popup coupon, it’s time to choose when and where visitors will see it.
To do this, go to your campaign’s dashboard and click the Display Rules tab:
You have several options for displaying your popup coupon. First, we’ll make the coupon welcome your guests:
How to Welcome Guests with a Popup Coupon
You can see your popup campaign’s default is After X Seconds rule, which ensures that visitors always see your campaign after they’ve been on your site for a while. But you may want to be more aggressive and deliver your promotion immediately.
Luckily, the default settings only need a few changes.
In the first field, you’ll want to keep the condition time on page. In the next field box where it says is at least, you’ll want to click the option is immediate:
Then, underneath, you’ll want to change your OnSite Retargeting rules to make sure you’re only welcoming new customers with your coupon:
Now you have two rules in place:
- Visitors will immediately get your coupon popup promotion when they reach your site
- Only new visitors will see this popup
This is a wonderful way of converting new, cold leads into lifelong customers who return to your site on a regular basis.
Oh, and one last thing: don’t forget to hit save.
But maybe you want to take a different approach. Rather than welcoming new guests with a coupon to keep them on your site longer, perhaps you want to use your discount to prevent people from leaving your site.
How to Capture Customers Who Are Leaving Your Site with a Popup Coupon
One of our highest-converting options is a popup with exit-intent®. This ensures that your popup coupon appears when visitors are about to leave your site. This strategy is proven to reduce abandonment, which means more revenue for you.
And the best part? It’s super easy. Like… it’s almost ridiculous how easy it is.
Check this out:
Go back to your Display Rules dashboard and change the first setting to exit detected:
You’ll notice on your right, you can change the amount of sensitivity your exit-intent® campaign uses. Most campaigns are successful with Medium, but you may want to play around with that feature until it’s just right for you.
From there you’ll want to… wait… nope. That’s it. You’re done!
As we said, it’s ridiculously simple.
But don’t feel like you should limit yourself to just that. You can get creative and add multiple display rules for your visitors. You could:
- Promote the coupon exclusively for visitors from mobile
- Have the popup appear when your guests have scrolled through a certain percentage of your page
- Only show the coupon popup on a specific date or time
- Put the popup offer on certain pages of your site and exclude it from others
- Share your coupon popup with your email list using shareable MonsterLinks™
And so much more.
When it comes to targeting your audience with a coupon popup promotion, the sky really is the limit. All it takes is a few minutes and a bit of creativity to see more revenue start rolling through.
How to Create a Coupon Code with WooCommerce and Shopify
As we already mentioned, there are tons of eCommerce platforms you can work with. But in this tutorial, we want to show you how to create a coupon code with the two biggest players in the market: WooCommerce and Shopify.
Creating a Coupon Code URL with WooCommerce
First, you’ll want to sign-up for WooCommerce with your WordPress account. This will make getting started much easier.
You’ll also need to make sure you’ve installed and activated your WooCommerce plugin. And from that point, you’ll want to go to WooCommerce in your WordPress dashboard and click Extensions:
Then search for URL Coupons:
Once you purchase this extension, you’ll be able to create a unique coupon URL. Go to WooCommerce in your WordPress dashboard and click Coupons:
Now click Add New Coupon:
And in the general description fields, you can create your custom coupon URL:
This is the URL that you’ll want to put in your coupon popup. To do that, go back to your campaign’s dashboard in OptinMonster and insert your coupon URL in the Redirect URL for your call to action (which we covered earlier in this tutorial):
And that’s it! So let’s say you were offering first-time visitors 30% off a marketing course, your campaign may look like this:
When your users click your call to action (Start Now), they’ll be redirected to the checkout with the coupon code automatically applied.
Now that we’ve covered how to do this with WooCommerce, let’s repeat the process for our Shopify users.
Creating a Coupon Code URL with Shopify
Shopify makes sharing your coupon URL codes incredibly simple. In fact, you don’t need to do anything with your WordPress site for this. Simply head over to your Shopify store dashboard:
Click Discounts:
And Create discount:
You’ll be prompted to choose between creating a Discount code or an Automatic discount. For this tutorial, click Discount code:
Then you can modify the conditions of your discount code:
When you’re finished, scroll down and click Save discount code:
Scroll back up to see your confirmation message. In that message, you’ll see an option to Get shareable link:
Click on that to view your new coupon popup code URL:
Now you can insert that link in your popup campaign in your OptinMonster dashboard just like we did earlier with WooCommerce:
And just like before, your call to action will now redirect your users to their shopping cart and automatically apply the discount. ?
A Few Closing Words
That’s it! Hopefully, you gained some insight into how to make your coupon popup campaigns work for your business.
If you enjoyed this tutorial, check out our guide on how to engage with AdBlock users to unlock lost ad revenue, and see our email marketing guide for more tips on using email to connect with your customers.
Those cover some related topics that will help you engage with current and potential customers.
But do you think we missed anything in this coupon popup tutorial? If so, let us know on Facebook or Twitter. We’d love to get your feedback!
And for other killer tutorials, head over and subscribe to our YouTube channel.
Not using OptinMonster yet? Get started today and start converting more visitors into customers today!
