How To Re-Create Your Favorite Opt-In or Pop-up

4 Apr

Opt-In Pop-Up's

You’ve probably seen pop-up’s on almost every website that you’ve visited in the past 24 hours.

This is not a coincidence – SaaS startups, Enterprise sites, e-commerce sites and every organization in between all have one thing in common: they want you to opt-in to their product or service.

There’s a lot of benefits, but here are two important ones:

  • They are easy to implement
  • They lead to easy to understand results that can be tracked and analyzed.

Unfortunately, Pop-ups, and Call-To-Action’s are also considered one of the biggest annoyances to modern web users.

It’s a interesting seat to be sitting in…

One ear sympathetic to the marketers, CRO’s, and business owners who are just trying to get their message across… but one ear intently listening to the pains of your general users.

The obvious issue I see: People don’t like to be optimized… but Marketers need to run tests.

It’s one of the reasons why I built OptKit – a tool that aims to help you achieve your business goals without pissing off your users. This is a challenge I love trying to solve.

So here’s a hack you can use to create a popup on your website…

One that is less likely to piss your users off, and more likely to convert them into buyers or subscribers.

You can try using this little time saving trick when creating your popups or call-to-actions:

Find an example of a pop-up that you want to re-create. Maybe it caught your attention, if so that mean’s something about it is working. Visit some of your favorite “well known” websites to see what kind of pop up’s or opt-ins they are creating. If it’s a well known business, chances are they have the money to test designs.

The goal is to look for designs and copy that you think will resonate with your audience and inspire them to opt-in to something.

Sometimes the messaging can be the reason for an opt-in, sometimes the design…Sometime’s it’s just good timing. Most of the time, it’s a combination of all these things.

Using a highly trafficked website as an example is a good idea. By sheer volume alone, they can determine what works and what doesn’t quicker.

Using OptKit v3.0, when you find an awesome Pop-Up or CTA, it will only take a few minutes to re-create.

Step 1) Find the Pop-up or Call-To-Action (CTA) you want to recreate

Social Triggers is a huge blog, and I’ve been a reader for a long time.

Derek Halpern is the founder, and he has a great reputation for teaching people how to blog, create products, and stuff. He’s amassed tons of subscribers, and he is passionate about things like conversion rates of his blog.

It’s how he has built his business.. which I don’t think is just him anymore, it’s an entire team now.

Check out their popup:


Reading the copy: if you are in SocialTrigger’s target audience for this offer, then the answer is likely yes.

They give value with this popup, or ideally are intending to.. Which is an important aspect of any conversion focused message.

Depending on the audience, and the offer, I bet you can find an outlier or two for this scenario… but remember, we’re looking for ideas that are most likely going to convert, while not ticking your audience off.

If you hit close, it closes. If you hit “GIMMIE THE FREE EBOOK”, it sends you to another call to action:



Now, let’s outline one possible way to re-create these popups and the experience, using OptKit.

Let’s start with the first one.

Step 2) Visualize the structure of the call-to-action

I’ve outlined the elements in this pop-up into chunks that are easily made in OptKit:



Step 3) Create your OptKit account, and create a “Blank Template”

Login to your OptKit 3.0 account here, and goto Templates. You’ll see “Blank Template”, it looks like this:


Click “Install”, and you’ll be presented with the Actions tab of the Kit.

Now, the Call-To-Action / popup that SocialTriggers uses forces people to make a decision. It’s over top on the content, with a dark background, but a small bit of transparency in there, so you can see the website scrolls for users. Let’s get started re-creating this experience, and I will show you how to tweak it to make it a little less intrusive, if that’s your preference.

Change your Kit’s name to something easy for you to remember, and change the “Injection Type” to Page Overlay:


Click Save, and then click on “Creative” to see the Blank Template, and get started modifying it to our likings.

Step 4) Customize The Blank Template


For the Container of the popup:

  • Position it in the Middle Center of the screen
  • Leave the Image blank
  • Change the Height and Width
  • Set the colors to a black background, and the container to white.

Your Kit will now look like this:


Step 5) Create The Content Block

Let’s start by creating a content block that has some copy in it.. We’re going to be testing this Kit on the OptKit blog, so let’s adopt the copy for our purpose.



Your Kit will now look like this with the Preview button selected:


So far, so good. The font isn’t my ideal choice, but by default OptKit will adopt to your websites CSS stylesheets, so you can override them. I’ll leave it like that for now, because I want the font be the same as the text on the page.

