logo
Zeroqode Docs
/
Plugins

myAlerts! Plugin

🔗
Link to plugin page: https://zeroqode.com/plugin/myalerts-1550378942563x344628844035833860

Introduction

Get the best no-code tool to send toast messages in your Bubble app! The myAlerts plugis is friendly with native mobile apps, and responsive in all platforms.The most customizable, easy-to-use and advanced toast plugin in the store.

How to setup

  1. If you don’t have a workflow, create one. If you have one, very well.
  1. Add an action in your workflow. You can search “Toast” for view all available toasts.
Image without caption
  1. Choose one of this, “Toast a Question”, “Info Toast”, “Success Toast”, “Warning Toast”, “Error Toast” or “Custom Toast”. It will open a pop-up.
  1. Complete toast options that you want.
Image without caption

Plugin Element Actions

  1. Toast - this action should use for creating Question Toast.
Fields:
Title
Description
Type
Title
Title for question toast.
string
Message
Message for question toast.
string
Title Color
Customize color for title toast.
Color (optional)
Title Size
Customize the size for the title toast.
number (optional)
Message Color
Customize color for message toast.
Color (optional)
Message Size
Customize the size for the message toast.
number (optional)
Background Color
Customize toast color.
Color (optional)
Image
Add an image for toast.
image (optional)
Image Width
If the image was added set the width for this.
number (optional)
Icon
May choose an icon for toast. E.g. Icomoon, Fontawesome.
string (optional)
Icon Color
Customize icon color.
Color (optional)
Position
Position of the toast when it appears. Top Right, Top Center, Top Left, Center, Bottom Right, Bottom Center, or Bottom Left.
Dropdown
Target
If you want to bind toast to any specific element write the element id here.
string (optional)
Target shove
Shove element space when appears.
Checkbox
Timeout
Time in milliseconds for close toast itself.
number
Progress bar
Show the progress bar on the toast.
Checkbox
Progress bar color
Customize the color of the progress bar.
Color (optional)
Balloon form
Add message form to the toast.
Checkbox
Big Layout
Select a bigger layout than the default.
Checkbox
RTL Toast Direction
Switch to Right To Left direction.
Checkbox
Dark Theme
Choose a dark theme.
Checkbox
Animate inside
Play animation inside toast content when it appears.
Checkbox
Pause on hover
Pause the toast timer when is hoovered.
Checkbox
Restart on hover
Reset the toast timer when is hoovered.
Checkbox
Animation In
Animation when toast appears in. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
Dropdown
Animation Out
Animation when toast disappears. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
Dropdown
Animation In Mobile
Animation when toast appears on mobile devices. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
Dropdown
Animation Out Mobile
Animation when toast disappears in mobile devices. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
Dropdown
Close button
Show the close button in the toast.
Checkbox
Close using esc
Close toast using the ESC key.
Checkbox
Close when pressed
Close the toast when clicking on it.
Checkbox
Swipe to close
Close toast using swipe action.
Checkbox
Button 1 text
Button 1 answer caption. This text will appear on the toast.
string
Button 2 text
Button 2 answer caption. This text will appear on the toast.
string
Answer 1
Button 1 answer value. This text will return after the user's choice.
string
Answer 2
Button 2 answer value. This text will return after the user's choice.
string
  1. Clear - this action should use for removing Question Toast states.

Element States

Title
Decription
Type
Answer
This value will be returned after the user choice.
string

Plugin Actions List

  1. Info Toaster
  1. Success Toast
  1. Warning Toast
  1. Error Toast
  1. Custom Toast
  1. Clear Toasts

