Trigger: Click Open -- Add Popup Maker Classes to Set a Trigger
This is the first of 5 articles that describe Click Open trigger-setting methods. Use this method when an HTML class can be added to a page element.
Use Plugin Classes to Set a Click Open Trigger
Whenever a popup is created, Popup Maker automatically generates 2 unique classes that begin with the prefix 'popmake-'. It then appends an integer value and the slug name to each class prefix. These class names allow one to specify which popup to display when a Click Open trigger is set.
The slug name can be changed in the Slug custom field. Open the All Popups admin page and select the Quick Edit option below the popup name to view and edit the field.
Related article: All Popups submenu
The following screenshot from the Popup Maker > All Popups page shows an example for a popup named Newsletter Opt-in Offer. The plugin-generated classes are visible in the CSS Classes column.
Add the appropriate 'popmake-{integer | slug }' class to any HTML element intended for a Click Open trigger. The class may be added to any area where content can be edited, such as the content editor of a page, post, custom post type, or text widget. Popup Maker detects the 'popmake-' class on the target page element and adds a new 'pum-trigger' class that's used to set the trigger.
Note: Do not add the 'pum-trigger' class to the HTML element. Allow the plugin to detect the 'popmake-' class and do that for you.
The following 2 code examples apply a 'popmake-' class to a string of text intended to set a Click Open trigger. The first example uses the value of 'popmake-{integer}' while the second example applies the value of 'popmake-{slug}'.
In both cases, once the plugin detects the 'popmake-' class, it automatically adds a class of 'pum-trigger'. The Click Open trigger is set and will fire when the targeting conditions set for the popup are detected.
<span class="popmake-13">Sign Up For Our Newsletter!</span>
View the source on GitHub.
<button class="popmake-newsletter-opt-in-offer">Sign Up For Our Newsletter!</button>
View the source on GitHub.
Related article: 'Targeting' option settings
Related article: Standard Targeting Conditions
Related article: Advanced Targeting Conditions Introduction