Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How to build a chat app with Bubble.io Part 1

In this Bubble tutorial we explain how to build a chat app with Bubble between your Bubble app users. This first video in a 3 part series sets the foundation for adding user chat to your Bubble app by examining the UI, data structure and privacy rules you need for live chat between users.

In this video I'm going to be showing you how to make a chat app in Bubble. It's going to be part of the Marketplace app that I'm building. And I want to add in an ability for buyers and sellers, to be able to send messages, chat messages to one another.

Page structure

So I have a page here that I've created called Messages. I'm in the new response engine. So let's get going. I think I need to add in a group. This is going to be a container for my chat apps. Going to have two columns. It's going to have a fixed value in there.

It's going to have two columns. One column is going to be Conversations and the other column is going to be Messages.

Let's make this column, give it fixed width for now. And then in here it's also going to be a column - take up the rest of the space. And this is going to be Conversations, messages.

Data structure for a chat app

So Conversations, I need to have a repeating group and then I'm using Conversations as a way of grouping together my messages. And that's helpful for a number of reasons. One, it's how I think most users would come, what they would come to expect from a chat app. But also we have to think of a way of working with the privacy rules in Bubble. So date type, let's create a new one called Conversation and then called Message.

And so conversation. Let's go. Message is going to have a field name called Conversation. That's how I'm going to group them together.

Each message can only belong to one conversation. Fine. Okay, so now I can add my Type of Content, Conversation, Do a Search For conversation, and then let's just copy and paste this repeating group into the messages, do a search for messages. And this needs to have a constraint.

So I need a way of detecting the conversation that I'm looking at. And the way I'm going to do that is with a custom states. Custom states are a brilliant way of temporarily storing information. And the information I want to temporarily store is which conversation am I looking at.

And a custom state can be stored anywhere on your page. Just store it somewhere that makes sense for you. Conversation in view.

Oh, no, actually I'm not going to use Custom States.

Avoiding unnecessary workflows

No, I'm not going to use custom states. I'm trying to build this app... Basically with a Bubble app development. Try and be as lean as possible. You're cutting down on the number of database fields you need, the number of elements you need on the page, the number of workflows you need. So I can just have this box here, this group here, Messages. I can just turn that to type Conversation. Okay. Then I can say here, conversation equals parents group conversation.

Data Privacy in Bubble

Let's just have a look now at Privacy. So Data, Privacy. So a conversation. I only want this to be viewable by the people who are part of it. When a user starts a new conversation, they become the creator. But I need an additional field in order to hold two users.

If I go back on to data type conversation I shall call this Participant. This is a type User.

I'm going to build this chat part of my app in a way that would allow group chat in the future even though right now let's just get one to one, two person chat working. So participants is multiple type user

Then I need to see if I can get this to work in the Privacy tab. So I'm just setting for user. I don't want the conversations to be public. So can I write a rule where this conversation participant contains current user?

Okay, that works, but will it work for Messages that should be user? So again, I don't want the messages to be public. I want it to be something like this message conversation participants contains Current User. Okay? And it's telling me here rules that use and messages x y can't grant search access right now.

Adjusting fields to fit with privacy rules

So it's not going to work for me because I'm going to be using do a search for in order to show you the conversations in my repeating group here is do a search for conversations. So I need to approach this in a different way. Let's just see if I can rewrite the expression the current user is this message is no, that doesn't let me go to a group. Okay? So I need a different approach to this.

Now one way to do this would be in my messages. So messages also have to have a participant's User, okay? Because then I can write the same expression that I did for conversation. So this message is participants contains current user. Now that's not as lean as I'd like it to be because when I create a message I'm overcomplicating in some ways the workflow because I kind of have to account for this participants field being filled for both conversation and the message.

But it will work like this. So I've just seen the time. We're coming up on eight minutes that will conclude this video and I'm going to immediately record a follow up video that will look at workflows.

Latest videos

menu