Forum Academy Marketplace Showcase Pricing Features

ℹ️ Free Plugin - Custom Toast Alert Notification

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

11 Likes

Smooth!

1 Like

Thanks! This is my first plugin, to learn.

1 Like

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

1 Like

Well done!

1 Like

Thank you, Efe!

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:

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

1 Like

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

@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?

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

: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

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

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

1 Like

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