For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks – Go To https://CFninjas.com
Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge
Alright, let’s dive into this quick hack. Someone in the Facebook group asked how to set up multiple popups on a page in ClickFunnels. I’ll show you how to do this easily by reusing the same popup. Instead of creating entirely new popups for each situation, we’re going to use one popup and switch out the content depending on which button you click. This method lets you keep everything streamlined and easy to manage.
Let’s start by looking at our popup settings. You can trigger the popup to appear in a few ways: on exit intent, on page load (after a set amount of time), or when an element becomes visible. You typically only want to use one of these triggers to keep things straightforward. In this example, we’re going to focus on exit intent since it’s one of the most popular triggers—perfect for catching people who might leave the page without taking action.
Now, within the popup, I’ve set up three sections: one for exit intent, one for button A, and one for button B. To control which section displays, we’ll assign custom attributes to each section. For example, the exit intent section has the attribute `popup=exitIntent`, while button A and B each have `popup=buttonA` and `popup=buttonB` respectively. This way, our code knows exactly which section to show based on which button is clicked.
For the buttons, I’ve also added custom attributes. When button A is clicked, the code targets `trigger=buttonA`, and for button B, it targets `trigger=buttonB`. These triggers help us manage what displays inside the popup. When someone clicks one of these buttons, the associated section of the popup will be shown, and the others will stay hidden. This way, each button click dynamically updates the popup content without creating new popups each time.
The code to handle this is pretty simple. First, we’ll hide any sections in the popup that contain the text “button” in their attribute. This makes sure that the exit intent section is the only one visible initially. When someone clicks on button A or button B, the corresponding section will display, and everything else will stay hidden. This prevents multiple sections from appearing at once, keeping things neat and focused for the user.
Lastly, if someone clicks to close the popup, we reset it to show the exit intent section again. This setup is flexible enough to handle various triggers and lets you customize the popup experience without creating multiple popups. It’s a straightforward but powerful approach to keep your page clean and engaging for visitors. Let me know if you have questions or need help implementing this on your own page!