Aller au contenu

Easter egg3 min lecture

Comment ajouter des confettis dans Webflow ?

Apprenez à ajouter des confettis au clic ou à la soumission d'un formulaire dans Webflow avec canvas-confetti.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter des confettis au clic ou à la soumission d'un formulaire dans Webflow avec la librairie canvas-confetti.

Exemple

Clique sur le bouton pour déclencher les confettis

DéclencheurAttribut customValeur
Clic sur un boutondata-confettitrue
Soumission de formulaireListener JS sur .w-form-doneAutomatique
Chargement de pageAppel direct au chargementwindow.onload

1. Chargez la librairie canvas-confetti

Dans Page Settings > Head, ajoutez :

<pre><code><script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1/dist/confetti.browser.min.js"></script>

2. Déclenchement au clic sur un bouton

Ajoutez l'attribut custom data-confetti="true" sur n'importe quel bouton. Le script ci-dessous détecte tous les boutons avec cet attribut.

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

3. Déclenchement après soumission de formulaire

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

Les confettis ajoutent un moment de célébration sur les pages de confirmation et les CTAs importants. Cas d'usage : inscription confirmée, achat réalisé, objectif atteint.

Publié le 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!