GRATIS includes a full notification system: toast messages and a bell icon with panel.
Toast Notifications
Call from any JavaScript on your site:
// Types: success, error, warning, info
GRATIS.toast("Item saved!", "success");
GRATIS.toast("Something went wrong", "error", 8000); // 8 second duration
GRATIS.toast("Processing...", "info", 0); // 0 = stays until dismissed
Bell Notifications
// Add to bell panel + show toast
GRATIS.notify("New comment on your post", "info", "/post/123");
GRATIS.notify("Order shipped!", "success", "/orders");
WooCommerce Integration
The notification system automatically hooks into WooCommerce cart events. When a customer adds an item to cart, a toast appears automatically.
Customizing Appearance
Toast styles use CSS custom properties. Override in your theme:
.gratis-toast {
background: #your-color;
border-radius: 8px;
}