How to create a private direct message system between users

Hello, I need a little guidance on how to build private messages for Bubble. Please show screenshots if you can. I’ve already used the forum search function and didn’t find anything. I searched bubble through Google and didn’t find anything either.

I figure that it’s a ubiquitous feature so it should be easy to build.

1 Like

Sorry I don’t have any screenshots at the moment. But I’ll give it a go explaining with words.

First you’ll need a data type, something like “messages”:

Data Type — Message
Fields —
Message Body = text
Message sender = user
Message recipient = user
Sent Date = date (or just use the created date)

Now within the data type “user,” make sure you have a field Message which is a list of messages (from the DB).

When a user send a message, create a new Message populating the fields listed above. Then make changes to the users (sender and recipient) — add message to user.

In terms of notifying the recipient about the new message, perhaps an email, push notification, and/or text message will do the trick. The last two requiring you to connect the API yourself.

In terms of designing your message box on the users page. I’ve used pop ups and floating groups in the past. Using a repeating group at the top to display the messages, I’d create two groups within the cell—one for sent messages, and one for received messages. You can add a condition to show one of the groups based off “current cells sender” — so if current cells sender is current user, show the group that displays sent messages, and vice versa.

Lastly, a simple multi line input should do the trick for the user to type the message body.

Hope this helps. Sorry for the ramble, and good luck!

8 Likes

Great stuff.

As a suggestion … a list of messages in the user data-type can load up pretty fast and slow down the app’s performance.

An alternative data structure could be to avoid having messages under a list in no data type. A … reverse relationship where each message has a field to … a thread perhaps could work much better. The thread has a list of users in it … and each message with a list of viewed users belongs to a thread. This could be more scalable. :+1:

5 Likes

Good suggestion!
Would you have an idea of how this would look as a data type? Right now I have

Data Type — Thread
list of messages: List of Messages
list of users: List of Users
Created Date: date

Data Type — Message
Fields —
Message Body: text
Message sender: user
Message recipient: user
Sent Date: date (or just use the created date)

I am having trouble defining the workflows. If you would have any screenshots on how you would define the workflow it would be very helpful

1 Like

@joelondesign did this data structure work for you? Any luck with the workflows? I’m dealing with a similar issue.

Hey guys,

maybe one of my templates could be helpful for you.

Many greetings.

Sarah

1 Like

Hey @adamlamb,

I have gotten it working yes. This is the data structure I used.

I then used this template Pastel Messaging Template | Bubble
and changed the data type names, and followed the errors in the editor, keeping on with original template’s workflows open in one tab and one with my app’s messenger in the other tab while working through the errors.

4 Likes

Cool that you got this working. But just curious about your process as someone just getting into this, if you are trying to examine a template to see how its working and apply it to your project, do you somehow copy and paste some of the components or do you recreate all of the elements and workflows from scratch? It seem like templates can be invaluable examples and building block frameworks, but what is the best practice for actually taking the next step and building them into your project?
Thanks!

Hey @n8works! For me, I copied and pasted the components and workflows from the template I posted above and tried to fix the errors. https://bubble.io/template/pastel-messaging-1503603150377x806065356889391100

Everyone learns differently and at their own pace and be patient with yourself :grinning: just keep working on problems and try everything to find out how you learn. For me, I wasn’t good enough yet to figure out how to create a messaging feature within my app so I used someone else’s work from that template and tried to understand it like reverse-engineering the software rather than building from scratch. This is a common practice within software development and even though it feels like cheating it’s not, it’s working smart – haha

Thanks for the response! I’ll give that a try!

maybe this can help Responsive Messaging 2.0 Template | Bubble (messaging/chat templates that can be integrated in any existing bubble app in 5 minutes)

Hmm, I might be missing something but this seems a bit mixed up for me. Why do you need a list of users under Thread when you already have Sender and Recipient. Also, why do you need sender and recipient at all when you can use the Creator detail from within the bubble app. This is a bit confusing to me.

Anyone on this thread include a block-user feature in their messaging component, or seen one included a template or plugin?
I know freelancing platforms like Fiverr use this feature to combat spam and inappropriate language.