Comment ajouter une notification toast dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer des notifications toast dans Webflow pour confirmer des actions utilisateur.

Exemple

1. Créez l'élément toast dans Webflow

Créez un Div toast en position Fixed, bottom: 24px, right: 24px, z-index: 9999. Ajoutez un padding, border-radius et background (ex: #333 avec texte blanc). Réglez transform: translateY(100px) et opacity: 0 par défaut. Ce toast sera en dehors du viewport.

2. Ajoutez le CSS de transition dans un embed

.toast {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

3. Ajoutez le script de déclenchement

function showToast(message, duration) {
  const toast = document.querySelector('.toast');
  toast.textContent = message || 'Action réussie';
  toast.classList.add('show');
  setTimeout(function() {
    toast.classList.remove('show');
  }, duration || 3000);
}
// Exemple d'appel après un clic :
document.querySelector('.copy-btn')?.addEventListener('click', function() {
  showToast('Lien copié !', 2000);
});

Conclusion

Les notifications toast améliorent le feedback utilisateur sans interrompre le parcours. Cas d'usage :

• Confirmation après soumission de formulaire
• Notification après copie d'un lien
• Feedback après ajout au panier