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éclencheur | Attribut custom | Valeur |
|---|---|---|
| Clic sur un bouton | data-confetti | true |
| Soumission de formulaire | Listener JS sur .w-form-done | Automatique |
| Chargement de page | Appel direct au chargement | window.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.


