How to build a MESSAGING app in Bubble - Flexbox 2022 - Bubble Tutorial

I’m Jason and I teach non-technical people, like myself, how to build apps without writing one line of code!
This video will show you how to add messaging to your Bubble app (and make it look good!) using Bubble’s new Flexbox responsive design engine.
If you're trying to build a WhatsApp clone, a Facebook Messenger clone, or an iMessage clone, this video will give you step-by-step instructions.
🔔 Subscribe for more no-code tutorials just like this: kzbin.info...
⚠️ Don't forget to grab the link to this exact project so you can see it live in Bubble! www.buildappswithoutcode.com/...
🚀 Do you need extra help with your no-code project and want to work with me directly? Let's chat! Go to www.buildappswithoutcode.com/....
🎵 Intro music by Mar:One open.spotify.com/artist/1hwPl...
#nocode #bubble #buildwithbubble

[@BuildAppsWithoutCode]

Thanks for watching! Don't forget to grab the link to this exact project so you can see it live in Bubble. Get it here www.buildappswithoutcode.com/bawcchat

[@ROImediaGuy]

is this design responsive for basically any device? (newby here. thanks for your videos.. just subscribed.)

[@marknikiforov9661]

Is this function still in working condition? Have tried twice to input my email, and have not received any access email back.

[@patrao3094]

You really saved me! I was working on a tight deadline, and this is honestly the best tutorial out there for building a messaging app with Bubble! The fact that you spent so much time explaining how to perfect the UI was the cherry on top of the cake. Thank you!

[@itsjes3d]

jaja loved the bear conversation

[@UrbanSurferSouthAfrica-rf8yu]

Hi Jason, THANK YOU!! This was easy to follow and implement into my app. Well done!

[@burner918]

What an amazing tutorial. Thank you so much for this.

[@hammedakindunbi]

Thanks for making this great video FREE!!! You are highly appreciated

[@rynardwakefield2637]

This was gold! Entertainment and awesome skill, keep them coming mate!

[@BuildAppsWithoutCode]

Thanks Rynard! More to come! 💪🏻

[@YayZ]

Thank you so much. Short and informative. A smart presentation with noise jokes.

[@kipyegonkurgat5615]

I have been laughing the whole tutorial due to humour, so informative though.

[@standupclips2768]

This is literally the best Bubble video I've seen

[@massimoraschella601]

Great job!

[@efozia.o6750]

Thank you so much Jason. You Rock!

[@BuildAppsWithoutCode]

Thanks for watching! 🙌🏻

[@choongching]

Hey Jason. Thank you for guiding me in creating such chat feature in this video. Appreciate it! Allow me to propose an additional request to show us how to add in an additional feature like showing prefilled answer as choices like "Thank you!", "See you soon", where users can just tap it and send it as a response. :D Thanks again~!

[@evg.datsiuk]

Awesome!

[@wealthyman5420]

Thanks man. Much Love!

[@BuildAppsWithoutCode]

Glad you enjoyed it!

[@slavafish]

Great video!

[@lucasguarnieri1877]

awesome! thank you

[@abdullahazhar3831]

Amazing!!!!!

[@sanzharainabek272]

had fun thx

[@thedesigndatabase]

THANK YOU SO MUCH FOR THIS!!! Is there a video or can you please make a video about how to notify someone when they have a new message when they're not on this page? Is there a way to send an email to someone or add a little number to an envelope icon on a header?

[@suaultimadieta]

thank you so much! You helped me a lot

[@BuildAppsWithoutCode]

Glad I could help Guilherme! 🚀

[@Noasamm]

Amazing tutorial, thanks so much, please keep do that :) (from france)

[@BuildAppsWithoutCode]

Thanks for watching Noa! 🇫🇷

[@mohamedfarid7499]

Best No code channel

[@BuildAppsWithoutCode]

No - you're the best!

[@standupclips2768]

