• Home
  • Conditional Pop-Ups

Conditional Pop-Ups

Pop-Ups and overlays are beneficial tools to assist with conversion and reduce bounce rates. They can convey simple information as soon as a page loads, direct a customer back to the sales funnel if they attempt to exit, and more.

Combined together with the If-So dynamic content capabilities, you can create conditional pop-ups and make sure you show the right message to the right user at the right time.

Creating dynamic pop-ups is an option that is added by our Trigger Events extensions. Click here to download the extension.

Conditional Pop-Up

If-So provides you the ability to show pop-ups to all site visitors or to set conditional pop-ups that will be displayed based on the vast range of conditions that If-So and its integrations have to offer.

For a full list of the conditions

Use Casess

Conditional pop-ups can be used in many different cases.

Ask visitors if they would like to browse the site in another language based on their Browser Language or Geolocation:

Thank customers and gain feedback after a purchase of a certain product on your site or other WooCommerce conditions:

Show special offers on local holidays, based on the users’ geolocation:

Schedule conditional pop-ups to be displayed during special events

Pop-Ups can be shown when the page loads or after an on-page event

Pop-ups can be displayed to all the users or based on conditions.

In addition, pop-ups can be displayed right when the page loads or only if an on-page event has occurred:

  • Click
  • Scroll
  • Inactivity
  • Delay
  • Exit intent

You can find more information about on-page events on our Trigger-Events extension page.

How to create pop-ups using If-So

Creating Pop-Ups with If-So is quick and easy. Each If-So trigger can become a pop-up by adding a simple parameter to the trigger’s shortcode.

To create your first pop-up, simply:

  1. Download and install the Trigger Events extension
  2. Add the parameters ajax=”yes” and display=”modal” to the trigger’s shortcode.

The shortcode below is an example of a shortcode with the parameters:

[ifso id="777" ajax="yes" display="modal"]

To set up a pop-up that will be displayed while a page loads – Place the content of the modal in the default content version of the trigger

To set up a conditional pop-up – Set the content of the modal in version A and set a condition

Setting up a pop-up that will be displayed after an on-page event has occurred

If-So allows you to display the pop-up after the occurrence of one of the following on-page events:

  • Click
  • Scroll
  • Inactivity
  • Delay
  • Exit intent

Similar to displaying the trigger as a pop-up, this functionality is achieved by adding parameters to the trigger’s shortcode.

For example, the shortcode below will display the dynamic content on exit intent (if the user hovers the cursor outside of the browser window):

[ifso id="777" ajax="yes" display="modal" eventType="exit-intent"]

Click here to learn more on-page events

Designing your Pop Up content

WE KNOW… if you’re not familiar with HTML and CSS, designing your modal content within If-So might not be that simple. No worries, we have two possible solutions for you:

  1. Design the Pop-Up with your Page Builder and apply it to If-So using a shortcode 
  2. Use our pre-built HTML templates

Design the pop-up content with your Page Builder and apply it to If-So using a shortcode

If-So gives you the option to display any page or post content on your site using a simple shortcode.

To design your conditional pop-up using your page builder, simply create a new page (or post), design the pop-up content, and apply the page’s content inside If-So using the following shortcode:

[ifso-show-post id="123"]

*Make sure to replace the post ID (123 in our example) with the post ID of the post you want to display.

Use one of our pre-built templates

Choose one of our pre-built templates and adapt them to your needs. Just replace the images, text, and colors with your own content, and you’ll be ready to go. Learn more.

Close the pop-up using a button instead of the default top-right corner “X”

By default, the user can close the pop-ups by clicking the background overlay or the closing X at the top-right corner of the content.

If you want to override this option, add the parameter closebtn=”” to the Trigger’s shortcode. The value of the parameter should be a Class or ID of an element that you wish to turn to the closing button of the pop-up.

Make sure you add the whole sector, including the dot or the # before the name. For example:

[ifso id='393241' ajax='yes' display='modal' closebtn='#PopUpClose']
Ready to get started?
Try it on your website