Popup Message in Your Bubble App

How to Send Popup Messages to Users in Your Bubble.io No Code Web App

You’ve probably used a Pushbutton or Icon to open Popup Elements in your Bubble.is no code web app to show users information or have them enter information. But what if your users need to send a Popup message to other users in your app. For instance, your app may have a business workflow where a manager wants a Popup with a message to open on an employee’s screen.

Implementing this feature is fairly easy to do in Bubble but there’s a critical design decision you need to make up front. Do you want a recipient to receive only one Popup message or do you want them to be able to receive multiple (or a list of ) Popup messages? It’s a critical decision because sending multiple messages to a recipient requires some additional database design work. The video below is for the simpler design where you’ll learn how to have one Popup message sent to a recipient. Further down you’ll see a second video showing the design for sending multiple Popup messages to a recipient.

How to Send a Single Popup Message to a User’s Screen

In this first video where a recipient user can only receive one Popup message, the design will require you to allow your “sender” users the ability to choose who to send a Popup message to. In the example a simple Dropdown Element was used with a “Search for Users”. Make sure “Choices style” is “Dynamic choices” so you can choose “Search for Users”. For your app, you may add “Search for Users” constraints; there are none in this example. The “Option caption” is “Current option’s email” which means the Dropdown will show the email of the users from the search. In your app you might choose a user’s name instead of email. Refer to image below.

Search for Recipient Users

Next is to decide whether you want to have customized Popup messages sent to a recipient or standard (or “canned”) messages. This requires adding two Data Fields to User (refer to image below). In this example the two are “Popup Message – Custom” and “Popup Message – Standard”, both of type “text”. This will allow the “sender” the ability to choose a “Standard” Popup message or a “Custom” Popup message.

Database Design for Single Popup Messages

A Button Element is used to pick the Workflow which will send the Popup message to the recipient. Check out the Workflow details in the video.

Now if your app requires sending multiple Popup messages to a recipient, check out this second video.

How to Send Multiple Popup Messages to a User’s Screen

Sending multiple Popup messages to a recipient needs a new Data Type to allow a List of Popup Messages to be created. With this database design, you can have multiple “senders” create many Popup messages to the same recipient. In the image below you can see the Popup Message Data Type that supports this. There’s a Message Field (type “text”) and a Recipient Field (type “User”)

Database Design for Multiple Popup Messages

Additionally, a “Popup Messages” Field of type “List of Popup Messages” is needed so that a list (or queue) of Messages can be added for a recipient user to receive. Check out the Workflow details in the video.

Database Design for List of Popup Messages

Adding the ability to send Popup messages can be a nice feature for your app. If there are urgent activities a user needs a reminder to do or you just want to reach out and ask a user how things are going, a Popup message can be effective. Additionally, you can add input fields to the Popup and the recipient can input their responses. Check out both videos and explore the many different designs you can implement for your app.

FREE ACCESS to this Bubble.io design when you join our email list!

Leave a Reply