How to create notifications with Bubble.io?

Notifications in bubble.io

In this short tutorial, you will learn how to create notifications for several groups of users within bubble.io. Additionally, I’ll show you how to display them in a nice header notification element.

Please notice that this tutorial is for web applications. We won’t cover notifications within apps or PWAs.

How to create notifications in Bubble.io – Youtube Video

First step – create a data element for notifications

The notification which we want to create needs to be stored somewhere. Additionally, we also want to have the possibility to check whether these notifications have been seen by the user or not. Therefore, we do need to model notification data object. In our example, we will keep it very simple and lean. Of course, you add other attributes while you’re developing.

In my example here, I only need to have three different attributes or fields. I need one field for the message to show the actual message I want to show. Also, I need one field for the Recipient. Keep a note that this is one user and not a list of users. This way we can check whether this particular user has already read the message. To display whether the notification is read or not, we will use the field ReadStatus which has a default of no.

Notification data type in bubble.io
Notification data type in bubble.io

Second step – Create a backend workflow for the notifications

In the second step, we concentrate on the creation of the actual notifications. You may ask yourself, why do we need a backend workflow for this. The answer is that we want to use this general backend workflow for every kind of notification and for a selected group of users. We want to create a bunch of notifications for a list of users. This is far easier doing it with backend workflows.

We need to have two parameters that we need for the notification workflow. The user and the message.

Parameter for notification backend workflow
Parameter for notification backend workflow

The workflow itself is very simple. It only contains one step, which creates the notification using the given parameter.

Create a new notification
Create a new notification

Third step – Schedule the backend workflow within your process steps

We have everything ready to use this backend workflow in our process steps. You can use this backend workflow where you like. For example, if a new job has been posted, you will need to integrate this step into the job posting process. There is also a possibility to trigger this from a database, but we will keep it simple at that time.

Go to the process step within your workflow and select „Schedule Workflow on a list“ with this action we can use the backend workflow for many items at once. In our case, this means, that notifications will be created for many users.

Schedule workflow on a list for notifications
Schedule workflow on a list for notifications

You can select exactly the users who should get the notification. This selection is a normal „Do a Search“ Selection, which should be familiar to you. The scheduled date is immediate if you don’t want to schedule it at a later stage.

Please always use „This user“ in the user field, otherwise, it doesn’t work properly. The Message can be completely free. In my case, I used an App text for easier modifications.

Fourth Step – Display the notifications in the header

You now have created the notifications. That’s great, but we also want to show it to the user. There are many possibilities to do this. I’ll show you mine, but you can do it in multiple other ways.

I created a reusable element calling notification. It contains a bell icon, a group focus containing the notifications, and a number of all unread notifications.

Components of the header notification
Components of the header notification

The group focus contains a repeating group that holds the notifications for this user which are unread. I limited them to a certain number to not have a huge, long list. Inside that repeating group, I displayed an icon for the notification and the message. You can easily change this and adjust it to your needs.

In my case, once the user clicks on one notification, it will be changed to ReadStatus „yes“. If the text „Clear All“ is clicked, all items in the repeating group will be set to read status „yes“.

Again, this is highly flexible and depends on your use case. You can also create a list of notifications for a user and show them all.

Fifth step – Enjoy and keep building cool products.

You made it 😉 Without a plug-in, just with simple logic and the functionalities bubble.io gives you. If you need help with the development of your bubble.io application, check out our services or contact us directly.