How to create a pop-up content upgrade in WordPress

Are you at the point where I am right now with all the social media webinars? Even in best case scenario and you get tons of followers, how do you turn those followers into actual sales and business?

How do you serve them?

Are they the people you want to serve?

Do they need what you offer?

Here’s what I’m learning – last month and now – Funnels.

Isn’t that lovely? Funneling people through like numbers. Just come over here so I can stamp the back of your striped uniform. Put you in funnel A. And serve you lunch B. But don’t worry you’ll love it. Cafeteria style salisbury steak cold gravy and mashed fake potatoes with soft peas. Mmmm.

Um. No. No. No. No.

But yes.

Funnels are a crude way of saying segmentation.

We want to meet the needs of each customer, right? And most of us are trying to get more customers and more readers. Or at minimum spread our reach and message. People nowadays do not like sales. At all. I don’t. You don’t. No one does.

To be the one someone considers when they are ready to buy requires a few things: top of mind, previous ‘touch points’, enticing solution to their problem, ridiculous value.

[clickToTweet tweet=”‘be the one your customers consider when THEY are ready to buy’ #onlinebiz #blogging #marketing #PR” quote=”‘… be the one your customers consider when THEY are ready to buy…’”]

How do we do/provide/be all that?

Through authority, branding and relationships.

So whenever anyone comes on the site be sure it is branded. Be sure your content is authoritative, accurate, current and entertaining or at least valuable.

And be available to develop relationships with each person who comes by the site. You have time, c’mon I know you’re in your jammies on the couch with a hot chocolate!

Just for fun, let’s pretend you do not have time to individually nurture a relationship with each of your lovely peeps. Let’s pretend I don’t know… that you run a business.

Let me tell you about a change I made about four weeks ago that increased my opens by 30%.

On a whim, I created an email I call “Heart to Heart for business women” cause I just get a lot out of sharing what I learn and encouraging other women in business. I mean business women who are long past the “I’m 20 – hear me roar!” thing.

I made a pretty graphic and linked it up to my regular list.

And I completely did a 180 on my poor list recipients. Instead of talking about websites, plugins and security risks, I began over-sharing personal details and crying.

GUESS WHAT? People unsubscribed. I’m dying over here. It sounds quite simple when you write it down, but in my head it was a fantastic idea! 

So I decided that perhaps I should segment the Heart to Heart emails into a different list. And last Friday the email that some of you got, only went out to my lovely Heart to Heart ladies.

The open rate was over 40% which is incredible!! 

My conclusion, ahem, is that I’ll develop better relationships if I deliver the type of content that I promised. Shocking, I know!

When you sign up and graduate from all those webinars get your first 100000,00000 followers, send them to your website to sign-up for your emails. But not any email. Be specific and earn a relationship with the kind of value that they’re looking for.

I’m going to show you exactly how to do that in WordPress.

How to Create a Pop-up Content Upgrade in WordPress

If you click on the Heart to Heart sign-up above, you’ll see the pop-up that we are going to create.

This pop up will work for the top 9 email services that connect to gravity forms. The list of services is here.

We will be using Mailchimp, Gravity Forms, and Easy Fancybox although there are lots of other services, paid and free.

What you will need:

[list style=”style1″]
[li]Gravity Forms[/li]
[li]Email service – like Mailchimp[/li]
[li]Easy Fancybox plugin[/li]
[li]Opt-in Incentive[/li]
[/list]

Summary of Steps:

1. Create content upgrade. Upload it to Dropbox or file host. Copy download link.
2. Create the image (or text) that once clicked, will initiate the pop-up.
3. Create the Gravity Form to Accept Name & Email.
4. Deliver Content Upgrade through Gravity Forms.
5. Link your mail service to the new Gravity Form. Test.
6. Install & Create the FancyBox.
7. Add the form to your fancybox. Place that code in your post.

Easy enough? Lets go through an example, and I’ll expand on the Gravity Forms settings you’ll need.

By the way – we do offer assistance through any of our tutorials. You’ll just have to pay us for it. But we don’t mind you doing that. 🙂

Step 1 – Create your content upgrade.

I learned about content upgrades from Amy Porterfield. Here’s the two podcasts I recommend:

[list style=”style4″]
[li]Cultivating a List Building Mindset[/li]
[li]Growing a Lucrative Email List[/li]
[/list]

Most of her podcasts include a content upgrade, what she calls a ‘Freebie’. And they are great examples of a content-upgrades – they add value to the topic and are inline with her business. All the content points to the fact that it would be amazing to work with her!

So create your content piece, and include something valuable that is worth someone’s email. Be sure that it is so valuable that your new subscriber will want to see what you will do next.

[info_box type=”note_box”]TIP: Create each post and upgrade inline with what your services/products[/info_box]

If you are a Coach or Therapist, your upgrades could include beautiful mindset printables.

If you sell children’s clothing, you could write about kid-proofing the home and include a checklist for download.

Once you have your content upgrade, you’ll need to host it on a file server – like Amazon or Dropbox. It is usually not a good idea to host it on your WordPress site because you’ll easily run out of bandwidth.

Dropbox has a sharing link where anyone with the link can download. If you use Google Drive – just be sure to change the settings so that ‘anyone with the link can see it’ and then use the sharing link.

[info_box type=”note_box”]TIP: See that dl=0 at the end of the URL? That means that it will not open. It will download to the user’s computer. If you wish your content upgrade to be viewable on click, simply change the 0 to a 1.[/info_box]

Step 2: Create the Pop-up Image or Link

Once I have my pdf ready to go, I need a clickable image. It can be something as simple as a “Download Here” button or a more elaborate version of your download.

Keep in mind, the download is a pdf. The image is a jpg and is not the download. It is just a representation of the download.

I used PDFill to create this image of my pdf.

The download is uploaded to the file server: dropbox. The image is uploaded to WordPress, so I can use it in my post.

Step 3: Create the Form to accept the Name & Email.

We’re ready to capture the email so we can send it to MailChimp. Let’s create that form using Gravity Forms.

Forms > Create New

Just drag over the First Name and Email fields into place.

Confirm that the settings are correct. Whatever is in the Title and Description fields WILL show up in your pop-up. They don’t have to – but they will in our example.

Step 4: Create the confirmation IN GRAVITY FORMS for the download link.

You can technically send the download direct from MailChimp OR from Gravity Forms. I prefer gravity forms. Every time you create a content upgrade, you will be creating a new form and new download links.

If you do this through MailChimp it becomes a LOT more complicated (segmenting into auto-responders).

For this example, we will use Gravity Forms with the text confirmation. So the confirmation will appear where the form was. If they cannot see this (on a phone), we will also email them a copy.

1. Confirmations: Click the Fields box (see red arrow) and you can insert their name to personalize the ‘thank you for signing up’ confirmation. And then give the download link.
2. Notifications: Create the email and include the thank you text and a link to the download, as promised.

Step 5: Link your mail service to the new Gravity Form. Test.

It is remarkably easy to connect Gravity Forms and MailChimp.

1. Open Mailchimp and go to your Account > Extras > API Key, generate and copy your API key.
2. Upload the Add-on MailChimp using your plugin tab – just like any other plugin. Activate.
3. Navigate to Forms -> Settings and paste API key.
4. They’re now connected. Next we connect the actual form to the right list.

After your Confirmations and Notifications are set, go to the MailChimp tab. We are going to create a feed – think of it like a cable that connects the two platforms and send the data back and forth.

Click “create one”. This will let you select which list (from your existing MailChimp lists) you wish to send these emails to. It will also let you select groups and segments, if you have any. Which is perfect!!

And this is where you can send different emails to different segments for use in Mailchimp. You can then create auto-responders within MailChimp to go to each segment or grouping.

Home stretch here!! 🙂

The only things left to do are create the pop-up and stick it in the post!

Step 6: Create the FancyBox for the Gravity Form.

This is the easy part! And why I also looooove Easy Fancybox. Fancybox is another name for the pop-up script that makes the thing pop up. Expand. Grow. There’s really no other way to say pop-up. Pop-up.

• First – search, install and activate Easy FancyBox plugin by RavanH.
• Navigate to Settings > Media > Easy Fancybox settings.
• Make sure that inline-content is checked.
• Edit other options to your heart’s desire.

Now the fun part!!

Venturing into the dark side: TEXT TAB!!! Does anyone besides me know that Killer Shark music? What was that movie called? Back in the old days when real things were scary. JAWS!!

Open the Text tab and scroll to where the pop-up will go.

Put this code where you’d like your content pop-up to work. (This will also work in your widgets if you prefer.)

Change the areas in BOLD:

<a class="fancybox-inline" href="#MYID">
<img src="https://wpbarista.com/wp-content/uploads/my-pic.jpg" alt="mypic" />
</a>

<div class="fancybox-hidden" style="display: none;">
<div id="MYID">[ gravityform id="xx" title="true" description="true" ]
</div>

Flip to the visual tab, save draft and preview.

Don’t forget to test that the form is accepting emails, that the email is getting into Mailchimp, and that the recipient receives the confirmation immediately, and also the promised upgrade!

I need a drink.

[info_box type=”note_box”]By the way – all the downloads in today’s tutorial are available from the Free Download library. 😉 [/info_box]