How to trigger the confetti effect on click

By default, the confetti effect shows when the page is loaded. However, you can have the confetti triggered when any element on your page is clicked.

You will need to start by putting the shortcode anywhere on the page using the ‘onload’ attribute:

[confetti onload="false"]

This will include all the necessary confetti JavaScript files and your configuration settings.

Two ways to manually trigger confetti

Use pre-existing class

If you add the class “wps-confetti” to any element, it will trigger when it is clicked. Example:

<div class="wps-confetti">Click me to trigger confetti</div>

Custom JavaScript

You can use any custom JavaScript you want and use the wps_launch_confetti_cannon() function. Example using jQuery:

$( '#my-element' ).on( 'click', function() {
    wps_launch_confetti_cannon();
});

This could be customized to trigger the confetti cannon on any interaction you want such as click, hover, etc.