BUBBLE TOAST

Bubble Toast

Published September 2022

    •    Updated this week

Plugin details

╔══════════════════════════════════════════════════════════════════════════════╗
║ 🍞 𝐁𝐮𝐛𝐛𝐥𝐞𝐓𝐨𝐚𝐬𝐭 🍞 ║
╚══════════════════════════════════════════════════════════════════════════════╝

📜 Description
The finest toast notification plugin you’ll find on Bubble.io, designed for a seamless and lightweight user experience.

✨ Key Features:
▪ 𝐒𝐞𝐚𝐦𝐥𝐞𝐬𝐬 𝐔𝐬𝐞𝐫 𝐄𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞
▪ 𝐋𝐢𝐠𝐡𝐭𝐰𝐞𝐢𝐠𝐡𝐭 (𝐙𝐞𝐫𝐨-𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲)
▪ 𝐅𝐥𝐞𝐱𝐢𝐛𝐥𝐞 𝐏𝐨𝐬𝐢𝐭𝐢𝐨𝐧𝐢𝐧𝐠
▪ 𝐁𝐚𝐬𝐢𝐜 𝐁𝐁𝐂𝐨𝐝𝐞 𝐅𝐨𝐫𝐦𝐚𝐭𝐭𝐢𝐧𝐠 𝐒𝐮𝐩𝐩𝐨𝐫𝐭
▪ 𝐏𝐫𝐨𝐠𝐫𝐞𝐬𝐬 𝐁𝐚𝐫
▪ 𝐍𝐨𝐭𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧 𝐒𝐨𝐮𝐧𝐝

🛠️ Actions:
▪ 𝐓𝐨𝐚𝐬𝐭
▪ 𝐂𝐥𝐞𝐚𝐫 𝐀𝐥𝐥

🎥 Demo:
🔗 https://nxd.bubbleapps.io/version-test/bubbletoast

📞 Support:
🌐 Visit: nixx.dev

🔗 More plugins:
👉 https://nxd.bubbleapps.io/version-test

💼 Need a plugin or an app?
🌐 nixx.dev

✨ Latest Version:
𝐁𝐞𝐧
▪ Added a “Clear All” action to remove all visible toasts on screen.

Free

For everyone

5.0 stars   •   5 ratings

2.8K installs

This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

nmgxsol

Joined 2022   •   11 Plugins

View contributor profile

Instructions

Navigate to the "Workflow" tab in your bubble.io project.

Click on "Add an Event" to choose the trigger that will activate the toast notification.

After selecting the desired event, click on "Add an Action" to specify what should happen when the event occurs.

In the action options, locate and select "Toast" from the available actions under "Plugins" or simply type "Toast" in the search box.

Once you've chosen "Toast," customize the content, appearance, and behavior of the toast notification according to your preferences.

Optionally, set the background color, text color, and position of the toast notification to match your application's design.

Types

This plugin can be found under the following types:

Background Services   •   Action

Resources

Support contact

Documentation

Tutorial

Rating and reviews

Average rating (5.0)

works great

August 27th, 2025

works great

Awesome!

July 11th, 2024

Thanks for implementing the suggestions so quickly!

❤️  (plugin author)

July 15th, 2024

•

nmgxsol

Nice plugin, but I have suggestions

July 4th, 2024

To make the plugin even better, you could let us set the width of the element dynamically. And the fields for colors could be color inputs instead of text inputs, so that we could use the colors directly from the pallete.

Thank you so much for your feedback! It means a lot. ❤️

I appreciate your suggestion about making the width dynamic. For now, you can use a CSS override to set the width like this:

```
.nx_toast_container {
    width: 300px; /* for example */
}
```
On Bubble, you can add this to the Page HTML Header field, use an HTML element, or add it in the settings under the SEO/metatags tab in the Advanced settings section.

Regarding the color fields, the reason they are dynamic text fields is to allow flexibility in using both color names and hex codes. This also lets you store your brand colors in an Option Set or a Setting data type in the database, for example. (plugin author)

July 5th, 2024

•

nmgxsol

Easy, clean and fast support

June 25th, 2024

Plugin works nicely. Looks clean and easy to setup. Also received immediate support.

❤️  (plugin author)

July 4th, 2024

•

nmgxsol

Awesome!

September 28th, 2022

This is clean and flawless.

Thanks for your kind comment (plugin author)

October 7th, 2022

•

nmgxsol

Product

Bubble for

Discover

Learn

Resources

Community

Company

Legal

Bubble Toast

Plugin details

Free

For everyone

Other actions

Platform

Contributor details

Instructions

Types

Categories

Resources

Rating and reviews

Average rating (5.0)