Step 6) Setup the Buttons

There are two close buttons in this, and one Convert button. Goto the Buttons tab, and hit the “+” to insert a New Button. Here is a default one:


Set up and align each one as OCD as you need.

Grab an ASCII X‘s: (x, ×, X, ✕, ☓, ✖, ✗, ✘ ) for the text in your Close button.

Add a little custom CSS to the close button in the top right too:

border:4px solid black !important;


Here’s what I ended up with after about 3 minutes:



Make sure to ‘Save’, cause now we’re getting somewhere.


Set up a Website, and Install this Kit to view it on your website.


But right now, we need to make that 2nd popup, re-create that, and link them together for the real magic.


Step 7) Save & Copy This Kit



Let’s break down this next SocialTriggers popup:



So, we need to add a few things, and re-align a couple others. You can delete the one

Step 8) Create The Form Fields

Nice! So we have this now:


 Next, you need to add in another Content block. Place it over on the left.

Here’s a good hack for those of you who need to find images for testing: Dribbble Freebies or just searching for “Free” things directly on Dribbble

There are some awesome graphics you can find there, that designers have given away for free. Be sure to check out the license (if there is one attached).

I found a pretty awesome pack of images here, which I wanted to use the the Rocket graphic.

After uploading it to my server, I then user a simple “<img/>” tag within that Content block, and link to your graphic.. You can switch to WYSIWYG to Code editor on the Content block tab:


And with a couple moments of tweaking, here is what I ended up with:


Be sure to check your design on smaller width screens too!


You can see, the Rocket graphic gets cut off a bit. OptKit uses the Container of the element to keep in proportion.

If I didn’t like this issue (which, admittedly it’s a bit jarring on phones), I could either :

  1. re-align the items to the Rocket is inside the Container
  2. Create a separate Kit that has a Creative designated for small screens, and use a Rule to include or exclude the target devices /screen sizes.

But, the key elements are all there and working for all sizes, which is essential. It’s useful and usable.

So what now?

Time to make the Kit’s work together.

Step 9) Connect The Two Kits Together

Let’s set up the first Kit so it Triggers the second Kit on a Conversion (when someone clicks “Yes! Gimmie Conversions!” button on Kit #1)

Grab the “Short ID” of your 2nd Kit. It’s located at the end of the URL when you are editing it. For example, when you are editing your kit the URL looks like this:

1234 would be my “Short ID”.

Place that ID into this field on the first Kit’s Action Tab:



Now, every time someone converts on the first Kit, they will be immediately shown the 2nd Kit.


Neat, huh? But check it out yourself:

This was set up as a “Click” trigger on the above button.


Step 10) Connect Conversion Data

MailChimp expects FNAME and LNAME and email as your input names. You’d just have to name them accordingly.



Then goto the Actions tab, and scroll down. Right now there are only 2 official integrations, MailChimp and Zapier.

optkit-prog-7 otpkit-prog-6


For MailChimp, click “Grab Secret” to grant authorization.. Then you’ll see your lists populate the dropdown below that. As you can see here, I’m adding these leads to my OptKit Email List.

I also have some custom scripts running on the backend, and I need that data to point into my web server, just like a normal form that was on the page does normally.

On the same page, under “On Conversion” I add in the URL to my endpoint:


And if you notice, I just copy and pasted a tracking code too.

I’ll be placing Facebook and Adwords conversion pixels right there, so I’ll be able to accurately track my cost per lead for this form.

Once a lead converts on your Kit, it’s a perfect opportunity to lead nurturing.

Here are some awesome articles on lead nurturing:

Step 11) Decide Who Sees Your Popup

Under the Rules tab, you can specify the audience to display. For example, let’s only show this popup on the visitors very first page visit. That means we won’t annoy them too much..

But it’s also an interesting number to experiment with, depending on your offer.


Step 12) Decide When They See Your Popup

SocialTrigger’s seemed to have their popup triggers on what is known as “Exit-Intent” behavioral triggering.

Switch over to the Triggers tab, and you can set that up here:


The problem with this feature? It only works on mobile.

So instead, a universal Trigger example would be “Scroll Depth”:



There you have it.. We just re-created the SocialTriggers popup experience in just a few minutes.

Have any questions? Shoot me an email: [email protected]

Haven’t signed up for an account yet? Get started here.


If you liked this content, be sure to stay subscribed. How can you do that?

Try sharing this post with someone smart:
Email this to someoneShare on FacebookTweet about this on TwitterShare on LinkedIn