How would you design the notification system now that it's best to avoid "do a search for" with the new work unit measurement? Could you make another video?

[@raamasf]

Amazing content!

[@BuildAppsWithoutCode]

Glad you enjoyed it!

[@RicardoGuedes]

Amazing tutorial, thanks a lot! I Only miss a page to users can input yours Propertys, have some video that shows that feature? Thansk again

[@Jeevanmn]

This is great content- can you please do a video showing how to make this mobile responsive?

[@TMBingo]

Good job! 🤓

[@BuildAppsWithoutCode]

Thank you! Cheers! 🍻

[@AlessaP]

Hi :) this has been so helpful! I implemented this a few months ago and it worked well, however now if I open the messages it just says "loading" for time element and also clicking on the chat to open the messages does not seem to work anymore. Any idea why that could be? Or any incopatible Bubble updates?

[@ivanrossi8622]

Hi, this is a very helpful video! I tried to do it, and I did it! But I want to make a change to your model and add a search box above the repeating group chat. I want to let users search for users' chats or messages sent. I tried a different way, but when I find for example a user and I click on it (from the search box) the repeating group shows me always the same chats and not only that filtered for the search value. Can u help me?

[@mazenammar3795]

Hi and thank you for your great video. One question regarding changing the message to read="yes". Your solution is to trigger workflows with chat click and page load. What if the user have the page open with the chat active and another user sends a message. The new message will show but both events will not be triggered and the message will remain read="no". What are your thoughts?

[@user-pf9th5dy1t]

Hi there! I followed your video to the T and the chat works perfectly, however, now I have 15 error messages that say "Search for Messages value should be chat but right now it's a different chat". It's a very strange error message and I don't know what it means nor how to fix it. I would be eternally grateful if you could provide some advice on this please!

[@magomeda.4576]

you could make just one message in the repeating group line, assign a column type, and change the alignment in the condition. This will reduce the load by half, but visually nothing will change.

[@BuildAppsWithoutCode]

Hi Magomed, that's a great idea! I'm going to try it out, thanks! 💪🏻

[@RobertoArauz-h7v]

Hi Jason. awesome video thanks so much. I was able to pull it all together and it works like a charm. The only issue am facing is that on the index page, I still see the name of the user as an option to chat to? So if Stewie is the user, in the index page, he also appears as an option to chat with. Any idea on how to solve this? Cheers!

[@Me-ew6wz]

how to put emoji in input?

[@cornhub576]

Back when bubble was not yet using flexbox, creating these messaging function was a bit tricky because of the messaging bubble design. LOL!!

[@BuildAppsWithoutCode]

Truth!

[@CrossSword]

Hi there Jason, I love your tutorials but I am trying to combine what you teach in the messaging app with the instagram app. When you set up the new message feature the workflow relies on going to a new page but in the instagram app you say to stay on just the index page using parameters etc.. How do I set the new chat when it goes to the index page and not a new page? Thanks so much and please keep releasing videos, they are clear and humorous!

[@BuildAppsWithoutCode]

Thanks for your kind words! More videos are to come definitely. 🖤 These are two different ways to achieve the same goal. If you're building for mobile, a single page application is usually the better bet because it's faster. You could have a page parameter, similar to how I did it in the Instagram videos, that displays the correct group. Then, instead of sending the data on the go to page action, you could use the 'Display data in group' action. Just make sure your group has the correct type of content (probably 'Chat'). Hope this help! - Jason

[@chlins]

Pena ser o último vídeo. Este é o melhor tutorial de clone Airbnb que encontrei, mas falta muito ainda para tornar-se um projeto completo. Espero que vocês continuem a incrementar este clone. Parabéns.

[@BuildAppsWithoutCode]

Thank you! It won't be the last Airbnb video, more to come! 😉

[@sundarapandim1104]

Kindly Post Video about ChatGPT-4 API & How to use on bubble to build app. By using chatgpt how can we improve app building in bubble

[@vamosfalarde3d]

