Show popups based on previous one shown

Hi @adamwrethinkfirst,

Thanks for describing the expected behavior of your popups.

Here’s what’s happening:

Popup A:

• When clicking x: It’s closing
• When clicking the “close popup A and open popup B” button: Popup B doesn’t appear.
  • Fix: Please add the CSS described in this page: Your Popup Is Not Displaying on Your Homepage (or Another Page)

Popup B:

• When clicking x: It’s closing
• When clicking the “close popup B and open popup A” button: Popup A doesn’t appear because the button is only instructed to close. See here: https://share.getcloudapp.com/Wnu6nkB0
  • Fix: Please add Popup A’s class to the button instead similar to how Popup A’s button is set up.

Let us know how it goes!

Thank you @kimmyx that worked. Steps 1-3 from my original post are working…

1. Show Popup A
2. Popup A button is clicked (would automatically close) or closed manually with top right “X”
3. Show Popup B

…but is it possible to get 4 and 5 working as well?

4. Popup B button is clicked (would automatically close) or closed manually with top right “X”

5. Repeat steps (Show Popup A)

Also, can there be a 24 hour delay before steps 3 and 5 (showing the other popup that wasn’t closed).

Thank you.

Hi @adamwrethinkfirst,

We tested your popups again and 4 and 5 seems to work as intended.

The popup closes and the button or “x” is clicked.

See our test here: https://share.getcloudapp.com/5zuO6YWG

Also, can there be a 24 hour delay before steps 3 and 5 (showing the other popup that wasn’t closed).

The only way to control this would be via cookies. Please read about setting cookies here: ‘Cookies’ option settings – Popup Maker Documentation (wppopupmaker.com)

Hope that helps! Let us know if you have more questions.

Hi @kimmyx , clicking on Popup B is not opening Popup A for me. Here is a video recording showing the Popup A button clicked, which closes itself (Step 2) and opens Popup B (Step 3), and then Popup B button clicked which closes itself (Step 4) but does not open Popup A (Step 5) as intended.

Thank you for the Cookie options link, I will take a look.

• This reply was modified 1 year, 3 months ago by awright.
• This reply was modified 1 year, 3 months ago by awright.
• This reply was modified 1 year, 3 months ago by awright.

Hi again @kimmyx I tried setting up a new set of popups, Popup A2 and B2 (on right side of page I need help with) and tried using script found on ‘Cookies’ option settings – Popup Maker Documentation (wppopupmaker.com) but it’s not working, it hides Popup A2 immediately on page loads and does not wait 3 seconds to show B2.

Here is the code I added, #popmake-15307 is Popup A2 and #popmake-15310 is Popup B2:

<script type="text/javascript">
        (function ($, document, undefined) {
    
            jQuery('#popmake-15307').trigger('pumSetCookie');

            setTimeout(function () {
                jQuery('#popmake-15307').popmake('close');
            }, 1000); // 1 second

			setTimeout(function () {
                jQuery('#popmake-15310').popmake('open');
				alert("it has been 3 seconds, popup B2 should open");
            }, 3000); // 3 second
			
        }(jQuery, document))
	</script>

• This reply was modified 1 year, 3 months ago by awright.

Hi @kimmyx , following up.

Thank you.

Hi @adamwrethinkfirst ,

Thanks for the patience.

We’ve created a step-by-step guide on setting up the desired behaviour.

1. Set Popup A to Auto Open when the site is visited: https://share.getcloudapp.com/xQuNPnBQ
2. Set Popup B to open after Popup A is closed or the button in it is clicked: https://share.getcloudapp.com/2NuWdwJv

3a. Set Popup A to open after Popup B is closed or the button in it is clicked: https://share.getcloudapp.com/4guRw2AP

3b. Set Popup A to open X seconds/minutes/hours/days after Popup B is closed: https://share.getcloudapp.com/qGuYPEXX

Here’s the JavaScript snippet for the delayed open:

