A Beginner's Guide to Manually Creating Cookies
Popup Maker gives you a few standard ways to create a cookie for your popup. For example, you can have your popup create a cookie for these built-in events:
- After a popup closes
- Right when a popup opens
- When someone submits a form that's in your popup
But what if you need to set a cookie in a way different from those standard options?
No problem. That's where our Manual cookie creation setting comes in.
Using the Manual cookie creation setting lets you customize when your popup should create a cookie. For example, you might want a "Don't show this again" checkbox on your popup that allows people to dismiss the popup for the rest of their visit.
This guide walks through the steps for you to manually create a cookie for your popup. Here we go!
NOTE: The custom code in this example will automatically create any Manual cookie set up in your popup. So, if you have more than 1 Manual cookie, all cookies get created when the code runs.
See Pro Tip 2 for an example of how to selectively (or conditionally) choose a specific cookie to create.
Setting the Stage #
We're going to create a Time Delay / Auto Open popup that has a checkbox for your visitor to click if they don't want to see the popup again.
We'll need to:
- Add the checkbox to our popup.
- Set up the popup trigger and cookie.
- Write the custom code that "manually" creates our cookie.
Add the Checkbox to Our Popup #
Step 1: Edit your popup.
Step 2: Add your content using the popup editor.
Step 3: After you add your content, switch to the Text tab if you're not already there.
Step 4: Copy and paste the HTML code below.
<form id="dismiss-popup-form"> <div> <input id="dismiss-checkbox" name="dismiss-checkbox" type="checkbox" value="dismiss-popup" /> <label for="dismiss-checkbox">I don't want to see this again</label> </div> </form>
Here's what that code will display on a web page.
Set Up the Popup Trigger and Cookie #
Step 1: Scroll down to your Popup Settings and click Add New Trigger in the Triggers tab.
Step 2: Select Time Delay / Auto Open from the dropdown and click Add.
Step 3: Check the Prevent popup from showing to visitor again using a cookie? setting (checked is the default).
Step 4: Select Manual in the Stop showing popup once visitor takes this action dropdown.
Step 5: Keep the default Delay time (500ms) and default Cookie Name, then click Add.
Step 6: Find the Manual cookie you just created and click the pencil icon next to it.
Step 7: Change the Cookie Name from the default
nnn is your popup's ID.
Step 8: We're going to change the Cookie Time from the default 1 month to 1 year. Then, click Update.
Here's what your Triggers tab should look like so far.
Step 9: We won't set up any targeting rules so this test popup can appear on every post and page. We'll also keep the default display settings just to save time.
Step 10: Click Publish or Update on your popup to save your changes.
Write the Custom Code #
We're in the home stretch ;-)
Step 1: Copy this code snippet and paste it into your child theme's functions.php file or use a code snippets plugin that supports PHP. Learn more in our Getting Started With Custom PHP guide.
Step 2: Edit the snippet you just pasted. Every time you see 1234 change it to your popup's ID number. Save your functions.php file or publish your code snippet if you're using a plugin.
Step 3: Flush all of your caches. Bring up any post or page on your site. When your popup appears, click on the I don't want to see this again checkbox. Then, reload that same post or page or go anywhere else on your site. Your popup should not display again 😉
Pro tip 1: Want to close the popup when someone checks the dismiss checkbox? Add the Popup Maker CSS classes
pum-close to the checkbox input HTML code. For example:
<input id="dismiss-checkbox" class="popmake-close pum-close" name="dismiss-checkbox" type="checkbox" value="dismiss-popup" />
Pro tip 2: What if you want 2 checkboxes and set a different cookie depending on which checkbox you click? For example, checkbox 1 dismisses the popup forever (1 year) and checkbox 2 dismisses the popup for the current session.
In that case, you'll need to add another manual cookie and add another event listener. You need a dedicated event listener for each checkbox. Using the original code example, replace this line in each event listener
$('#popmake-1234').trigger('pumSetCookie'); // Change 1234 to your popup ID.
with this line that manually sets a custom cookie.
$.pm_cookie( `pum-1234-never-see-again`, 'true', '1 year', '/' ); // The max you can set in Chrome is 400 days.
Change the first parameter to the correct cookie name you've set up in your popup. Change the expiration (e.g., 1 year) to what you need.
The new line of code manually sets 1 cookie to whatever name and expiration you want (selective). The original line you replaced fires an event that creates all Manual cookies you set up in your popup (all or nothing).
See the full code example on GitHub.
What if it doesn't work?
Please see our basic troubleshooting tips for PHP related problems.