Comment ajouter des confettis dans Webflow ?

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

1. Chargez la librairie canvas-confetti

Dans Page Settings > Head, ajoutez :

<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.