Só tenho a agradecer, obrigado :)

[@BuildAppsWithoutCode]

de nada!

[@nickoconnell3335]

Hello! Great Video! How can we sort the repeating group so the most recent message/chat goes to the top?

[@BuildAppsWithoutCode]

Hi Nick, in the video I don't think we added a 'Sort By' in the Messages'repeating group, so the default sorting is top to bottom. If you click on the Data Source of the repeating group you can sort by Creation Date (Descending = Yes). You might also need a 'Scroll to entry in repeating group' action to make sure it's scrolled to the latest message. Hope that helps!

[@andriygrygorenko2622]

Great video! Just one question: how do you get the chats to sort by whichever has the most recent message? (Kind of how the iPhone will put your conversation with the most recent new message at the top)

[@gianlucabiancardi4962]

hei man did you arrive to a conclusion?

[@patrao3094]

@@gianlucabiancardi4962 I found a p easy solution. Just add a "Last Message Timestamp" field to Chat in the database. Update that whenever a new message is created with the 'Current date/time' of when the message is created. Sort the repeating group showing the users by Last Message Timestamp in descending order. Voila.

[@thedesigndatabase]

Also can you please tell me how the user can delete messages?

[@wealthyman5420]

Hey Jason, how to I make "messages" repeating group scroll to the last item on the receipt side. For instance, if someone sends me a message and the senders chat is currently open... how do I make repeating group scroll to the most recent messages?

[@BuildAppsWithoutCode]

You might be able to do this by using the "Scroll to entry of a repeating group" action. Just find the 'last item' message to scroll to.

[@lizmarshall1573]

Amazingly helpful video! Thank you so much! I'm a total novice, and I followed you all the way through to 43:19. At that point, in setting the conditional for the Shape Unread, it looks like you first set up a search for a chat within a search dialogue window, close it, then set up a search for a message within another search dialogue window. But how do you attach both searches to the conditional? Did you replace the chat search with the message search? But then how do you know which chat you are searching for the message in?

[@lizmarshall1573]

Scratch that--I figured out how to do the nested search. Phew. I couldn't figure out how to do it by defining the chat search first, as you show, but perhaps I'll figure out the trick with a little more playing. Thank you again for an INCREDIBLY helpful video!

[@shauna1306]

Great video! Does in app messaging significantly drive up costs on Bubble?

[@lorruee]

same question

[@Lamejorap]

Te falto explicar algo, como hacer para cuando aprietas en la foto cree un chat con esa persona y no solo habrá la se dirija a la página?

[@SomeOne-ke4fz]

What about payment? The renter needs to pay (credit card) when they book, the website has to hold the money until renter leaves, then distribute that money to the renter (minus commission for the website owner)

[@BuildAppsWithoutCode]

This can definitely be done in Bubble! I haven't made a video on payments yet, but will add it to my list of future videos to do.

[@muhammadzeeshaniqbal1533]

how you use emojis ?

[@petar4253]

Awesome tutorial bro, but please volume up a bit your voice

[@Noasamm]

I can't add the name of the recipient to the right of "Messages" in the upper right corner. So that you know with whom you are in conversation even without sending a message

[@BuildAppsWithoutCode]

The way I did it was 'Current Page Chat's Users:filtered:first item's Username'. The 'filtered' constraint is 'Username Current User's Username' so your own user doesn't show up there. I might not have covered this in the video, but it's on the Bubble project now, so if you're still having trouble go to www.buildappswithoutcode.com/bawcchat to get the project URL and you can copy what I did.

[@yutahamaguchi8876]

Hello. thank you for the amazing tutorial. just a question. there was no letcture to set up chat user screen. so I lost around 10:00 when you start to explain "go to chat page" there was no choise if "contains" as i couldn't set "type of content" , it would be great if you can add to tutorial. thank you!

[@yutahamaguchi8876]

Solved by make it as list :)

[@BuildAppsWithoutCode]

