ℹ️ Free Plugin - Custom Toast Alert Notification

Landowski · 2021-01-21T19:51:00.421Z

This FREE plugin show customized material toasts (simple alert notifications), adapted to your screen size (responsive and mobile adapted).

Bubble

Custom Toast Alert Notification Plugin for Bubble, by Landowski

Custom Toast Alert Notification Plugin page on Bubble, by Landowski. Add Custom Toast Alert Notification in one click to your app. Bubble lets you build web apps without any code.

It’s simple:

Drop the element Toast on the page.
Choose the event that will trigger the toast (like a button click, for example).
Insert an action in workflow via Plugins --> Show Toast.
Configure the settings.

That’s it!

P.S.: drag to dismiss the toast before his time.

DEMO: https://99plugins.bubbleapps.io/version-test/toast

philledille · 2021-01-21T20:14:24.920Z

Smooth!

Landowski · 2021-01-21T20:29:05.304Z

Thanks! This is my first plugin, to learn.

Landowski · 2021-01-22T07:56:41.311Z

Added screen positions (until 600 pixels, lower than this it turns mobile responsive full width on bottom).

Efe · 2021-01-22T08:21:52.886Z

Well done!

Landowski · 2021-01-22T08:37:32.991Z

Thank you, Efe!

Christophe_HK · 2021-01-22T10:37:25.537Z

Excellent!

Any way to use formatting for the text or to center the text so that in responsive mode the text is centered in the toast and not left aligned? I know I know, it’s not cool

Landowski · 2021-01-22T11:59:35.694Z

Annotated to the next update, Cristophe! Will add it

Christophe_HK · 2021-01-22T13:18:21.852Z

Hypra excellent!

nimmarn.c · 2021-01-22T16:51:41.430Z

@Landowski

Drop the element Toast on the page.
Choose the event that will trigger the toast (like a button click, for example).
Insert an action in workflow via Plugins --> Show Toast.
Configure the settings.

Noob question: I did 1-3, but how/where do I configure the toast look?

Landowski · 2021-01-22T17:34:05.277Z

When you do the third step, in the Show Toast action, you click this action box and will show the properties to configure (colors, position, time, etc).

Landowski · 2021-01-22T18:54:54.960Z

Fixed Materialize Css issues with Bubble Css and uploaded own Css to Bubble (Amazon) to be more fast

Christophe_HK · 2021-01-22T22:21:55.498Z

Yeah, formatting text is now available, greatbut I found a little bug. When you set the toast text as :

 ℹ️ This is a <b>test</b> toast

The spaces characters before and after the bold html tags disappear, so I get

ℹ️ This is a**strong text**toast

Landowski · 2021-01-23T00:14:37.393Z

Yes, tested here, a strange behavior. I will look into this.

Landowski · 2021-07-06T17:22:23.631Z

MAJOR UPDATE:
Added Toast component-only CSS (will have only the Material Toast, no any input Css).