[FREE PLUGIN] Customizable Notifications

Hi Everyone!
This plugin has been available for a while now but it still missed an official announcement!

This plugin allows you to add beautiful customizable notifications to your Bubble app.

It supports three types of notifications

:x: Error notifications
:white_check_mark: Success notifications
:white_large_square: Blank notifications

:speech_balloon: Customize the message
:star_struck: Use emojis as custom icons
:art: Customize the default icons
:hourglass_flowing_sand: Set a duration
:paintbrush: Change background, border and font colours

Get the plugin :point_right: here

View the demo :point_right: here

8 Likes

Thanks, installed as sleek as what minimumstudio should perform! Compares to AirAlert, this plugin doesn’t add an HTML header globally, instead you have to state the usage on specific pages, which means performance optimized.

One bug report from China as below:


When I VPNed to the US, it works perfectly. Should be something with CDN?

Also, given you cannot hide the notifier element on the page load, is it the best practice to set it 1*1 pixel? Would be great if it could be hidden to achieve pixel-perfect.
image

1 Like

Hey there!
Thanks for the message :slight_smile:

Unfortunately this is indeed an issue with China. We use the plugin a lot ourselves and all around the world and it keeps working. I think this is an issue that prevents the plugin from saving certain user data, which is needed to send the notification.

I’m sorry about that! Let me know if you have any other questions!

1 Like

I do have a second question that has not been answered!

You give it basically any size and hide it somewhere on the page by using an align-to-parent group. If you use that group, you can put the Notifier element in the back of the group and put other elements over it.

1 Like

Thanks, it would be better if the element could be invisible on a “column” container layout page/group so that to achieve easier pixel-perfect than “align to parent”.

Thanks, this is an awesome little plugin! Super easy to set up and style. And it’s cool to be able to pull in dynamic data, like the title of an item being created or deleted.

A few more styling options would be great. I was trying to get to something like this:

But the closest I could get was this:

As for custom icons, I’m assuming this is a bit tricky. I’m using the Phosphor icon font, which I’m displaying using the Iconify Plus plugin, so I’m not sure how that would work.

But apart from that, a few easy(?) wins could be:

  • Being able to adjust roundness of the corners. Maybe the height of the notification as well, so you could for example set the height to 48px and then roundness to 24px in order to create the pill shape.
  • Having the rich text actually being displayed as such (I used the Rich text editor provided by the Message input field, but it’s seemingly not being interpreted, and instead displays as plain text).
  • Have some sort of control over the width of the notification, which currently seems to be a fixed width. For example, I’d like the message to always display on 1 line, but of course adapt to narrow mobile screens if needed.
1 Like

Also – and this might be beyond technical reach, but I’m just thinking out loud here – as a designer it would be ideal to be able to just design the notification myself as sort of a template using e.g. a Group element, and then tie it to the functionality of the plugin (position, duration, animation, stacked notifications etc.) and, like now, trigger it with a workflow providing the custom message.

That way I’d have access to all the usual layout features of a Bubble element (font size, padding, etc.) which would solve all points in my previous post.

I guess it would even open up for the possibility of having more than the current 2 styled and 1 non-styled notifications. For example, I have items that can be archived, which I’m communicating using an orange color. But since I’m already using green for Success and red for Error, and the Blank version doesn’t support an icon, I can’t provide a notification for that.

all great suggestions. some of those ideas might be possible within the constraints of the library we’re using (react-hot-toast) but full customization (like a group) will be tricky. you also lose the ‘looks great by default’ vibe that we really love. let us think about making the plugin more customizable though - we’ll be adding improvements soon anyway.

1 Like

hey all!

we just shipped a few nice improvements to the plugin:

  • The plugin is now called Toast Notifications
  • You can now set the Duration of the notification in the action
  • We added support for a new Loading notification type

The loading notification type is useful because it stays on the page even if the user scrolls. You can use this to give the user feedback during long running operations and you control when to dismiss it.

ezgif-4-3ce4292044

to dismiss the loading notification, simply run the Notify action with any of the other types, and it will resolve with a nice animation :slight_smile:

3 Likes

Thanks a bunch! Very useful with the loading spinner for stuff like account deletion.

Would it be possible to add styling options to the loader as well? My app is dark and the white notification looks out of place, especially now that all other types of notifications are dark.

Also, with the growing number of customization options, it would be helpful to throw in some separators in the property editor between general settings, success, error, blank. Other plugins with a lot of settings do this, and it makes it much easier to navigate and understand what settings belong together.

1 Like

We’ll definitely check it out if this is possible! Thanks for the feedback!

1 Like

yup all coming this is just the first of many small improvements we’re adding soon

1 Like

Hi folks, should I put the notifier in the first step as in the image, or the last?

Really depends on your notification that you want to show! If you want to show something like ‘Item created!’ then you can use it on the last step. If you want to show a notification like ‘Processing…’ then the first step makes more sense!

1 Like

Thanks! I just put more at the front as much as possible for better UX. User won’t notice all of CRUD failures anyway.

1 Like

Hi @minimumstudio,
I have been using your plugin and it’s amazing!!!
Could you kindly take in consideration my following request, which would make a big difference in my project and surely for others as well.

The most important:
It would be very helpful if there was the possibility to chose to show the toast with the feature “duration” or to show and hide toast through actions in the workflow (not linked to a duration).

Second request:
It would be useful to have a event “When Notifier A is clicked…”. I already found "a temporary solution " to this problem with javascript, but for me that I am not an expert, it’s not the best.

Do you think that, at least the first one is to doable, in respect to your commitments :pray: :grinning:
Thank you so much in advance

Dario

Hey there!

Good to hear that you like the plugin!

So for the Duration part, I think we already have this in our plugin! Or maybe I misunderstand the feature you’re requesting!
Screenshot 2023-08-29 at 08.09.25

About the ‘click’ feature, I’ll definitely ask our plugin dev if that’s possible! However, we’re currently experiencing bugs in the bubble plugin editor which prevents us from pushing any updates to our plugins. So we’re unable to implement it any time soon! Sorry for that!

Let me know if you still have some questions!

Thank you very much for your support!
Regarding the first request, I would need that the plugin can be shown and hidden through workflow actions and not with a duration.
Workflow example:

  1. when button A is clicked–> show Notifier A (indefinitely, until I decide to hide it with a hide action)

  2. when button B is clicked–> hide Notifier A

Let me know if this is possible
Thank you very much
Dario

1 Like

I’ll check this with our developer!
However, we’re currently experiencing some bugs in the Bubble plugin editor. This prevents us from doing any development work at all… I’ll check with our dev to see if it’s possible and how long it would take but I can’t promise you anything right now until Bubble solves the issues.

Sorry for that! Hope the plugin is still good for you as it is right now!