Hi Yuta, glad you figured it out! Don't forget you can get access to the Bubble project from the video if you get stuck again. 💪🏻

[@howai1942]

Hello, I am a beginner on Bubble. This video is very good for me. However, I failed to build an add friends system like you as Peter and Meg. Can you tell me more about how to connect these users together? Thanks

[@BuildAppsWithoutCode]

Hi! I'm not sure exactly what you're asking. Are you asking how to create a new chat between two users? In the video it goes over this starting at 10:16. Is this the part you are struggling with?

[@keppet24]

@@BuildAppsWithoutCode hey thanks for ur content! But the thing is i don’t quite understqnd how u built the index page ? because u did it off screen so it’s hard to follow from there

[@guyblueoceans9072]

Does the above build render correct on mobile devices? My instincts tell me it would not but want to check

[@BuildAppsWithoutCode]

Hi Guy, you’re right - this build is not responsive for mobile. It could be with a little more work though!

[@guyblueoceans9072]

​@@BuildAppsWithoutCode makes sense. the only reason I ask is I'm currently figuring out how to properly setup 100% viewport scaling/height in order for the message reply section of chat to be at bottom of phone screens without a need for scrolling. Def multiple methods out there but setting a page to column & then dropping a new group inside that set to Align To Parent seems to work bc the ATP group always seems to scale correctly on mobile. Curious how you would approach it?

[@shabatidjani1354]

nice tutorial but kind of complex

[@nickcrus766]

Great video series, thanks. I'm trying to recreate the user list in my own app and have copied the BAWC list which you provided in the link but the repeating group is not displaying anything. I removed the constraint to see what would happen but that only shows the current logged in user. Do you know what might be the issue? Thanks

[@nickcrus766]

its ok I solved the issue. It was because I had previously set up a privacy rule in the User's data table

[@forzabike]

When are you going to revisit the Airbnb clone series? It's been too long

[@BuildAppsWithoutCode]

This is the latest video in the Airbnb series kzbin.info/www/bejne/r3-Wp3-ahK6Zjtk

[@forzabike]

@@BuildAppsWithoutCode Keep them coming! Amazing work as usual 🎉

[@KuldeepVerma-ex7ek]

awesome video. how can we achieve lazy loading of messages????

[@BuildAppsWithoutCode]

Hi Kuldeep, I found this post on the Bubble forum which explains lazy loading on repeating groups pretty well! Hope it helps! forum.bubble.io/t/repeating-group-performance-by-showing-only-last-50-records-initially/218308

[@Nduk123]

Great Tutorial but you could slow it down a bit. Struggling to keep up and digest what the constraints and workflows are doing.

[@BuildAppsWithoutCode]

Noted! Thanks for the feedback.

[@noumanm235]

Hi! I've followed all steps but my app didn't show users profiles and names Group Users at index page, I've same four entries in Database. Similarly no users under chat section at bawc-chat page. Anyone who could help me to resolve that issue. Thanks 🙏

[@BuildAppsWithoutCode]

Hi Nouman, check your privacy rules. You might have a privacy rule on Users that is causing this issue!

[@noumanm235]

@@BuildAppsWithoutCode Thank you so much for help. This resolves the issue. I just check mark all the options under Everyone else (default permissions) and, Boom! Users are displayed in app. Thanks, once again.

[@BuildAppsWithoutCode]

@@noumanm235 awesome! Glad that worked! 🥳

[@MaxSmm_business]

I think Lauren doesn't like your salt joke 😅

[@northwolf2408]

This video is great helper but I didnt like that you cut some parts off to solve some problems and left us to figure out the soliution ourselfs. Not so nice 27:03

[@northwolf2408]

Nevermind

[@BuildAppsWithoutCode]

Glad you were able to figure it out! 🙌🏻

[@madjazz4743]

Ahh, i see you are a man of culture.. "Identity theft is not a joke! Millions of families suffer every year!"