How to Add a Toast Notification in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to create toast notifications in Webflow to confirm user actions.

Example

1. Create the toast element in Webflow

Create a toast Div with Fixed positioning, bottom: 24px, right: 24px, and z-index: 9999. Add padding, border-radius, and a background color (for example, #333 with white text). Set transform: translateY(100px) and opacity: 0 by default. This toast will sit outside the viewport.

2. Add the transition CSS in an embed

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

3. Add the trigger script

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);
}
// Example call after a click:
document.querySelector('.copy-btn')?.addEventListener('click', function() {
  showToast('Lien copié !', 2000);
});

Conclusion

Toast notifications improve user feedback without interrupting the flow. Use cases:

• Confirmation after form submission
• Notification after copying a link
• Feedback after adding an item to the cart