How to Add Confetti in Webflow

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to add confetti on click or on form submission in Webflow using the canvas-confetti library.

Example

1. Load the canvas-confetti library

In Page Settings > Head, add:

2. Trigger on button click

Add the custom attribute data-confetti="true" to any button. The script below detects every button with that attribute.

document.querySelectorAll('[data-confetti]').forEach(function(btn) {
  btn.addEventListener('click', function() {
    confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
  });
});

3. Trigger after form submission

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(m) {
    m.addedNodes.forEach(function(n) {
      if (n.classList && n.classList.contains('w-form-done')) {
        confetti({ particleCount: 200, spread: 90, origin: { y: 0.5 } });
      }
    });
  });
});
observer.observe(document.body, { childList: true, subtree: true });

Conclusion

Confetti adds a celebratory moment to confirmation pages and important CTAs. Use cases: signup confirmed, purchase completed, goal reached.