Skip to content

Async Notifications: Toast and Bell System Explained

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;
}