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. You can use a Group as well, but I find Group Focus to be better.

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.

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. Or whatever way you prefer.

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. I’ll soon add a tutorial on how to use OneSignal for the same purpose.

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