Trigger popup on Javascript events

convertables
popups
trigger

#1

It would be useful to have an option to trigger the popup via a Javascript event.

I have tried simulating the click on an element via jQuery, but that does not fire the trigger.

Hotjar has something similar and I would love the ability to trigger popups via Javascript in Unbounce too!


#2

Hi @winbig,

The workaround that I think you’re trying (use a click trigger, and click the trigger element via JS in your event handler) is the one I’d recommend. We do expect that to work, and we even use it in the Unbounce app. If it’s still not working out for you, can we see your page and popup, or a small example of what you’re trying? I can help out here, or you can open a support ticket if you’d prefer.


#3

Hi @emears,

I had opened a support ticket but I can’t find it anymore.

By the way here is a test page: https://checasino.it/test
The first link triggers a click on the second (as you can see in the console), and the second triggers the popup, but only when clicked manually.

I’d be happy if I could get this workaround to actually work, and I would be even happier if you would consider adding that as a feature so that no workaround is even needed :slight_smile:


#4

Hi again!

This is a jQuery quirk, which surprised me when I first saw it too! jQuery’s trigger('click') is only triggering a click on the jQuery-wrapped element, as opposed to the underlying DOM element, which is what our script is expecting. I’m not sure why it’s jQuery’s behaviour to run the onclick handler, but not pass the click event down to the DOM element, but I guess that’s just how the library is. Some more details here: https://stackoverflow.com/questions/20928915/jquery-triggerclick-not-working

If we rewrite the first link’s click handler to fire the event using plain JS, it will work: window.ubtrigger = () => document.querySelector('#triggerme').click();. You should be able to just run that in the console on your page and then see the first link working as expected. Alternately, you can select the element via jQuery and then get the DOM element from the jQuery object: jQuery('#triggerme')[0].click().

Hope it works out for you! I’ll pass on your feature request.

PS: Your test page was really clear, thanks for that!


#5

Hi @emears,

thank you, I was able to get it working with your suggestion!


#6

I need this functionality, too. I would like to have a JS variable storing the value ‘true’ when users pass certain parameters. I then want the popup to only trigger when the variable == true.

The popup feature in unbounce really needs a JS trigger component, to make it much more dynamic and useful.

(It might also be a good idea to put a fail-sale ‘off’ JS trigger, so we can rest assured that if the variable equals false, or 0, it will prevent the popup for showing, even if the on trigger is firing.)


#7

Hey @ajsim,

There is actually a way to accomplish this. The script below will prevent a popup from showing when the returned value is false. Within the “shouldShowOverlay” function you can perform a check for your parameter and determine whether to return true or false.

<script>
 window._ubeConfig = window._ubeConfig || {};
 window._ubeConfig.shouldShowOverlay = function() {
   // Perform check here
   return false;
 }
</script> 

Place this script on your host page to control the appearance of the popup. Let me know if you’ve any questions.


#9

Full post on the available javascript API hooks here