How to setup Notifications in

Database May 28, 2020

If you'd like to send notifications inside your Bubble app to users, you don't need any plugin. It can all be done natively and the setup will only take 15 minutes.

You can send notification to a user when they are assigned a task or someone mentions them etc.

What do you need?

  • Data structure to store notifications
  • Workflows to create a new notification
  • Group-focus to display the notifications
  • Workflows to display and mark the notifications as read

Setting up the database

Create a new data type called Notifications. This will help us to structure the app efficiently.

Content — to display the notifications text body.

Name — just a heading to denote the ‘notification type’ for e.g A new task added or a new reminder added. This can be custom or pre-filled and can be left out as well.

Read — to denote whether the notification has been read by the recipient or not.

User — to save the User who has been assigned this notification.

You can customize these fields as per your requirement.

Setting up the workflows

Depending upon the requirement, saving these fields is straight forward.

Once you’ve created a new notification entry, all that is left is for us to display these notifications.

Displaying the notifications

You can add a bell icon or any button that you feel a user should click on to view their notifications. I’ve added a small bell icon in my app where I want the users to click to view their notifications.

I then added a Group Focus to display the notifications. Once you’ve set up the design of the Group Focus, add a Repeating Group inside it.

The type of content should be Notifications and the data source can be left blank. But how will it find the relevant notifications if the data source is blank? We’ll add the data source in the conditional statements.

Why put the data source in conditional statements?

The reasoning is that Bubble will load the Repeating Group content only when the condition is satisfied. And not on page load.

We don't want to pre-load the notifications. We can load them when a user clicks on the notification icon. This will improve page load speed and response time slightly if you have multiple repeating groups on the page.

This is a good example of using conditional statements in Bubble to improve your app performance.

This setup will ensure that only the unread notifications are displayed in the Repeating Group.

You can then add the elements in the Repeating Group to display all the information. Namely the text, number, date etc.

Create a trigger to display the Group Focus when the Notifications icon is clicked.

Add a notification tone to your Bubble app
You can add a custom notification sound in your Bubble app. Just needs some JavaScript

Marking the notifications as 'Read'

Once you have the Group Focus and the Repeating Group setup, you would like the notifications to not be displayed again once they’ve been read once.

Just add a new text element or a checkbox which the user can click to mark all the notifications as read. I’ve added a text element ‘Mark all as read’. When the user clicks on this, a workflow is triggered.

This updates the ‘Read’ field of all the current notifications to Yes. And if you recall, we had set a condition for the Repeating Group, to only display notifications where the ‘Read’ field is No.

As a result, all the notifications are hidden from the Repeating Group. You can then add another step to hide the Group Focus or whatever way you’d like your app to behave.

This is a basic but straight forward way to add a Notifications functionality in your Bubble app. A lot more customization can be done when it comes to aesthetics and database structure.

I hope you understood and found it easy to replicate.

If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter