Are you building a messaging app, social network, or a team-based tool?
Creating an online status indicator can help show the current status of a user’s profile in real-time.
The process of detecting when a user is online in Bubble includes:
- Design the online status indicator
- Setting up your custom database
- Building the workflows
- Creating relevant conditions
Full Transcript of Tutorial
1. How to design the online label
In our example today, we’re going to create an online status indicator inside an existing messaging app.
When we open our Bubble editor, you’ll see that on the page, there’s a repeating group that displays a list of messages.
In each repeating group cell, it displays the profile photo and name of the user who sent this message, as well as the content of the message itself.
Now, the purpose of this tutorial isn’t to explain how to build a fully-fledged chat feature, so we’re not going to focus on how this page is structured.
What we’re interested in doing is building an online indicator. We’ll start by adding a shape element to our repeating group. This shape will be positioned on the left-hand side of the users profile photo.
When this shape is added to your page, you’ll see that by default, it’s styled as a grey square. Today, however, we’ll need to have this take the form of a green circle.
In order to change this, we’ll start by updating the size of the element. We can set the height and width of this shape to 10px by 10px. This will shrink the size of the overall element.
Then, from here, we’ll update the roundness of this element’s borders. If we set the roundness to ‘100’, it will adjust the element to become a circle.
Finally, we’ll then update the color of this shape and set this as a bright shade of green.
2. Setting up your custom database
After building the shape element for our online indicator, we can now focus on building our database to support this feature.
If we open the data tab and select our ‘user’ data type, we’ll need to create an additional data field. This data field will determine the last point in time in which a user was active. Because we’d like to pinpoint this as a specific time, we’ll set this field type to a date/time.
3. Building the workflows
Once we’ve finished setting up our custom database, we can build the workflows that will power this feature.
If you open the workflow tab in Bubble, we’ll create a workflow using the ‘do every X seconds’ trigger.
As the name suggests, this workflow will constantly trigger based on a set interval, By default, the interval will run every 5 seconds. For our tutorial today, we’ll set this as 2 seconds.
It’s important to remember that this workflow will only run when the user is viewing our application. This worfklow will not run when a user closes their browser – meaning their active status will no longer update.
Inside this workflow, we’ll need to add one step. This step will ‘make changes to a thing’. The thing we’ll need to change is going to be the ‘current user’. In this scenario, the current user is the person who opens the app and is now currently active.
When changing the details of the current user, we’ll update their ‘last active time’ field. The value of this field should be set as the ‘current date/time’.
4. Creating relevant conditions
After building our workflow, the last thing we’ll need to do is create a condition on our original shape icon. This condition will determine when the shape should become visible. In our app today, we only want this to be shown when the ‘current user’s, last active status’ was recently changed.
To create this condition, we’ll recognize when the ‘current date/time, is less than the current user’s last active date and time’.
This means our condition will identify when the user’s ‘last active time’ stamp is two seconds behind the current date/time, this condition will no longer be true.
When this condition isn’t true, that means that the user is no longer active, so we’ll need to unselect that ‘this element is visible on page load’. As a result, our green circle icon will no longer show when a user is offline.
Previewing the application
If we now run a preview of our app, we’ll open an existing chat between two users.
At this point, the user we’re currently speaking to is not active in our chat. If we were to open a separate browser and log in as that user, you’ll now see that they are active.
And just like that, you now have a feature that allows you to detect when users are active within your application.