Advanced Features

Customizing When the Confetti Plays

By default, when adding the Confetti Code to your page, it plays the Confetti animation on page load.

But what if you want to customize when the play will be triggered? (for example, on a button click or when a popup appears).

There are a couple of ways to do it, and we'll cover just that.

Triggering on Button Click

You can activate the Confetti Animation when a button is clicked.

The essential part is to tell ConfettiPage what button should trigger the play.

To do that, choose one of these methods:

Method #1: Element ID

Specify the button ID in the form below. (IDs start with hashtag # symbol. Example:) #button-123 (Can be changed to any ID you'd like).

Some platforms give specified ID, while in others you can specify the ID name yourself.

Either way, the ID should be unique and you should add it to the form below.

Note: you can use multiple buttons by having different IDs. Simply separate with comma in the form below. Example: #button-123, #button-456

Method #2: Element Class

Give the button the classname of:

.confettipage-play-button (This classname is final and cannot be modified).

Note: You can have as many buttons or elements you want to trigger the Confetti play. Just make sure to add the classname to the element.

Choose either method and then fill this:

You'll need to fill this and use the install Confetti Code on the page where the button is:

Triggering Elements (multiple seperated by comma):

Paste your Confetti Code here:

Note: Custom classes are supported too. Simply attach .your-class-name to the Triggering Elements input in the form above.

Triggering on Elementor Popup

If you're using Elementor Popup and you want the Confetti Animation to take place when the popup is opened, paste your Confetti Code down here and you'll get a modified Confetti Code that you should install instead:

Paste your Confetti Code here:

(This solution is based on Elementor's Popup Events API)

Custom Trigger (for Developers)

If you're a developer, you might want to play the Confetti animation manually when an event occurs in your app (Button click, for example).

Simply follow these two steps:

Step 1: Prevent the initial auto-play of the Confetti

Option A (Automatic code editing):

Paste your Confetti Code here:

Option B (Manual code editing):

Add the attribute data-trigger="custom" to the Confetti Code <script> tag.

Your modified Confetti Code should look like this:

<script
    src="https://run.confettipage.com/here.js"
    data-confetticode="..."
    data-trigger="custom"
></script>

Step 2: Manually Play the Confetti Using JavaScript

Call this function whenever you want to trigger the animation play:

window.ConfettiPage.play()

Or run this HTML code:

<script>window.ConfettiPage.play()</script>

Note: It is possible to call it multiple times. On each call, the previous Confetti will be destroyed and a new Confetti instance would appear.