How to Make a Pippity Popup

Pippity’s popup creator puts a lot of power at your finger tips. This part of the guide, however, is about getting your first popup created as quickly and easily as possible!

The popup creation process is 5 very simple steps:

  1. Select a base theme
  2. Customize your popup’s visual appearance
  3. Add your brilliant copy to the popup
  4. Set its behavior
  5. Connect your newsletter service

Although you’ll, no doubt, spend a great deal of time tweaking your popup to perfection, there’s no reason the above process needs to take more than 5-10 minutes your first run through.

Let’s get started!

Selecting a Base Theme

Creating a Custom Popup with Pippity
Creating a Custom Popup with Pippity

Here’s the wonderful popup creator! On the right is a sample of the popup you’re creating that updates in real-time. On the left is a list of all the themes available. Scroll through the list and mouse over a theme to make it appear in the test box to the right.

You can click ‘Show Full-Size’ to see an unconstrained view of the popup.

Once you’ve decided on a theme, click on it’s right-column-button to continue.

Styling Your Theme

Custom Opt-in Styles with Pippity
Quick Styles Make Getting Started Fast!

Pippity offers a World of customization. You can change colors, images, fonts – nearly everything!

But that can be overwhelming, so it also offers quick-styles: premade looks that you can use to get started immediately.

For now, just select a quick style. You can experiment with more options if you like, but we’ll cover those a little later on!

Adding Your Theme Copy

Each Popup has different text areas, but they all work the same: type in the box to immediately see how the text fits in your opt-in.

Adding Bulleted Lists

Editing a Custom Popup in WordPress with Pippity
See Your Copy in Real-Time and Easily Add Bullets

Any multi-line textarea allows you to easily add bulleted lists to your popup by simple preceding a new line with an asterisk (*).  If you’d like, you can also use HTML in any field.

Adding Images to your Popup

Many popup designs have  a spot for a product image and specify a recommended image size. To add an image, all you need to do is paste in a URL that links to the image.

To upload a new image, you don’t need to learn anything new – just click ‘Upload via WordPress’ and upload an image the way you always do. It will include a direct link to the image that you can paste in.

As always, you should instantly see your popup update with the new image.

Configuring Popup Behavior

Configure Your Custom WordPress Popup's Settings
You Control the Details in Pippity

Pippity offers a range of  settings allowing you to control exactly how your popup behaves for the end-user. Remember that Pippity allows for easy A/B testing (which we’ll cover next)! Experiment with these settings and see which perform best for you. Here’s a full list:

  • Time Before Popup Appears: This is the number of seconds a reader of your site must be on your page before the popup will appear. If you put 0, the popup will appear as soon as it has fully loaded (nearly instantly).
  • Open at End of Article: One of the key premises behind Pippity is that readers don’t convert well when they don’t like your popup. One of the major frustrations readers have is that popups interrupt them as they read. Turning this setting on makes it so that a popup only appears when they reach the end of your article.
  • Page-views Before Popup Appears: Some publishers find that their readers convert better when they’ve had a chance to get into the content. This setting makes triggers a popup only after a visitor has been to a set number of pages, making sure you don’t waste your opportunity with them.
  • Only Shown on Posts: This setting makes it so that your popup doesn’t appear on pages, post-listings or anything else that isn’t a post.
  • Fade Popup: Quickly fade the popup in and out
  • Animate Popup: Some themes allow a brief intro animation
  • Popup on Mouse-out: This will show your popup as the user’s mouse leaves the page – it can be useful for showing an offer to prevent them from leaving
  • Popup on Window Change: This shows your popup if the user switches to another tab or window. When they come back to your site, they’ll see your popup.
By default, Pippity will just submit your form directly and send your reader to your newsletter service (which may have a redirect back to your site set). However, Pippity also has 2 other methods of submitting the form that can be useful:
  • Submit in a New Window: This will submit the form in a new window or tab so that the page the reader was on previously is preserved for later.
  • Submit via AJAX: AJAX is a method of submitting a form in the background of a page so the user doesn’t have to be navigated to your newsletter provider at all. This is in many ways the most seamless method, however it’s important to confirm that this works in your use case, with your provider because if it doesn’t, the reader won’t see the newsletter provider’s error page.

Connecting Your Newsletter Service

Connecting Your Custom Lightbox to Newsletter Providers
Paste in Your Newsletter Provider's HTML and You're Done

All that’s left is going to your newsletter service, creating one of their standard opt-in forms and pasting it into the box provided by Pippity. It will instantly connect to your account. For more details on how to connect your specific newsletter service, check out our guides here.

That’s It!

Now you can head to your Pippity Panel, activate the popup you just made and you’re live! Ready to take things to the next level?