PLUGIN ACTIONS DETAILED

  1. Info Toast - This action should be used to create an info toast.
      2. Fields:
      Title
      Description
      Type
      Title
      Set a title for info toast.
      string
      Message
      Set a message for info toast.
      string
      Title Color
      Customize color for title toast.
      Color (optional)
      Title Size
      Customize the size for the title toast.
      number (optional)
      Message Color
      Customize color for message toast.
      Color (optional)
      Message Size
      Customize the size for the message toast.
      number (optional)
      Icon
      May choose an icon for toast. E.g. Icomoon, Fontawesome.
      string (optional)
      Icon Color
      Customize icon color.
      Color (optional)
      Position
      Position of the toast when it appears. Top Right, Top Center, Top Left, Center, Bottom Right, Bottom Center, or Bottom Left.
      Dropdown
      Target
      If you want to bind toast to any specific element write the element id here.
      string (optional)
      Target shove
      Shove element space when appears.
      Checkbox
      Timeout
      Time in milliseconds for close toast itself.
      number
      Progress bar
      Show the progress bar on the toast.
      Checkbox
      Progress bar color
      Customize the color of the progress bar.
      Color (optional)
      Balloon form
      Add message form to the toast.
      Checkbox
      Big Layout
      Select a bigger layout than the default.
      Checkbox
      RTL Toast Direction
      Switch to Right To Left direction.
      Checkbox
      Dark Theme
      Choose a dark theme.
      Checkbox
      Animate inside
      Play animation inside toast content when it appears.
      Checkbox
      Pause on hover
      Pause the toast timer when is hoovered.
      Checkbox
      Restart on hover
      Reset the toast timer when is hoovered.
      Checkbox
      Animation In
      Animation when toast appears in. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out
      Animation when toast disappears. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Animation In Mobile
      Animation when toast appears on mobile devices. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out Mobile
      Animation when toast disappears in mobile devices. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Close button
      Show the close button on the toast.
      Checkbox
      Close using esc
      Close toast using ESC key.
      Checkbox
      Close when pressed
      Close the toast when clicking on it.
      Checkbox
      Swipe to close
      Close toast using swipe action.
      Checkbox
  1. Success Toast - This action should be used to create a success toast.
      2. Fields:
      Title
      Description
      Type
      Title
      Set a title for the success toast.
      string
      Message
      Set a message for success toast.
      string
      Title Color
      Customize color for title toast.
      Color (optional)
      Title Size
      Customize the size for the title toast.
      number (optional)
      Message Color
      Customize color for message toast.
      Color (optional)
      Message Size
      Customize the size for the message toast.
      number (optional)
      Icon
      May choose an icon for toast. E.g. Icomoon, Fontawesome.
      string (optional)
      Icon Color
      Customize icon color.
      Color (optional)
      Position
      Position of the toast when it appears. Top Right, Top Center, Top Left, Center, Bottom Right, Bottom Center, or Bottom Left.
      Dropdown
      Target
      If you want to bind toast to any specific element write the element id here.
      string (optional)
      Target shove
      Shove element space when appears.
      Checkbox
      Timeout
      Time in milliseconds for close toast itself.
      number
      Progress bar
      Show the progress bar on the toast.
      Checkbox
      Progress bar color
      Customize the color of the progress bar.
      Color (optional)
      Balloon form
      Add message form to the toast.
      Checkbox
      Big Layout
      Select a bigger layout than the default.
      Checkbox
      RTL Toast Direction
      Switch to Right To Left direction.
      Checkbox
      Dark Theme
      Choose a dark theme.
      Checkbox
      Animate inside
      Play animation inside toast content when it appears.
      Checkbox
      Pause on hover
      Pause the toast timer when is hoovered.
      Checkbox
      Restart on hover
      Reset the toast timer when is hoovered.
      Checkbox
      Animation In
      Animation when toast appears in. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out
      Animation when toast disappears. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Animation In Mobile
      Animation when toast appears on mobile devices. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out Mobile
      Animation when toast disappears in mobile devices. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Close button
      Show the close button in the toast.
      Checkbox
      Close using esc
      Close toast using ESC key.
      Checkbox
      Close when pressed
      Close the toast when clicking on it.
      Checkbox
      Swipe to close
      Close toast using swipe action.
      Checkbox
  1. Warning Toast - This action should be used to create a warning toast.
      2. Fields:
      Title
      Description
      Type
      Title
      Set a title for the warning toast.
      string
      Message
      Set a message for a warning toast.
      string
      Title Color
      Customize color for title toast.
      Color (optional)
      Title Size
      Customize the size for the title toast.
      number (optional)
      Message Color
      Customize color for message toast.
      Color (optional)
      Message Size
      Customize the size for the message toast.
      number (optional)
      Icon
      May choose an icon for toast. E.g. Icomoon, Fontawesome.
      string (optional)
      Icon Color
      Customize icon color.
      Color (optional)
      Position
      Position of the toast when it appears. Top Right, Top Center, Top Left, Center, Bottom Right, Bottom Center, or Bottom Left.
      Dropdown
      Target
      If you want to bind toast to any specific element write the element id here.
      string (optional)
      Target shove
      Shove element space when appears.
      Checkbox
      Timeout
      Time in milliseconds for close toast itself.
      number
      Progress bar
      Show the progress bar in the toast.
      Checkbox
      Progress bar color
      Customize the color of the progress bar.
      Color (optional)
      Balloon form
      Add message form to the toast.
      Checkbox
      Big Layout
      Select a bigger layout than the default.
      Checkbox
      RTL Toast Direction
      Switch to Right To Left direction.
      Checkbox
      Dark Theme
      Choose a dark theme.
      Checkbox
      Animate inside
      Play animation inside toast content when it appears.
      Checkbox
      Pause on hover
      Pause the toast timer when is hoovered.
      Checkbox
      Restart on hover
      Reset the toast timer when is hoovered.
      Checkbox
      Animation In
      Animation when toast appears in. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out
      Animation when toast disappears. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Animation In Mobile
      Animation when toast appears in mobile devices. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out Mobile
      Animation when toast disappears in mobile devices. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Close button
      Show the close button in the toast.
      Checkbox
      Close using esc
      Close toast using ESC key.
      Checkbox
      Close when pressed
      Close the toast when clicking on it.
      Checkbox
      Swipe to close
      Close toast using swipe action.
      Checkbox
  1. Error Toast - This action should be used to create an error toast.
      2. Fields:
      Title
      Description
      Type
      Title
      Set a title for the error toast.
      string
      Message
      Set a message for error toast.
      string
      Title Color
      Customize color for title toast.
      Color (optional)
      Title Size
      Customize the size for the title toast.
      number (optional)
      Message Color
      Customize color for message toast.
      Color (optional)
      Message Size
      Customize the size for the message toast.
      number (optional)
      Icon
      May choose an icon for toast. E.g. Icomoon, Fontawesome.
      string (optional)
      Icon Color
      Customize icon color.
      Color (optional)
      Position
      Position of the toast when it appears. Top Right, Top Center, Top Left, Center, Bottom Right, Bottom Center, or Bottom Left.
      Dropdown
      Target
      If you want to bind toast to any specific element write the element id here.
      string (optional)
      Target shove
      Shove element space when appears.
      Checkbox
      Timeout
      Time in milliseconds for close toast itself.
      number
      Progress bar
      Show the progress bar on the toast.
      Checkbox
      Progress bar color
      Customize the color of the progress bar.
      Color (optional)
      Balloon form
      Add message form to the toast.
      Checkbox
      Big Layout
      Select a bigger layout than the default.
      Checkbox
      RTL Toast Direction
      Switch to Right To Left direction.
      Checkbox
      Dark Theme
      Choose a dark theme.
      Checkbox
      Animate inside
      Play animation inside toast content when it appears.
      Checkbox
      Pause on hover
      Pause the toast timer when is hoovered.
      Checkbox
      Restart on hover
      Reset the toast timer when is hoovered.
      Checkbox
      Animation In
      Animation when toast appears in. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out
      Animation when toast disappears. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Animation In Mobile
      Animation when toast appears on mobile devices. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out Mobile
      Animation when toast disappears in mobile devices. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Close button
      Show the close button on the toast.
      Checkbox
      Close using esc
      Close toast using ESC key.
      Checkbox
      Close when pressed
      Close the toast when clicking on it.
      Checkbox
      Swipe to close
      Close toast using swipe action.
      Checkbox
  1. Custom Toast - This action should be used to create a custom toast.
      2. Fields:
      Title
      Description
      Type
      Title
      Set a title for custom toast.
      string
      Message
      Set a message for custom toast.
      string
      Title Color
      Customize color for title toast.
      Color (optional)
      Title Size
      Customize the size for the title toast.
      number (optional)
      Message Color
      Customize color for message toast.
      Color (optional)
      Message Size
      Customize the size for the message toast.
      number (optional)
      Background Color
      Customize toast color.
      Color (optional)
      Image
      Add an image for toast.
      image (optional)
      Image Width
      If the image was added set the width for this.
      number (optional)
      Icon
      May choose an icon for toast. E.g. Icomoon, Fontawesome.
      string (optional)
      Icon Color
      Customize icon color.
      Color (optional)
      Position
      Position of the toast when it appears. Top Right, Top Center, Top Left, Center, Bottom Right, Bottom Center, or Bottom Left.
      Dropdown
      Target
      If you want to bind toast to any specific element write the element id here.
      string (optional)
      Target shove
      Shove element space when appears.
      Checkbox
      Timeout
      Time in milliseconds for close toast itself.
      number
      Progress bar
      Show the progress bar on the toast.
      Checkbox
      Progress bar color
      Customize the color of the progress bar.
      Color (optional)
      Balloon form
      Add message form to the toast.
      Checkbox
      Big Layout
      Select a bigger layout than the default.
      Checkbox
      RTL Toast Direction
      Switch to Right To Left direction.
      Checkbox
      Dark Theme
      Choose a dark theme.
      Checkbox
      Animate inside
      Play animation inside toast content when it appears.
      Checkbox
      Pause on hover
      Pause the toast timer when is hoovered.
      Checkbox
      Restart on hover
      Reset the toast timer when is hoovered.
      Checkbox
      Animation In
      Animation when toast appears in. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out
      Animation when toast disappears. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Animation In Mobile
      Animation when toast appears in mobile devices. Available values: bounceIn left, bounce right, bounceIn up, bounce down, fadeIn, fadeIn down, fadeIn up, fadeIn left, fadeIn right, flipInX
      Dropdown
      Animation Out Mobile
      Animation when toast disappears in mobile devices. Available values: fadeOut, fadeOut down, fadeOut up, fadeOut left, fadeOut right, flipOutX
      Dropdown
      Close button
      Show the close button in the toast.
      Checkbox
      Close using esc
      Close toast using ESC key.
      Checkbox
      Close when pressed
      Close the toast when clicking on it.
      Checkbox
      Swipe to close
      Close toast using swipe action.
      Checkbox
  1. Clear Toasts - This action should be used to clear toasts.

