How to trigger the confetti effect on click

You can fire confetti from any button or link by giving it a CSS class. Most blocks in the editor have an Additional CSS class(es) field under Advanced, which is all this needs.

Add the class

Give the element the class wps-confetti and it fires your Default effect when clicked.

wps-confetti

To use one of your saved effects instead, add its ID:

wps-confetti-instance-my-effect

To keep the Default effect but swap in a different style, name the style:

wps-confetti-style-fireworks

You can combine the two, which runs a saved effect with a different style:

wps-confetti-instance-my-effect wps-confetti-style-fireworks

Data attributes do the same thing if you’d rather use them, with data-wps-confetti-instance and data-wps-confetti-style.

Confetti only loads its scripts on pages that use one of these, so pages without one stay untouched.

Using a core Button block

A Button block has a setting of its own, so you don’t need the CSS class there. Select the button, open the Confetti panel in the sidebar, and pick an effect. How to add confetti to a Button block covers it.

Triggering it from your own code

If you’re firing confetti from your own JavaScript, put the shortcode on the page with onload set to false so the scripts load without the confetti running by itself.

[confetti onload="false"]

Then call the launch function whenever you want it:

wps_launch_confetti_cannon();

You can also load the scripts from PHP instead of the shortcode:

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