How to setup Notifications in Bubble.io

This tutorial will demonstrate how to create and display notifications in your Bubble app

Sending notifications is a common functionality in apps. And if your needs are not extensive, you can create a notifications system without any plugin.

If on the other hand, you’d like to display native browser notification, you can use OneSignal. I’ll create a tutorial for that as well.

Setting up the database

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

In this setup we have

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. You can also ignore this field.

Read — to denote whether the notification has been read 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 workflow

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

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.

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 project, send me an email at himanshu@nocodeassistant.com

--

--

--

I help people bring their ideas to life with Bubble. http://nocodeassistant.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

RECAP GENI Quiz №3

Writeup — MiniSTRyplace — Cyber Apocalypse 2021 — HackTheBox

Why your business needs custom software development?

How to migrate RDS to RDS via DMS

Fine-Tune ERNIE 2.0 for Text Classification

Printer-friendly pages with CSS

The Rise of SecDevOps: Embedding Security into DevOps Workflows

Database design process

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Himanshu Sharma

Himanshu Sharma

I help people bring their ideas to life with Bubble. http://nocodeassistant.com/

More from Medium

Flawless Landing Page Design App Blueprint

Database triggers and how to use them

HOW I “PHOTOSHOPPED” A WEBSITE — WITH WEBFLOW

Greenly SaaS