Workflow example

Add Success Toast

In this workflow, it is represented how to create a success toast using the Success Toast action.
  1. In the workflow, Success Toast will appear when Example 1 button will be clicked.
Image without caption
  1. Below, it is presented options for Success Toast action.
Image without caption
Image without caption
Image without caption
Image without caption

How it looks on the page

The toast appeared in the top right position on the page.
Image without caption

Add Question Toast

In this workflow, it is represented how to create a question toast using the Toast Question action.
  1. A Question plugin element is placed on the page.
  1. In the workflow, c will appear when the Question 1 button will be clicked.
Image without caption
  1. Below, it is presented options for Toast Question action.
Image without caption
Image without caption
Image without caption
Image without caption
Image without caption

How it looks on the page

The toast appeared in the center position on the page.
Image without caption

Changelogs

Update 21.06.18 - Version: 0.0.1.
  • Initial commit
Update 21.06.18 - Version: 0.0.2.
  • Ready to public
Update 05.07.18 - Version: 1.0.0.
  • === RELEASE JULY 5 === (DO NOT USE PREVIOUS VERSIONS)
Update 05.07.18 - Version: 1.0.1.
  • Fixed bug on question toast
Update 10.07.18 - Version: 1.0.2.
  • Free release
Update 17.02.19 - Version: 1.1.0.
  • Transferred to Zeroqode
