Javascript

Search Input Box
Toasts & Notifications
Input Focusing
Variable Tags

Weblutions CSSLibDocs > Javascript > Toasts & Notifications

Toasts & Notifications

The Javascript Lib includes a lightweight toast notification system to provide feedback messages to users, such as alerts, success messages, or warnings.

⚙️ Function Overview

The toast system is initialized through the sendToast() function, which can also be triggered (less preferably) via the alias sendNotification().

🔧 The toast element is referenced via #toast, and must be present in the DOM:

<div id="toast"></div>

The function accepts the following options:

🚀 Usage (JavaScript Call)

Use sendToast() to manually trigger a notification from JavaScript:

sendToast({
  title: "Success!",
  msg: "Your profile has been updated.",
  color: "green"
});

You can also use sendNotification() if compatibility with legacy calls is needed, though it is not preferred:

sendNotification({
  msg: "Something went wrong.",
  color: "red"
});

🌐 URL Parameter Trigger

Toast notifications can be triggered automatically when the page loads by adding parameters to the URL. This is useful after redirects or form submissions.

Example URL

https://yourdomain.com/dashboard?n=Welcome+back!&nt=Hello&nc=green

Accepted URL Parameters

The notification will auto-display on page load, and the URL will be cleaned using window.history.pushState().

📝 Notes

• All toasts display for 5 seconds.
• If a toast is already active, it is cleared before the new one shows.
• Colors are applied via the toastBlue, toastGreen, toastRed, or toastOrange classes.

✅ Tip

- Always include the HTML in your layout.

- Ensure you define styles for #toast, .toastGreen, .toastRed, and .toastOrange in your CSS - which the library supplies as well.

- Use URL-based notifications for form redirects or feedback across page loads.

Suggest an edit

Review this page

• Login