How to manually trigger Confetti on any page with a click

Confetti has the ability to be triggered when an element is clicked but it requires some added custom code to make it work. By default, the JavaScript which powers Confetti is only included on pages that have the block/shortcode in use or automatically detected with one of the plugin integrations available. The first step is to enqueue the Confetti plugin on all pages (or specific pages) so it can be available for use.

Enqueue Confetti JavaScript

add_action( 'wp', function(){
    WPS_Confetti()->enqueue_scripts();
});

You can target specific pages with the following:

add_action( 'wp', function(){
    if ( is_page( 'yourpage' ) ) {
        WPS_Confetti()->enqueue_scripts();
    }
});

Check out WordPress Conditional tags for more precise targeting.

Once we have the Confetti JavaScript loaded on the page(s) needed, next is to add the trigger. You can do this by adding the class “wps-confetti” to any element or with JavaScript.

Trigger with CSS

<div class="wps-confetti">Clicking this will trigger your Confetti</div>

If you are using the Block Editor/Gutenberg, you can add a class to an element in this setting:

Alternatively, you can use JavaScript to trigger the Confetti event:

<div onclick="document.dispatchEvent( new CustomEvent( 'confetti' ) );">Click me div</div>