How to build a chat in Bubble.io?

Tips
1

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 chat
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 :slight_smile:

Hope you’ll like it !

Happy building,

Thomas

3 Likes
2

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:

image
image1529×472 37.8 KB

image
image1421×444 33.7 KB

Any suggestions?

3

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 :

  1. 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.
  2. 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.
  3. 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 ! :slight_smile:

4

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 :slight_smile:

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

thank you again
Razvan

5

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.

1 Like
6

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

7

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?

1 Like
9

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

10

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”.

image
image850×544 79.4 KB

image
image845×536 89.2 KB