How to build a chat app with Bubble.io Part 2
In this Bubble tutorial we explain how to build a chat app with Bubble between your Bubble app users. This second video in a 3 part series focusses on additional UI elements required to build your own chat app and how to set up your repeating groups to show both conversations and messages.
Build a chat app in minutes: Learn how to set up conversations, messages, and privacy settings in Bubble's chat app tutorial.
Master Bubble workflows: Discover how to create forms, set up data sources, and implement privacy rules for your chat application.
Unlock the power of repeating groups: Create dynamic conversations and messages using Bubble's flexible layout options.
Setting Up the Chat App Page
This video is part two of a mini series showing how to build a chat app in Bubble. In the previous video I looked at setting up this page with my two columns of conversations and messages, I looked at the data and the fields that are required to get this working and I also looked at privacy settings in order to ensure that messages can only be read by people participating in the conversation. This video is going to focus on the workflow and the form in order to get your chat app working.
Creating the Message Input Area
So first of all let's have a look at messages here. I'm going to create a part of this for creating a message. So I need a multi-line input and then a send button. I'm not focusing too much on making it look good. Okay then here so this needs to be min height so in fact max height should be 100% of the screen. Get rid of fit height content.
Adjusting Column Layout
Okay then let's just tidy up these columns here. So inside of the repeating group I want it to have a row and also I don't want it to be restricted to a number of rows. Fine and then height I want to be not fit to content but 100% of that fixed height of 100% and then the same with my container here conversations. Okay it's because now it fills up the height of my screen. Good good good and then the height here also don't want that to be fit to content nor do I want it to be limited to number of rows. There we go and then height this I'm just going to say 90%. I think that I've got a constraint here it's fixed height. 100% there we go. That 90 was a little bit too high. 80 so I can see my button. Brilliant okay so let's add in some text fields.
Adding Text Fields to Repeating Group
So into this repeating group these are my conversations. I want the text to show me not my name but the other person's name. So I can go current cell participants minus item current user and then there's only going to be because at the moment I'm focusing on just one two participants per conversation I know that the first item will be the only item and I can go first name. Let's just time this up a little bit. It's not taking up too much space.
Setting Up Conversation Display
Okay so now this will show me the first name of the other person in the conversation and while we're at that I'm just going to group this in a row because I want to be able to click on a conversation for it to display on my message column. Just a reminder my message column is of type conversation but I'm not giving it a data source. So in order to give it a data source I need to from a workflow so I can say when I click on the group containing everything in my cell element display data and then it is messages current cells conversation.
Implementing Auto-Loading of Messages
Okay and what I can even do to make my app work a little bit better is so that when the page loads there is something already there I can go data source repeating group conversations list of conversations first item so it will automatically when the page loads pull in the messages attached to this conversation at the top of my conversation repeating group and it will display that. If I was to click on another one it would display those instead remember that my search for messages are messages that have the field conversation that I assign to the messages group here as the data source.
Formatting Message Display
So in messages what shall I add in change this to a row I'm just going to add in a little bit of column gap here. So this is going to contain I need two labels in here again we're just doing it really simply current message creator name in fact I put that in bold using BB code layout percent and then onto a new line I shall put the current cells message content okay this will be my text field and that's shown down there.
Creating the Send Message Workflow
Okay let's wire up the workflow for the send button so send will be data create a new thing message when so the content is my multi-line field my participants are set list so I know the list I want to give it current groups conversations participants okay and then the conversation is current groups conversation so by filling in those last two sets of fields I ensure that I'm working with my privacy rules that I've set up here that messages can only be read when this message participants contains current user and the same goes for conversations so privacy is in place.
Recap and Next Steps
Right let's see what we've got okay let's just recap what we have because I think the final step I'm going to put that in a follow-up video I have got the data structure in place for conversations and messages I've got the privacy I'm set up in place for conversation messages and I've just beginning in fact let's finish off the workflow so create a message and then reset inputs there we go so that would allow me to enter a new message straight after and check out the next video I'm gonna be recording it right now basically demoing this using the preview of my development app and multiple users.
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.