Confetti: a burst for buttons and thank-you pages

How to use it

1. Add the script

<script src="confetti.js" defer></script>

2. Add one attribute to a button

<button data-confetti>Sign up</button>

The confetti shoots out of the button when it is clicked. It works on links and any other element too.

Three effects

Confetti on a thank-you page

Put this on the body tag of the page that visitors see after an order or a sign-up. It fires once when the page opens.

<body data-confetti-onload="sides">

Options

<button data-confetti
        data-confetti-count="200"
        data-confetti-colors="#ffd700,#ffb300,#ffffff"
        data-confetti-shapes="star,circle">
  Claim your prize
</button>

Emoji instead of paper

<button data-confetti data-confetti-shapes="🎉,⭐,🎈" data-confetti-count="60">Party</button>

Use it from JavaScript

This is what you need after a form was sent or a payment went through.

Confetti.burst();                              // from the middle of the window
Confetti.burst(document.querySelector('#buy')); // from an element
Confetti.burst({ x: 0.2, y: 0.5, count: 200, spread: 120 });

Confetti.sides();                              // two cannons
Confetti.rain({ seconds: 5 });                 // falling confetti
Confetti.clear();                              // remove everything at once

After a form was sent

form.addEventListener('submit', function (event) {
  event.preventDefault();
  sendForm().then(function () {
    Confetti.sides({ colors: ['#7c5cff', '#22d3ee', '#ffffff'] });
  });
});

What it takes care of

• It never blocks a click. The confetti layer lets every click and tap through to your page.
• It cleans up. The canvas is created for the burst and removed when the last piece is gone. Between bursts the script uses nothing.
• Reduced motion. Visitors who switched off animations on their device get no confetti. Your button still works as normal.
• Phones. Bursts are a little gentler on small screens, so the pieces stay on screen.
• A limit. There are never more than 1,500 pieces at once, also when someone clicks the button twenty times.

When confetti helps, and when not

• Good: order confirmed, account created, goal reached, discount unlocked. One moment that the visitor worked for.
• Not good: every "add to cart" click, page loads of normal pages, error messages. Confetti that fires all the time stops meaning anything.

Common questions

Does it work with WooCommerce or Shopify?

Yes. Load the script on the order confirmation page and add data-confetti-onload="sides" to that page. In Shopify this goes into the order status page scripts, in WooCommerce into the thank-you template.

The confetti appears behind my popup.

The layer uses a very high z-index, so this is rare. It happens when the popup is inside an iframe. Load the script inside that iframe then.

Can I use my logo as a piece?

Shapes are drawn shapes or text. An emoji or a single letter works. A picture does not.

What is in the download

• confetti.js the script, about 9 KB with comments. No stylesheet needed.
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.