Click Trigger Settings Cheat Sheet

Click Trigger Settings

Popup Maker provides General and Advanced options for your Click Open trigger.

Under the General settings, you can:

  • Add extra CSS selectors to launch your popup
  • Choose which cookies you want to prevent the repeat displaying of your popup

In the Advanced settings, you can enable the browser's default click handling. 

To get to these settings, you'll need to edit an existing Click Open trigger or add a new one.

This cheat sheet will cover these settings.

General

After adding or editing a Click Open trigger, you'll see the Click Trigger Settings modal window. The General settings display by default.

Extra CSS Selectors

Add any valid CSS selector here to target an HTML element, so your popup will display when you click on that element.

For example, if you want a popup to display when you click on a specific paragraph tag (<p>), you can add a CSS class called launch-popup to that paragraph tag.

Here’s what the HTML code would look like.

<p class="launch-pop">Click to launch a cool popup.</p>

Once you add .launch-pop to the Extra CSS Selectors setting, your popup displays whenever there’s a click on a paragraph tag that has the launch-popup class.

Popup Maker Click Trigger Settings Extra CSS

Give it a try using our free demo site.

Pro tip: If you want clicks on other elements to display the same popup, add those element’s CSS selector class or ID to the Extra CSS Selectors settings separated by a comma. E.g., .launch-popup, #my-cool-button, .launch-this-popup-too

Learn more about adding multiple selectors in our beginner's guide to popup triggers.

Not only can you add CSS class and ID selectors for your triggers, but you can add what's called link attribute selectors.

In the Extra CSS Selectors input field, click on the left arrow icon  to see the link options.

Popup Maker Trigger Settings Link selector options

Select the Link option you want from the dropdown. 

Change the placeholder in between the double quotes (") to the link you want to match. In the example below, you would change the word contains to the word you need to match inside the link you want to trigger your popup.

Extra CSS Selector Link attribute placeholder

Check out our detailed guide to learn more about how Popup Maker's 4 link options work.

You can also head over to CodePen to play around with a live demo of these 4 link attribute selectors.

Pro tip: Do you want to save time finding the CSS selector you need to add? Then, you need to try out our handy Get Selector tool in our top admin bar. Learn more in our Getting CSS Selectors help guide.

To set the Cookie Name field, you'll need to have a cookie set up for your Click Open trigger. 

No worries if you don't have a cookie yet. Popup Maker conveniently lets you add a new cookie for your trigger right from the Cookie Name setting field.

Click the Cookie Name input field. Select an existing cookie or Add New Cookie if you don't have one yet.

Popup Maker trigger Cookie Name setting

Popup Maker will have a default cookie named pum-nnn (where nnn is the popup's ID number) ready for you to use. Or, you can provide a custom name for any cookie you set up.

Get the full details for creating popup trigger cookies in our Cookies options guide.

Advanced

Sometimes you'll want to have a download link that also launches a popup. Here's an example of what that HTML would look like.

<a class="popmake-331" href="http://twenty-twentyone.local/wp-content/uploads/2021/08/download.pdf" download="Download PDF">Download a file and launch a popup.</a>

If you want a link for a Click Open trigger and have that same link download a file, no problem. You'll need to click on Advanced and enable the Do not prevent default click functionality checkbox. See below.

Click Trigger Settings: Advanced

With that option enabled, the code above can now launch popup #331 (trigger popmake-331) and simultaneously open a file download dialogue window (download attribute). 
If you didn't check that option, only the popup would show. The file download wouldn't display.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.