This guide will teach you everything you need to know about using alert messages in Bubble. Alerts can be used to notify a user when a change has been made in your database. On something like a user settings page, alerts can prompt a user when their information has been updated.
Throughout this guide, you’ll learn:
- What an alert message does
- How to design alert elements
- How to build a workflow to show an alert message
- How to create dynamic alerts that change their message
- How to create conditions for alerts
Full Transcript of Tutorial
1. What an alert message does
In Bubble, alerts are temporary messages that display, then fade away on your page. Alerts are typically used to notify the user that something has changed within your Bubble application.
If a user was to run a workflow in your app, there’s often no way to visually indicate that this occurs on your backend. Thankfully, this is where alerts become so useful. An alert message can prompt a user of a successful action they complete. As a result, this allows you to create a more intuitive user experience.
In a real-world example, you could add an alert message to a user settings page. Whenever a user makes changes to their details, then clicks a button to update their information, your alert message would display and prompt the user that the changes were successful.
2. How you can design alert elements
If we open a Bubble editor, we can walk through the process of setting up an alert message. To start, we’ll open our user settings page from the example above.
When you open this page, the first thing you’ll notice is that the alert message is not visible by default. The reason for this is because alerts are always hidden on your page – they’re only temporarily displayed when you call them within a workflow.
In order to view and edit your alert message in Bubble, you’ll need to open your element tree, then select to display the element.
In our example today, we’re going to delete this existing alert, then rebuild the element from scratch.
When adding a new alert to your app, simply head to your ‘visual elements’ in Bubble, then drag an alert message onto the page. You can place this alert anywhere you’d like. At this point, it doesn’t matter where you position this.
When it comes to the placement of this alert, we’re going to select the option to ‘position at the top of page’. By choosing this, it permanently fixes this element to the top of your page, then allows your alert to hover over any existing elements that sit below it.
While we’re editing the style of the alert, we can also update the background color. By default, this alert message is a shade of blue. For our example today, our alert is going to display a success message, so I’d like to make this a light shade of green.
Finally, we can then open our layout tab and update the responsive settings of this element. Like any element in Bubble, if we want to make this fully responsive, we’ll need to set the minimum width of the element to 0 pixels, then leave the maximum width to be infinite. This will ensure that our alert can shrink or expand to the size of our page at any given point in time.
The last thing we’ll need to change is the actual message that’s shown to our end users. In this case, we’ll alter the text of our alert to display the word ‘updated’. This will indicate to users that their profile information has been changed in our database.
3. How to build a workflow to show an alert message
After completing the design of our alert element, we can now build out a workflow that will make this element functional.
On our user settings page, you’ll see we have an ‘update’ button below our input fields. Whenever a user clicks this button, we’re going to run a workflow and make changes to their details in our database.
If we open our workflow editor, you’ll see that we’ve already added the step to update a users information. Now, at this point in time, this workflow step would run successfully, however, the user wouldn’t have any way to identify if the changes were made in our database.
In order to notify the user that this workflow was completed, we can add an additional step, then choose to show our alert message.
When you show an alert message, you’ll see the option to customize the ‘fade-in’, ‘hold’, and ‘fade-out’ duration of the alert. For todays example, we’re just going to leave these as the default settings.
Just like that, we now have a fully-functional alert message, ready to display to our users.
4. How to create dynamic alerts that change their message
After learning how we can display an alert message, I’d just like to explain how you can further customize the text that’s shown inside the alert itself.
In another example, let’s say you need to display two alert messages on the same page in your app. Instead of having to create separate elements for each instance, Bubble makes it possible to dynamically change the text in an alert message at any given time. This allows you to repurpose an alert, ultimately saving you from adding more elements to your page.
In order to dynamically change the message in an alert, simply open the workflow that displays this content, then tick the option to ‘change the alert message’.
Once this option is selected, a text box will become visible, from which you can add the new text you’d like to display. Of course, like any text element in Bubble, you also have the ability to insert dynamic data.
5. Creating conditions for alerts
The very last feature I’d like to cover in this guide will highlight how you can add conditions to alerts in order to further customize the message displayed to users.
In another real-world example, we can open our user settings page once again. On this page, you’ll see that we have two input fields; one storing a users email address, and the other storing a users password.
In this example, I’d like to display an alert message whenever a user updates the value of these fields. If the user, however, was to only update the value of one field, I’d like to customize the text to indicate which field they changed.
For example, if the user updates only their email address, our alert message should display the words ‘email updated’.
If the user was to update their password, the alert would display the words ‘password updated’.
Then, if the user was to update both their email AND password, our alert will need to display the words ‘ email and password updated’.
As you can see, there’s three different instances we’ll need to cater to in our example. In order to display the relevant alert message at the right time, we’ll open our workflow editor where the alert is being shown.
In this workflow, we’ll start by selecting the action that ‘shows an alert message’. Now, in this workflow step, we’ll need to add a condition that only allows this workflow to run in a specific instance.
For this condition, we’ll first recognize if the user has updated just their email address. To create this, our condition will determine if the ‘current users email’ field is NOT the same value as the text in our email input field on the page.
After building this condition, we can then update the text displayed in this alert to show the words ‘email updated’
Next, we’ll add another step within our workflow. We’ll once again choose to show an alert message, however, in this instance, we’ll create another unique condition. For this condition, we’ll recognize if the ‘current users password’ field is NOT the same value as the text in our password input field.
When this condition is met, we’ll update the text displayed in the alert to show the words ‘password updated’.
Now, finally, we’ll create one last step within our workflow. Like our previous steps, we’ll choose to show another alert message, only this time, we’ll create a unique condition on the action.
This condition will recognize when the ‘current users email’ field is NOT the same value as the text in our email input field AND when the current user’s password’ field is NOT the same value as the text in our password input field.
When this condition is true, we’ll update the text of this alert and show the words ‘password and email updated’.
After building all of these unique conditions, we can now display the relevant alert message based on the information a user changes in their settings page.
And just like that, you now know everything about using the alert elements inside Bubble. In my opinion, alerts are almost essential for any application as they help create a better end-user experience.