How to build a chat in Bubble.io?

ThomasC2A · 2024-09-20T07:36:56.392Z

Hey fellow Bubblers !

Just a quick post to share with you a new (free) tutorial we released on Nocodable Components.

In this one you’ll learn how to create a basic Chat functionality for your Bubble app.

Bubble.io chat1200×630 43.9 KB

Here’s the link to read the tutorial : How to build a chat in Bubble.io ? - Complete guide (2024) - Nocodable

The version we show is pretty basic, but it’s a good starting point on which you can build more things later

Hope you’ll like it !

Happy building,

Thomas

razvan.podariu · 2024-09-24T04:46:07.959Z

Hi @ThomasC2A

Thank you for taking the time to write down all the steps for creating a chat on bubble.

I am struggling with one thing though: how do you add the participants to the conversation?

I mean I manage to add the first participant…the sender…but not the recipient.

I am trying this but is not working:

image1529×472 37.8 KB

image1421×444 33.7 KB

Any suggestions?

ThomasC2A · 2024-09-24T08:16:21.385Z

Hey @razvan.podariu !

From what I can see in your screenshots, your workflow seems to be correct (the step where you add the participants at least. I can’t see the rest).

In a nutshell, what you want to do is a use a Make Changes to Conversation and use the “add” operation to add a Single or a List of Users to the “Participants” fields of the conversation.

From what I can see, it seems you got this part right !

So maybe you issue lies elsewhere, here a few possibilities I can think of :

Did you check (from the database directly) if all the participants are effectively added to the conversations ? If they are and you don’t see them in your app, the issue is probably coming from how you display the information on your UI.
If they’re not added, make sure the Data “flows” correctly through each group in your UI. Since you’re using the “Parent’s Group Appointment’s Stylist’s Creator”, you need to make sure that the data is correctly injected in the Parent’s Group.
You may have an issue with your Privacy Rules (which could prevent retrieving the “Parent’s Group Appointment’s Stylist’s Creator” and therefore adding it to the list.

If I had to bet, I’d go with the 3rd point !

razvan.podariu · 2024-09-24T17:48:23.056Z

thank you for the reply
I found the problem
if you look at my workflows…I set them in the wrong order: first I delete de appointment then the last action I ask to add as participant the Parent Group…
well…the parent group is empty…cause I delete it in the first action

so I moved the first action to be the last and now everything is great.

thank you again
Razvan

aliparvez212 · 2024-12-26T10:22:20.708Z

How to detect if keyboard is visible/or not in a mobile device?
I have built a similar chat feature for my single page app. The problem I am facing is when the keyboard is popped up in the mobile app, the input field does not follow it along and is hidden behind the keyboard.
Would appeciate any help around this.

husam.hamdy · 2025-01-14T01:26:22.764Z

Not sure if this is the best solution, but i had this problem long time ago and as much as i can remember i made a floting group screen size. With small height size that can extend. When keyboard pops up it squeeze the group upwards and the input is right above the mobile keyboard.
Also, you can make ( when floating is visible> set focus on input) so user doesnt have to press

muellerme · 2025-03-11T13:25:56.171Z

Hi there,

I followed the tutorial and its working except for one issue, when I send multiple messages from the same user it alternates the messaging between the two users that are chatting. Am I doing something wrong? Or is there a way for one user to send multiple chats at a time?

pierre.chv33 · 2025-03-21T11:26:45.642Z

Hey i have the same prob as you. Do you find an issu ??
Pleease

muellerme · 2025-03-23T07:12:42.191Z

ThomasC2A:

Here’s the link to read the tutorial : How to build a chat in Bubble.io ? - Complete guide (2024) - Nocodable

Hi there,

I did with the guide! If you follow the link above and scroll down to displaying messages, then following the photos with the conditions for “Group Sent by User” and “Group Received”.

image850×544 79.4 KB

image845×536 89.2 KB