How to build a chat app with Bubble.io Part 3
In this Bubble tutorial we explain how to build a chat app with Bubble between your Bubble app users. This third video in a 3 part series completes this mini series demonstrating how to build your own chat app by showing the workflows required to send messages between users in Bubble.
Create a chat app in minutes: Learn how to build a fully functional chat app with Bubble's no-code platform.
Master Bubble workflows: Discover the power of workflows to create dynamic conversations and real-time messaging.
Unlock the secrets of privacy rules and UI design for a seamless chat experience.
Creating a New Conversation
Welcome to part three of this miniseries looking at how to create a chat app with Bubble. This video is only going to make sense if you check out the last two videos, each lesson 10 minutes, but that's where I show how to structure the database, the importance of working privacy rules and getting this really simple UI with both a conversation and a messages column.
Testing the Workflow
So we finished the last video looking at the workflow required. Let's just check back in with that. So create a new message where I give it content, participants, that's important for privacy and conversation that's important for grouping them together. I think we need to test it and then work through the elements that don't work quite so well in it.
Creating a New Chat
So I'm going to just run as one of my demo users. I'm going to get a mainly blank page. So first thing I need to do is a way of creating a new conversation between two users. So let's have a button at the top of my conversation panel. I'll label that new. I'm getting a little bit padding beneath it. Okay and then I need a pop-up and I'm going to make this a search box.
Setting Up the Search Function
Okay and the search is going to search for users who to create a new chat with and then this needs a button. Okay so do a search for dynamic choices and define the options as user and then I want to search by first name. If we have a look at my database I'm going to be trying to search for Nigel and creating a new conversation with Nigel. So then I don't want it to be empty. Cool that's good.
Configuring Privacy Settings
Let's check my privacy settings for users because I want to be able to search for Nigel. So I need to say that everyone can do a search for users by first name. I think that will work.
Creating the Conversation Workflow
Okay start conversation. So first up let's we need to create a new conversation and the participants are going to be... okay I need to add both myself and Nigel. So I'm not working with a list so I think I'll just have to do it in two steps of the workflow. So participants add search box values. That would be the Nigel value and I don't have another field for conversation.
Adding Participants to the Conversation
Okay so then I just... let's add another step just because I don't have a list ready. I am making a list on the fly so it's not create a new thing. It is make changes to a thing. Step two and then participants add myself current user. So I add in the other user I add in myself and then I need to hide my pop-up. I need to show my pop-up.
Testing the Chat Functionality
Let's test it. So I'm signed in as Matt, myself, everything's empty. Create new. Nigel. Okay start conversation. Okay there is my conversation with Nigel. Let's create a message. Okay and it comes through. I'm just going to give all of these things some borders because otherwise it is not very easy to see what's going on. Okay my conversations and my message to Nigel.
Adding Another Test User
Let's create another test user. Let's go with Charlotte. Okay because then we can check to see whether my workflows around changing conversations works. So let's create a new conversation with Charlotte. Okay and if I click on Charlotte it goes empty and I can say hi Charlotte. Okay and then there's my message and if I click on Nigel it goes back to Nigel's conversation.
Testing with Multiple Users
So let's test this also as another user. So this time I'm going to sign in as Charlotte. Now Charlotte should see that Matt has initiated the conversation and that the message is hi Charlotte. So I will send one back saying hi Matt and then if I sign in as my Matt demo and then go on to Charlotte I get my next message hi Matt.
Improving Conversation Ordering
Okay so there's something that I want to improve here which is that Charlotte's conversation has received the message most recently but it's appearing behind below Nigel. So what can I do about that? So I could use database triggers but in order to use database triggers I need to be on a paid plan.
Adding a Last Updated Field
So the database trigger would mean that when a new message is created I update a field in conversation. I need to make that field regardless. So this can be last updated and it could be a date. Okay but I'm not going to use database triggers because this demo app is on a free plan and I don't get access to database triggers with a free plan.
Updating the Last Updated Field
So what I can do instead is that when I create a message I'm going to add in another thing, another workflow step of data make changes to thing. Parent groups conversation, date, last updated, current time of date and then if I go back to the conversation here I can say order by last updated descending order.
Testing the Updated Ordering
Okay none of my messages so far I've got a prompted that field to be created so let's just run it again. So let's go hi Charlotte okay and you'll see Charlotte has gone to the top there. Let's try and give it Nigel. What's the weather like? Very British and Nigel goes to the top.
Future Improvements
So there we have it this is very simple there are actually I could continue this series which I might well do in the future of other things to cover with when it comes to a chat app. For example what's going to happen when these chat bubbles reach all the way to the bottom I want to be able to scroll. There's also a common frustration in the Bubble community of chat apps you want the repeating group to be reversed because you want the bottom to load first and then to be able to scroll up into past posts.
Conclusion
Those are all topics for other videos. Another one being group messages but this is the bedrock the foundation for building a chat app in Bubble and in the future I might well come I may well come back to this and add to it in order to flesh out and make it work a lot better with some of those features I just mentioned.
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.