Throughout this guide, you’ll know exactly how to build a typing indicator within a messaging app, all without writing a single line of code in Bubble.
The steps to building a typing indicator feature within Bubble include:
- Building your database
- Building a messaging feature
- Designing a typing indicator
- Building the workflows to power the feature
- Adding element conditions
Full Transcript of Tutorial
1. Setting up your database
When bringing this feature to life, the first thing we’ll need to do is set up and configure our own custom database. So if I jump over into my data tab, you’ll see I have three separate data types. I, of course, have the default user data type, and within this, I just have two data fields. There’s the user’s name and their profile photo. As you’ll see, I’m keeping things as simple as possible. Of course, if you’re building out your own custom application, your user data type might have a few additional fields, and that’s completely fine.
I then have a data type known as our ‘chat’, so if someone actually wants to chat with someone in our application, we’re going to create something like a chat room between these two users. Within this data type, I have a field known as our users, which is of course set to be a list of users.
Then, to support our typing indicator feature, I’ve also added this field known as the ‘typing users’. This is once again going to be a list of users. I’ll explain how we’re going to utilize that in a moment, but the last data type I want to show you is our ‘message’ data type. By all means, if you’ve already started creating your own chat application, this is probably going to look very familiar to you.
Within each message, I have the actual content of the message. You might call this the text of the message. I’m also then linking each message to a chat. To achieve this, I have a field known as the original chat or the ‘OG chat’ as an abbreviation, and that is, of course, linked to my chat data type.
At this point in my guide, that’s everything you’ll need to set up your database. What I’d also like to do is just show you how I’ve set out the design of my chat page.
2. Building a messaging feature
On my chat page, I’ve added a type of content known as our ‘chat’, so every single time a user opens up a chat, I’m going to send the data of that chat to this page. This will allow me to then display a list of messages that belong to this chat.
At the top of this page, I also have this group in red here which just displays the information of the person someone is speaking to within this chat. I have the profile photo of the person who is not the current user in this chat, as well as the name of the person who is not the current user in this chat. I imagine that if you’ve already built out your messaging feature, this is going to look relatively the same.
Now, one thing I should also just point out is that when I build any application within my editor, I just like to color code all my groups, so that way, I can easily see where they sit on my page. Of course, when you go to preview or publish your app, you can remove these background colors. While I’m actually working with my editor, though, I like to clearly define where all of my groups sit. It’s kind of like building with colored Lego blocks which, of course, if you’re a visual learner like myself, makes things a whole lot easier.
Below our main group at the top of this page, I also have our repeating group which is just displaying a list of messages. For the data source of this repeating group, I’m searching for all of the messages in my database where the original chat equals the same value as the current page chat. It’s super straightforward.
Inside of each repeating group cell, I also have two groups. There’s this group on the left-hand side which is in white. This group has a type of content set to be a message. For the data source of this group, it’s simply just pulling data from the ‘current cell’s message’.
Now, both of these groups are actually hidden by default. I’ve actually created a condition on each of these groups that just determines which group is going to be displayed to each user.
So for the messages on the left in our white group, these are going to be the messages sent by the person who is not the current user. This means that if you and I had a chat within my application and you were logged into your account, my message would appear on the left-hand side because you are the current user logged in. On the other hand, if you were to send me a message, your message would also appear on the left-hand side to me.
Of course, in the green group below, I’m also displaying another message. This message, however, is going to show the message from the person who is the current user.
Then finally, the very last group I have on my page is just a group with a multi-line input field inside of it. So this is, of course, where someone can type the content of their message. Following on from this, I then have a button that will trigger a workflow whenever it’s clicked. When the button is clicked, the workflow will create a new message within our current chat.
3. Designing the typing indicator
The first thing I’d like to do is jump over into our Bubble editor once again. Within my editor, I’ll want to add a group to my page. To streamline this whole process, what I’m actually going to do is just copy a version of our main group at the top of our page. I’m then going to update the name of this to be called group typing indicator. I’ll then move this group down on my page so it sits directly below my repeating group, but also above the group that stores the multi-line input field.
Now, when it comes to this group, I’m going to delete the text within this, but I am going to keep the image present. If you remember, this image is displaying the profile photo of the person in our chat who is not the current user. Once again, if you and I were chatting and you opened up this chat page, you would see my profile photo, whereas I would see yours.
Beside this image, what I’d like to do is add another group. I’m going to scroll down to my containers menu and I’ll add a group into my existing red group here. When it comes to this group, I’m going to, first of all, remove the style of this because I’d like to set the background style to be a flat color. I’m happy to keep that as white.
When it comes to the borders of this group, I’m going to define each border independently, and I’m going to give each border a curvature of 20, except for the bottom left border – I’m going to keep that as zero.
I’m then going to jump over to my layout tab. I’ll update the container layout of this group to be a column. When it comes to the width of this group, I’m going to set this to 120 pixels and I’ll leave this as a fixed width. I’m going to then do a similar thing for the height. I’ll select that this should be a fixed height, only, I’ll make the height itself 40 pixels. Because this is a fixed value, it’s going to be no larger or smaller than this.
From here, what I’m going to do is just click on that group once again. I will then vertically align this in the center of my red group, and I’m just going to add 10 pixels of margin on the left. This allows the group to avoid directly touching the profile photo beside it.
After adding this group to our page, what I’d now like to do is install a plugin that is going to add a nice animation effect to our user experience.
If I jump over to my plugins tab, I’ve already taken the time to install the plugin, but what you’ll need to do is open up your plugins library and search for the ‘animated loaders’ plugin. Now, this is a free plugin you can use, and from my experience, it’s a very helpful plugin for creating nice animated loaders.
After you install this, we’ll jump back into our design tab. If we scroll on up to our visual elements, you’ll now see that you have this option to add in a bouncing loader. What I’m going to do is add this to my white chat Bubble group. When it comes to this element, I’ll just need to update a few minor settings. The first thing I’ll need to do is jump over to our layout tab, from which, I’ll horizontally align that in the center of my white group. I’ll then select the white group and update its container alignment to be centered as well, which will now just ensure that this element is going to be positioned directly in the center both horizontally and vertically. And that’s all we’ll need to add to it.
4. Building the workflows
And after adding this group to our page, this is where the fun really begins. In order to actually make our typing indicator functional, we’re going to need to do two things. The first we’ll need to do is create a workflow that recognizes when someone has started typing into this multi-line input field. Then, the second thing will require us to create a condition on this group to determine when it should actually be displayed.
Now, the first thing I’d like to do is create the workflows that are going to power this feature. To do this, we’re going to jump over to our workflow tab. Inside this tab, we’ll create a brand new workflow from scratch. For the trigger of this workflow, I’m going to have this be the ‘do every five seconds’ option.
If you’re not familiar with this trigger, it’s pretty self-explanatory. It’s going to run this workflow every single time this interval occurs. You can also update the interval seconds. In my guide today, I’ll update the interval to every two seconds.
What I’m also going to do is add a condition to this workflow trigger because I don’t want this to indefinitely run every two seconds. I only want this to run when someone is actually typing in our multi-line input field.
On our workflow trigger, I’m going to recognize that this should only run when our multi-line input field – which stores our message content – its value is not empty, meaning that someone is, in fact, typing into this field.
What I’d like to do within this workflow then is head to our data tab and choose to make changes to a thing. The thing I’d like to change is going to be our ‘current page chat’. I’d like to update the ‘typing users’ field because if you remember, this is a list of users. Within this field, what I’d like to do is add to it the current user. So now, we can determine that the current user, so the person who is logged in and is typing a message should be added to the total list of people who are, in fact, typing at this point.
Now, what I’m also going to do is click back on my workflow trigger and update the event color to green. Later on, this will allow me to easily identify this workflow from others.
So at this point, we’ve created a workflow that allows us to add someone to the list of people who are typing in this chat, but what happens when someone either deletes their message or sends their message? They’re no longer going to be typing.
What we need to do is remove that person from our list of typing users. To do this, I’m going to once again create a workflow from scratch. I’ll select the ‘do every five seconds trigger’ and I’ll update the interval to be two seconds. I’ll also add a similar condition to before, only this time, I’m going to recognize when the multi-line input field its value is, in fact, empty. This means that a user is not typing in this field.
What we’ll then do is once again head to our data tab and make changes to a thing. Only this time, we’re going to update the current page chat. Instead of adding a person to the list of typing users, we’re going to remove that person from the list of typing users. The person we’ll be removing, is, of course, going to be the current user.
To help differentiate between these two workflows, I’m going to click on the trigger here and update this event color to red. This will help recognize that with is the workflow where we actually remove someone from that list. And that’s all we’ll need to create for our workflows here.
5. Adding element conditions
The very last thing we’ll need to do in order to make this feature functional is head back to our design tab. We’ll need to create a condition on our group that contains our typing indicator.
At this point, this group is currently visible every single time the page is loaded. That would mean that this would be displayed by default, and that’s not the experience we want to create. Instead, I only want this group to be displayed whenever someone is actually typing in our chat.
So I’m going to head to our layout tab, and I’m going to unselect that this element should be visible on page load. I’ll also collapse this element when it’s hidden. This means that when it’s not being displayed, it doesn’t take up any empty space on our page. I might also choose to animate the collapse operation, from which I’ll select the option to ‘fade in & out’.
And, of course, now, I’ll need to create a condition that recognizes when this group should actually be displayed. So if I head over to my conditional tab, I’m going to define a new condition. Within this condition, I’m going to recognize when the current page chat, when it’s list of typing users contains, and I want to recognize when this list contains the person who is not the current user.
So again back to my example before, if we were chatting within my application here, you’re obviously only going to want to see this typing indicator when I’m typing, not when you’re typing. It’s obviously not going to be relevant for you to see this group because you already know that you’re typing in this message, whereas you only want to see it when I’m typing. I only want to see the indicator when you’re typing.
And so what I’d like to do is recognize when the list of typing users contains the person who is not the current user. The way I can do this is by referencing once again the ‘current page chat’, the list of users. So these are the two people within the chat. What I’d like to do is type in the word minus, then I’m going to minus an item from this list.
Within our chat, if we have two users, and if I minus from that list the current user, I’m then left with only one user in that list. That remaining person will not be the current user.
Once this condition is true, what I’d like to do is select that this element should be visible and select that this should be the case. And that’s actually everything we’ll need to create within in this feature. What I’d love to do is show you a quick preview of how this is going to function.
I’m going to jump over into a preview of my app and show you the experience of two users actually exchanging messages. In a preview of my application, I’m currently logged in as two separate accounts in two separate browsers. Over on the left-hand side, I’m currently logged in as an account named Emily Jones which is why on the chat on the right-hand side, you can see that I’m talking to Emily Jones.
On the right-hand side, however, I’m currently logged in as a user named Gwen Mills. And so because Emily is speaking to Gwen, you can see Gwen’s profile photo here.
Now, at this point, these two users are having a pretty heated discussion, but things are about to get even hotter when they start to see the typing indicator that we’ve added in.
Within Emily’s account, what I’m going to do is type in another message. What you’ll now see is that over in Gwen’s account, a typing indicator is now being displayed from Emily. This, of course, means that she’s crafting a response.
And let’s say at the same time, Gwen also starts typing a message. What we’ll now see over in Emily’s account is that the typing indicator for Gwen is also being displayed. Now, we’ve all been in this experience before where we’re at a standoff.
Both of these users are typing a message. Who’s going to be the first to send it? Who’s going to pull out?
In this case, Emily realizes that Gwen needs to respond to her message, so before she sends a second message, she’s going to delete the contents of the message she’s typing. Then, what you’ll see is that her typing indicator will disappear because the value of her multi-line input is now empty.
And just like that, you’ll now have your own fully functional typing indicator within your Bubble application. Like anything with Bubble, it’s never been easier to create your own powerful application without having to write a single line of code.