Are you looking to enhance user experience on your website with smooth toast notifications? Look no further! With the VanillaToasts library, you can add lightweight and efficient toast notifications to your site with ease. No additional libraries are needed. Just load the script and CSS, and you’re good to go!

Getting Started with VanillaToasts

Let’s walk through how to install and use VanillaToasts.

Installation

To install VanillaToasts, you can use npm. Here’s how:

$ npm install vanillatoasts

After installation, include the CSS file in your HTML:

<link rel="stylesheet" href="path/to/vanillatoasts/vanillatoasts.css">

Creating Toast Notifications

Now that you’ve installed the library, let’s create a toast notification. Think of a toast as a message popping up in a corner of your screen, similar to a friendly post-it note reminding you of something important. Here’s how to create one:

var toast = VanillaToasts.create({
  title: "Welcome to my site",
  text: "This toast will hide after 5000ms or when you click it",
  type: "warning", // You can use 'success', 'info', 'warning' or 'error'
  icon: "img/alert-icon.jpg", // Optional
  timeout: 5000, // Optional
  callback: function() { ... } // Optional
});

In this code, the {@code title} is like the headline of your message, and {@code text} is the detailed information. The {@code type} allows you to categorize the alert (such as warning, error, etc.). The optional parameters let you add an icon, specify how long the toast is visible, and define a callback function that will execute when the user clicks the toast.

Hiding Toasts

You can easily hide the toast instantly by calling:

toast.hide();

Setting Timeout for Toasts

You also have the option to set a timeout for the toast, just like setting a reminder for a specific time:

VanillaToasts.setTimeout(toast.id, 1000);

Positioning Your Toast

Just like positioning a sticky note on a board, you can decide exactly where you’d like the toast to appear on your screen. Use the {@code positionClass} property in the toast options:

var toast = VanillaToasts.create({
  title: "Welcome to my site",
  text: "This toast will hide after 5000ms or when you click it",
  positionClass: "bottomLeft" // Adjust as needed
});

Available Position Values

• topRight
• topLeft
• topCenter
• bottomRight
• bottomLeft
• bottomCenter

Troubleshooting: Issues and Solutions

If you encounter any issues while integrating VanillaToasts, here are some troubleshooting tips:

• Toast Not Displaying: Ensure that both the CSS and JavaScript files are correctly linked in your HTML document.
• Incorrect Positioning: Double-check the {@code positionClass} values you are using. Refer to the available options above.
• Click Event Not Triggering: Make sure your callback function is set up correctly and that there are no syntax errors in your JavaScript code.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now you’re all set to add fun and informative toast notifications to your website! Happy coding!