Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
This is a para in a column. The inner column is set to 600 px wide.
But that setting doesn’t look like it works.
This is a container block. This container should have a max width of 600 px and a min of 280 px. And that works! 🎉
Launch RC Ajax popup
You’ve got a popup with a link. You want to make sure to close a popup after clicking the link. You’ve come to the right place.
If you’ve got a popup that has a link to another page, this guide shows you how to do the following:
1) Open a page in a new tab.
2) Close a popup after you click the link.
Heads up! If you want to open another popup instead of a page in a new tab, go to Launch a Popup from a Popup or When a Popup Closes.
We’ll begin with a popup that has a simple link that opens a page in a new tab. Here’s what that HTML could look like.
<a href="https://www.website.com" target="_blank" rel="noopener">Link Text</a>
Here’s what we should see when we have a similar link in our popup, and we click on it.
As you can see, a page opens in a new tab, but the popup stays open in the first tab. That’s only half of our goal.
Edit your link as HTML.
Add the Popup Maker CSS classes popmake-close and pum-close to your a tag (link tag). These classes tell Popup Maker to close a popup when we click a link that have those classes.
Here’s our link now.
<a class="popmake-close pum-close" href="https://www.website.com" target="_blank" rel="noopener">Link Text</a>
Here’s a demo of what we should see after adding those 2 CSS classes.
OK, cool. Our popup is closing now. But our new tab isn’t opening anymore. What gives?
That leads us to the next step. We told Popup Maker to close a popup with 2 CSS classes. The missing ingredient is to tell Popup Maker to also open the link (i.e., do the link’s default behavior).
Add the pum-do-default class or use the data-do-default attribute to your a tag to open the new page.
Example 1: Here we add the pum-do-default class to open the link.
<a class="popmake-close pum-close pum-do-default" href="https://www.website.com" target="_blank" rel="noopener">Link Text</a>
Example 2: In this example, we add data-do-default="true" as its own link attribute to open the new page.
<a class="popmake-close pum-close" href="https://www.website.com" target="_blank" rel="noopener" data-do-default="true">Link Text</a>
Publish or Update your popup to save your changes.
Putting it all together, here’s what we should see after doing step 2.
There we have it. The link in the popup opens a page in a new tab, and then Popup Maker closes the popup in the original tab. Mission accomplished 🎉
Which way is better? Both and neither. They’ll do the exact same thing. It’s just a matter of preference whether you want to use a data attribute or a CSS class name.
We can also open a page in a new tab and close a popup using Popup Maker’s Popup Close Button shortcode.
You can add the Popup Maker close button shortcode via the Popup Maker shortcode button menu in the classic editor’s toolbar.
If you don’t see the shortcode button menu in the toolbar, make sure your Popup Maker Settings > Misc > Disable the Popup Maker shortcode button setting is not checked (it should be off by default).
From the shortcode button menu, click Popup Close Button.
In the General tab, do the following:
a for the HTML Tag._blank in the Target for the element field.
In the Options tab, check the Do not prevent the default click functionality setting (turn it on). Then, click Save.
Remember to click Publish or Update to save your changes.
This post tells you what is a cookie, how Popup Maker uses cookies, and gives you some best practices for making cookies more secure.
Let’s start with a typical scenario.
You go to a website and sign up for a newsletter. You’re happy.
Then, a minute later, you see another popup asking you to subscribe again. Hmmm, déjà vu?
Nope. More likely, the site didn’t remember that you just signed up.
A cookie (i.e., a browser cookie) is a standard tool for websites to remember things, such as launching popups. It’s sorta like saying, “Hey, website. I just signed up for your newsletter. Please don’t ask me to sign up again 😉.”
Here’s the more technical definition of “what is a cookie” straight from the Popup Maker glossary of terms (TO-DO: Add the new backlink, OLD link https://docs.wppopupmaker.com/article/484-popup-maker-glossary-of-terms#cookies).
Cookies are small files (about 4 KB) that a browser can create on your computer to store information. Cookies help keep track of your website session.
If you’re a developer, dive deeper into cookies on the Mozilla Developer Network.
Popup Maker lets you set up cookies to remember when popups get opened. That means you can tell Popup Maker to display a popup only once per visit (session cookie) or month. Popup Maker will check for any relevant cookies before opening a popup.
Going back to our example. When you use Popup Maker to build your popup, you can stop it from showing again after it displays the first time.
In the screen capture below, we ask Popup Maker to create a cookie once the popup closes.
When you do that, your subscription popup will always check for that browser cookie before opening. If the cookie is there, your popup won’t open.
Cookies are safe when you follow best practices. Let’s look at an example and follow up with security guidelines.
For example, when you log into a WordPress site (/wp-admin/), the site stores a wordpress_sec_[somereallylongstringofcharacters] cookie. We’ll call this the “auth” cookie.
In the screen capture above, WordPress created the “wordpress_sec_e2d04861…” cookie to store:
That’s pretty cryptic already, and we haven’t even gotten to securing the auth cookie yet. Let’s cover that now.
In our example, securing the auth cookie boils down to setting the following properties:
Check out the screen capture again. You can see the auth cookie is valid only for the website domain “wildebeest…” (my test site) and content under the “/wp-admin/” path.
Restricting the cookie to where it can work is an excellent way to begin creating a safe cookie.
For that same auth cookie, you see a checkmark in the Secure and HttpOnly columns. Let’s explain them separately because they can be confusing.
If a cookie’s Secure property is on, it’ll work only on sites that start with “https” in their URL.
Putting it another way, we can say that browsers cannot create and store Secure cookies for sites that don’t start with “https” in their URL.
Here are 2 examples to bring that point home.
Here’s an example of a secure website URL.
Secure: https://wppopupmaker.com/
Since this website URL starts with https, network connections to the website are encrypted or secure.
Below, we have a cookie from an HTTP site. We turn on the Secure and run JavaScript (JS) code to test if the cookie exists. We see the “Cookie exists!” success message which confirms the cookie is there and JS can read it.
Here’s an example of an unsecured website URL (vulnerable to attack).
Not secure: http://mynotsoawesomeweb.site/
Websites not using https are vulnerable to the so-called manipulator-in-the-middle attack (MitM).
Because browsers cannot create cookies with the Secure property turned on, Secure cookies are never exposed to the MitM attack.
In this next demonstration, we have a cookie from an unsecured HTTP site. When we turn on Secure, the browser immediately deletes the cookie because Secure cookies cannot exist on an unsecured site.
When the HttpOnly property is on, JavaScript cannot mess with it (e.g., hijack your session, steal your info, or run nasty code). That means the HttpOnly setting denies cross-site scripting (XSS) attacks.
In this last demo, we turn on HttpOnly and then use JavaScript to try to read the cookie. You’ll see a “Cookie does not exist message.” from the JS code even though the cookie is there. Note: This will work on HTTP and HTTPS websites because we don’t turn on the Secure property.
Popup Maker NEVER stores personal or login session details in popup cookies.
Popup Maker only uses cookies to stop showing a popup so you can avoid annoying your visitors.
Here’s what a typical Popup Maker cookie looks like in the web browser.
Note: If you manually create a custom popup cookie, don’t set the HttpOnly flag. Otherwise, Popup Maker cannot read your cookie, and it will keep popping up for people who’ve already seen it 😬. Also, if you set the Secure flag, make sure your site has SSL to allow the browser to save your cookie.
As you can see, cookies can store personal info or login session details. What’s saved in a cookie depends on the site you’re visiting. If a cookie with your private details isn’t set up securely, malicious people can write code to steal your data.
Here are the best practices we covered in this post.
This article’s featured image comes from the author.
Want awesome in your inbox? Sign up for the newsletter!
[fluentform id=”3″]
This guide shows how quickly you can create beautiful and professional popups using Popup Maker and Beaver Builder. Check out this quick demo.
TO DO: Quick recap of the demo.
TO DO: State the goal of the steps below.
Follow these simple instructions, and you too can enrich visitor experience and drive conversions on your site with engaging popups.
Let’s dive in!
Start by creating a new layout or choosing a pre-made template.
Copy the shortcode for your saved Beaver Builder layout.
Create a new popup or edit an existing one.
Paste the shortcode into the popup editor to add your Beaver Builder layout to your popup.
Set up a popup trigger to make the popup appear on your website.
Be sure to add an Extra CSS Selector, e.g., .go-bb-popup. We’ll add that to your Beaver Builder button in a sec.
Optionally, add a cookie to control how often a visitor sees the same popup.
If needed, add a targeting rule to specify where the popup should appear (e.g., a specific post or page).
Save or publish your changes to make the popup live on your website.
Remember that Extra CSS Selector that you added back in step 5?
TO DO
TO DO
That’s it! Just follow these steps to create and set up your popups.