jQuery(document).ready(function ($) {
    // Change the number 737 to your popup B's ID number; Change 735 to your popup A's ID number.
    $("#popmake-737 .popmake-735-delayed-open, #pum-737 #popmake-737 .pum-close.popmake-close").click(function(event) {
        setTimeout(
            () => {
                // Change 735 to your popup A's ID number
                PUM.open(735);
            }, 3000 // Popup opens after 3 seconds;  Adjust the timing as desired
        );
    }); // click
}); // jQuery

Here are some helpful guides:

• Getting Started With Custom JavaScript:
  https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
• Launch a Popup from a Popup or When a Popup Closes:
  https://docs.wppopupmaker.com/article/554-launch-a-popup-from-a-popup-or-when-a-popup-closes

Let us know if that helps.

• This reply was modified 1 year, 2 months ago by Israel Martins.

Hi @israelmartins , thank you very much. Everything is working except delaying the opening of Popup B. I tried switching the IDs in the JavaScript, but Popup B still opens immediately after closing A.

Here is how it is set up:

Popup A (ID: 15307, CSS Class: popmake-15307)

Text: Test popup A2 [popup_close tag=”button” class=”popmake-15307-delayed-open”]close popup A and open popup B[/popup_close]

Trigger: Type = Time Delay / Auto Open, Cookie = None, Settings = Delay:500

Popup B (ID: 15310, CSS Class: popmake-15310)

Text: Popup B2 [popup_close tag=”button” class=”popmake-15310-delayed-open”]close popup A and open popup B[/popup_close]

Trigger: Type = Click Open, Cookie = None, Settings = Extra Selectors:#pum-15307 #popmake-15307 .pum-close.popmake-close

JavaScript

jQuery(document).ready(function ($) {
    // 15307 = Popup A2
	// 15310 = Popup B2
   $("#popmake-15307 .popmake-15310-delayed-open, #pum-15307 #popmake-15307 .pum-close.popmake-close").click(function(event) {
        setTimeout(
            () => {
                PUM.open(15310);
				alert("waited 3 seconds now opening B");
            }, 3000 // Time to wait in miliseconds (1000 = 1 sec) before opening new popup;  
        );
    }); // click
	$("#popmake-15310 .popmake-15307-delayed-open, #pum-15310 #popmake-15310 .pum-close.popmake-close").click(function(event) {
        setTimeout(
            () => {
                PUM.open(15307);
				alert("waited 6 seconds now opening A");
            }, 6000 // Time to wait in miliseconds (1000 = 1 sec) before opening new popup;  
        );
    }); // click
	
}); // jQuery

• This reply was modified 1 year, 2 months ago by awright.

Hi @adamwrethinkfirst ,

To also delay Popup A from opening, you have to remove the Click Open Extra Selectors added to Popup A.

See this demo: https://share.getcloudapp.com/ApulwR79

We also refactored the code snippet for you:

jQuery(document).ready(function ($) {
// 759 = Popup A2
// 760 = Popup B2

// Opens a popup after a delay
const delayOpenPopup = (popupID, delay) => {
    
    setTimeout(
        () => {
            PUM.open(popupID);
        }, delay // Delay in miliseconds (1000 = 1 sec) before popup opens 
    ); // setTimeout

};

// Open Popup B 3000 milliseconds after it is triggered
$('#popmake-759 .popmake-760-delayed-open, #pum-759 #popmake-759 .pum-close.popmake-close').click(function() {
    delayOpenPopup(760, 3000);
}); // click

// Open Popup A 6000 milliseconds after it is triggered
$("#popmake-760 .popmake-759-delayed-open, #pum-760 #popmake-760 .pum-close.popmake-close").click(function() {
    delayOpenPopup(759, 6000);
}); // click

}); // jQuery

Here’s the link to the snippet source.

Let us know if that helps.

Thank you @israelmartins that is working for a single page. Is it possible to work on all pages of a website? For example:

1. User is on Home page and Popup A opens
2. User closes or clicks Popup A (which closes it and starts timer for Popup B to open 24 hours later)
3. 24 hours later user goes to About Us page and Popup B opens

Thank you,

Adam