PopUp Onclick Creation Tutorial + Popup Plugin Review (2021)

All the web-sites need effective instruments for spreading their popularity and broadening the circle of auditory and subscribers. To reach this goal the webmasters could upload PopUp WordPress plugin by Supsystic. Its functions allow displaying really useful information connected with the topic of the page the visitor loads in not irritative or annoying way. The PopUp onclick could offer subscribing or contact form, display the familiar products or services. It also could be the form of live chat or the form stimulating for some consultation.

Checkout: RoundUp of Best Lead Generation Plugins for WordPress

The engaged users would find it useful.

  • Firstly, because it is connected with the topic they are interested in.
  • Secondly, because it would appear in some part of the page, where the core information wouldn’t be closed. 
  • Thirdly, it wouldn’t close the content of the page.
  • Fourthly, it would add but not interrupt, and the users may take in the information the PopUp contains.

How to Make a PopUp Pleasant, but not Annoying

Of course, the webmaster should be aware how to load the PopUp on the site to make it not irritating but useful. Here we offer core settings how and where display it:

  • Don’t let it appear at once, when the user loaded the page
  • Activate it after users’ inactivity, when the page runs to asleep
  • Activate the PopUp when the users make some activities, for sample, buy your product or leave the comments.   
  • The PopUp should appear with scroll window
  • Activate it when the visitors leave your web-resource
  • It should appear when Ad-Block detected
  • PopUp would be actual if “On link” is activated

The most important in its location is the appropriation. Think over, considering your site peculiarities before sitting it. The webmaster should also think about the frequency of its displaying and some other details:

  • Whom to show the PopUp?
  • On which kind of pages should it be displayed?
  • What form should it be?
  • What is its concrete purpose?

Considering all this, load and benefit from it.

How To Get More Subscribers? Check video:

Avoid Typical Mistakes Displaying your PopUp

Don’t forget about the closing button. It really irritates the site visitors, when they can’t close the PopUp. It runs to the leaving the page without returning. You will have a minute or even less to attract users’ attention, so that make efforts to offer to them some interesting engaging facts with short intrigue text. The text should spark to subscribe to your site or to make really needful purchase. Using PopUp plugin by Supsystic you could create the design of PopUp whatever you wish, locate in any part of the site and add social buttons stimulating your visitors to share information in the networks.

Don’t make typical mistakes asking the visitors many questions in your PopUp. Don’t expect them to be happy answer your list of questions. Your PopUp would be viewed less than one minute, so keep within this time to spark, but not put off the users.

One of the core things is asking for e-mail of the users. It would allow you to contact the users and engage them into the sphere of your site, making different propositions until they become not only regular visitors, but also the customers of your product or services.

Setting your Popup in a proper way you would attract your customers and increase the amount of the subscribers. Clicking on any certain element: button, image, link or smth else you open it. It would be shown in an appropriate place without brutal interruption from the content viewing!

The Instruction How to Set the PopUp Correctly

For corrected PopUp setting you are to copy the php code or the shortcode and add the page of your website. We give short recommendations how to do it. It’s easy!

Do you want to make your popup visible on the page with clicking on the content link?

  1. Open main settings of WP Popup plugin by Supsystic
  2. Open “When to show PopUp” and then select “Click on certain button / link / any other element
  3. Take the short-code from 1-st field of the option and copy it.
  4. Open the post where the PopUp should be. Select the text for the link.
  5. Then choose the “Insert/edit link” button in the text editor, put the PopUp short-code to the needful URL field
  6. After this press the button “Apply”

This way is proper when you’re doing link editing using WP admin area (Post editor)

Your link would be looked by this way:

<a href=”http://[supsystic-show-popup id=385]”>the text for the link</a> (insert here your shortcode id instead of 385)

To set PopUp in the code, for sample, in the theme template, use the php code.
You would receive the link like you see below:

<a href=”<php echo  do_shortcode(‘[supsystic-show-popup id=385]’)?>”>the text for the link</a>

The knowledge of the bases of HTML lets you set onclick PopUp on any element of the web-site.

When you’ve selected “Click on certain link / button / other element” in the block “When to show PopUp”, Take the code from the 2-nd field:

It will look like this:

onclick=”ppsShowPopup(385); return false;”

The webmasters could also select such options as displaying PopUp only to those visitors, who are at the site first time. At any case when the plugin is forced to check anything due your requirements, the following code should be used in settings:

onclick=”return ppsCheckShowPopup(385);”

Using onclick feature out the content of the page or post you are to add special code for loading the PopUp to your site, without this the PopUp wouldn’t be added to the website server. Here is the needful code:

if(class_exists(‘dispatcherPps’)) {

dispatcherPps::addFilter(‘popupCheckCondition’, ‘supsystic_include_example_popups_condition’);


function supsystic_include_example_popups_condition($condition) {

$addPopUpsIds = array(385);

$condition .= ‘ OR id IN (‘. implode(‘,’, $addPopUpsIds). ‘)’;

return $condition;


You are to submit the code to the theme php files (it may be, for example, functions.php). Doing this you will upload the PopUp to the web-site server and it would appear on the needful place of your web-site page.  


READ  Best Live Chat Plugins for WordPress Website 2021

Output PopUp shortcode means the incorrection in the templates or inserting ways. The problem would be solved easily with two ordinary actions:    

  1. Add the following code to the theme php files. For sample, to the footer.php or to the other element:

<?php do_shortcode(‘[supsystic-show-popup id=”385” load=”1″]’)?>

2. Set the href parameter of the link to:


And you’ll receive the following link:

<a href=”#ppsShowPopUp_385“>the text for the link</a>

After this your PopUp will be loaded from the database and then displayed on your link click.

Follow the instructions for Popup usage in the Menu item

      • Open main settings of WP PoPup plugin by Supsystic.
      • Open the block “When to show PopUp”, select “Click on certain link / button / other element”.
      • The 3-rd code of the option should be copied.

It would be looked like this: – #ppsShowPopUp_385

      • Load Appearance -> Menus in wp-admin of your website: 
      • Open Menu Structure and paste code into the field “Title Attribute”:

      • Menu changes should be saved.

Press “On Link Follow” in “When to show PopUp“ menu to display the Popup with opening the web-site by link. You may display PopUp on link follow using time delay.

In Conclusion

The conversion of the web-site becomes higher with PopUp which is set correctly. It’s important to create original design of it and choose the most favorable place on the page, where it should be displayed. Make your plan what text and what data would appear in your PopUp and increase the audience of your resource just now.

Leave a Comment