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.
Build a Chat App in Bubble: Learn how to create a dynamic messaging system with conversations and messages.
Master Bubble's Privacy Rules: Discover how to implement secure data access for user-specific conversations and messages.
Optimize Your Chat App: Explore lean development techniques to reduce database fields, page elements, and workflows.
Building a Chat App in Bubble
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. So I have a page here that I've created called messages. I'm in the new responsive engine and so let's get going.
Setting Up the Chat App Container
I think I need to add in a group. This is going to be a container for my chat app. It's going to have two columns. One column is going to be conversations and the other column is going to be messages. So let's make this a column to give it a fixed width 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 messages. Okay, conversations messages.
Creating the Data Structure
For conversations, I need to have a repeating group and then I'm using conversations as a way of grouping together my messages. That's helpful for a number of reasons. One, it's how I think most users 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 data type, let's create a new one called conversation and then another one called message. And so conversation as let's go message. Message is going to have a field called conversation. That's how I'm going to group them together. And each message can only belong to one conversation.
Setting Up Repeating Groups
Now I can add my type of content conversation data source. Do a search for conversation and then let's just copy and paste this repeating group into the messages column. See their messages, this is going to be message. Do a search for messages and this needs to have a constraint.
Using Custom States for Message Display
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 state. 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. So in fact I'll just assign it to a custom state. Can be stored anywhere on your page, just store it somewhere that makes sense for you. Oh, that's meant to say content. So I'll call this conversation in the view.
Rethinking the Approach
Actually, 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. And then I can say here conversation equals parents group conversation.
Setting Up Privacy Rules
Let's just have a look now at privacy. So data privacy, a conversation I only want this to be viewable by the people who are part of it. When a user starts new conversation they become the creator but I need an additional field in order to hold two users. So if I go back on to data type conversation I shall call this participants. And so this is a type user and I'm going to build this chat part of my app in a way that with a loud group chat in the future even though right now let's just get one to one two person chat working.
Configuring Privacy Settings
Participants is multiple type user and then I need to see if I can get this to work in the privacy tab. So I'm just have a setting for user. I don't want the conversations to be public. So can I write a rule where this conversation participants contains current user? That works but will it work for messages? That should be user. Again I don't want the messages to be public. I want it to be something like this message conversation participants contains current user.
Adjusting the Privacy Approach
It's telling me here rules that use and messages XY current grant search access right now. So that'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 messages. No, is it let me current user? No, that doesn't let me go to a group.
Final Privacy Configuration
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 participants and user. Because then I can write the same expression I did for conversations. So this messages participants contains current user. Now that's not as lean as I'd like it to be because I have to, when I create a message, I'm over complicating 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.
Conclusion
I've just seen the timer coming up in eight minutes that will conclude this video and I'm going to immediately record a follow-up video that will look at workflows.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.