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
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!
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?
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~!
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?
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!
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!
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!
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?
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!
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?
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!
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?
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!
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
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 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.
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.
HELLO! I have problem with chats. When i want to send another message, a new chat i created again with that person...it is not just continue in the same chat, but it create new one.Chatting in that chat is ok, but when i exit, and than i want to send another message (from some book ad i made) it creates another chat with the same person...any help/advice? THANKS IN ADVANCE!! This was exreamly helpful anyway!!
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?
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)
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
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?
@@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
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?
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
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.
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
I would do it in reverse, cos you have to search all the database in order to find first the Chat and then the Messages. If you will connect it, starting from User, that will have Chats lists he involved in and then Chats that has messages. That way it will be more effective.
@@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?
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
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 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.
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.
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
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
is this design responsive for basically any device? (newby here. thanks for your videos.. just subscribed.)
Is this function still in working condition? Have tried twice to input my email, and have not received any access email back.
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!
This was one of my favourite messaging walkthroughs.
that was a detailed presentation I'm very happy to see it. Hope you do more coz I'm having a hard time understanding bubble LOL!
This was gold! Entertainment and awesome skill, keep them coming mate!
Thanks Rynard! More to come! 💪🏻
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?
Hi Jason, THANK YOU!! This was easy to follow and implement into my app. Well done!
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~!
Great tutorial, super easy to follow! Keep it up!
Best No code channel
No - you're the best!
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?
This is literally the best Bubble video I've seen
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!
Solved by make it as list :)
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. 💪🏻
Thanks for making this great video FREE!!! You are highly appreciated
Hello! Great Video! How can we sort the repeating group so the most recent message/chat goes to the top?
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!
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!
Great video! Does in app messaging significantly drive up costs on Bubble?
same question
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
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?
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!
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?
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.
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!
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?
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!
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
Thank you so much. Short and informative. A smart presentation with noise jokes.
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)
hei man did you arrive to a conclusion?
@@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.
What an amazing tutorial. Thank you so much for this.
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.
Hi Magomed, that's a great idea! I'm going to try it out, thanks! 💪🏻
HELLO! I have problem with chats. When i want to send another message, a new chat i created again with that person...it is not just continue in the same chat, but it create new one.Chatting in that chat is ok, but when i exit, and than i want to send another message (from some book ad i made) it creates another chat with the same person...any help/advice? THANKS IN ADVANCE!! This was exreamly helpful anyway!!
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?
Thank you so much Jason. You Rock!
Thanks for watching! 🙌🏻
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)
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.
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
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?
@@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
jaja loved the bear conversation
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
I have been laughing the whole tutorial due to humour, so informative though.
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?
Hey I'm getting the exact same problem, did you ever work out a solution?
Thanks man. Much Love!
Glad you enjoyed it!
how to put emoji in input?
This is great content- can you please do a video showing how to make this mobile
responsive?
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
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.
Amazing tutorial, thanks so much, please keep do that :) (from france)
Thanks for watching Noa! 🇫🇷
Also can you please tell me how the user can delete messages?
awesome video. how can we achieve lazy loading of messages????
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
I would do it in reverse, cos you have to search all the database in order to find first the Chat and then the Messages. If you will connect it, starting from User, that will have Chats lists he involved in and then Chats that has messages. That way it will be more effective.
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?
Great job!
Good job! 🤓
Thank you! Cheers! 🍻
Amazing content!
Glad you enjoyed it!
When are you going to revisit the Airbnb clone series? It's been too long
This is the latest video in the Airbnb series ruclips.net/video/yN3vLdOIfXw/видео.html
@@BuildAppsWithoutCode Keep them coming! Amazing work as usual 🎉
thank you so much! You helped me a lot
Glad I could help Guilherme! 🚀
Does the above build render correct on mobile devices? My instincts tell me it would not but want to check
Hi Guy, you’re right - this build is not responsive for mobile. It could be with a little more work though!
@@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?
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
its ok I solved the issue. It was because I had previously set up a privacy rule in the User's data table
how you use emojis ?
awesome! thank you
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 🙏
Hi Nouman, check your privacy rules. You might have a privacy rule on Users that is causing this issue!
@@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.
@@noumanm235 awesome! Glad that worked! 🥳
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.
Thank you! It won't be the last Airbnb video, more to come! 😉
Amazing!!!!!
thanks man!
Awesome!
had fun thx
Awesome tutorial bro, but please volume up a bit your voice
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
Nevermind
Glad you were able to figure it out! 🙌🏻
Great Tutorial but you could slow it down a bit. Struggling to keep up and digest what the constraints and workflows are doing.
Noted! Thanks for the feedback.
Só tenho a agradecer, obrigado :)
de nada!
nice tutorial but kind of complex
I think Lauren doesn't like your salt joke 😅
Ahh, i see you are a man of culture.. "Identity theft is not a joke! Millions of families suffer every year!"
Great video!