ℹ️ Free Plugin - Custom Toast Alert Notification

Showcase
1

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

It’s simple:

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

That’s it!

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

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

13 Likes
2

Smooth!

1 Like
3

Thanks! This is my first plugin, to learn.

1 Like
4

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

1 Like
5

Well done!

1 Like
6

Thank you, Efe!

7

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 :smile:

8

Annotated to the next update, Cristophe! Will add it :call_me_hand:t2:

1 Like
9

Hypra excellent! :+1:t2::+1:t2::+1:t2::+1:t2:

10

@Landowski

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

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

11

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).

1 Like
12

:rotating_light: :rotating_light: :rotating_light:

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

1 Like
13

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
14

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

1 Like
15

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

1 Like