Update 20.02.20 - Version: 1.2.0.
  • Fix - fixed conflict between standard bubble icons and plugin icons
Update 09.02.21 - Version: 1.3.0.
  • Updated icon
Update: 09.03.21 - Version: 1.4.0.
  • Added a new ability to determine the value of the exposed state of the "Question" element
Image without caption
❕
Note question element has a "Result state" which changes after the answer to the question. In the case of a true answer, the result will be true in another case false. You can use the Clear question action after the execution of your trigger actions to clear the last answer to the question.
Update 11.03.21 - Version: 1.5.0.
  • Changed description
Update 19.07.21 - Version: 1.6.0.
  • Updated icon
Update 05.03.22 - Version: 1.7.0.
  • Minor updates
Update 18.08.22 - Version: 1.8.0.
  • Fixed the blur of the alert when the popup is open
Update 22.08.22 - Version: 1.9.0.
  • Minor fixes
Update 31.10.22 - Version: 1.10.0.
  • added more customizable options for alerts.
Update 06.02.23 - Version 1.11.0
  • fixed value of the Target field. Added toast position option.
Update 17.02.23 - Version 1.12.0
  • Added “max-width” toast to actions
Update 12.05.23 - Version 1.15.0
  • Added border roundness
Update 13.09.23 - Version 1.19.0
  • Minor updates
Update 20.12.23 - Version 1.22.0
  • Improved error handling

Demo to preview the settings

🔗
Bubble Editor: https://bubble.io/page?type=page&name=myalerts&id=redubleplugins&tab=tabs-1
🔗
Live Demo: https://redubleplugins.bubbleapps.io/myalerts
doHTML Plugin
zapHolders! - Input Placeholders plugin
Powered by Notaku
Share
Content
myAlerts! Plugin
Introduction
How to setup
Plugin Element Actions
Element States
Plugin Actions List
PLUGIN ACTIONS DETAILED
Workflow example
Add Success Toast
How it looks on the page
Add Question Toast
How it looks on the page
Changelogs
Demo to preview the settings