Chats and messaging systems are among the most widely used features in our world.
Whether you're building a Marketplace, a Saas, a Slack competitor or any software that connects people, you'll probably be needing a chat system in your app.
In this article, you will learn step by step how to build this type of functionality in Bubble.
1. Structuring our Database
In this section, we are going to structure our database. So we'll create the necessary Data Type and their relative Data Field.
Let's see what a Chat is made of :
1. Conversations
A chat system is basically made of 2 data types.
The first one is "Conversations".
Conversations are what you usually see on the right on the screen. They are composed of at least 2 Users (= participants) that send messages to each other.
You can add as much participants as you want (in the event of a Group conversation for example).
On top of that, a conversation can have many other fields depending on the functionalities of your system.
For example, a conversation could have a field for a custom thumbnail, for a custom conversation name, a list of shared media etc... The possibilities are endless.
What matters more is that a conversation stores a List of Messages and a List of Participants.
This is the basics of a Chat system.
2. Messages
Now comes the most obvious component of our system, the Messages.
Messages composed of two things :
A content (text)
A sender (user)
On top of that you add pretty much anything you like, such as reactions, attachments etc...
But those two fields are pretty much mandatory.
2. Building our Chat UI
Now that our database is correctly structured, we need to build our UI.
In this article we'll focus more on the "behind the scenes", and less on the Front-End work.
So for this example we'll use a premade Chat component from Nocodable Component's library.
This way we'll have a clean, professional and fully responsive UI to work with in just a few seconds.
Click here to access our collection of premade Chat components for Bubble.io
3. Connecting our Database with our Interface
Displaying conversations
Setting up our Repeating Group
Let's start by displaying the list of conversations joined by our User.
In our UI, this is done through a Repeating Group, positioned on the Left of our screen.
Let's start by setting up the Content Type of our Repeating Group to "Conversations" :
Once this is done, we can go ahead and tell Bubble where to actually fetch the right data.
This is done with a "Do a Search For" that will search for "Conversations".
On this search, we'll add a constraint to make sure to retrieve only the conversations where the User is an actual participant.
Finally, you can sort this search on the "Modified date" field with descending set to "yes" to show the most recent modified conversation on top.
This will display on top the conversations that have the most recent messages.
Displaying conversation information
Now all we need to do is make sure that the data is going from our Repeating Group all the way down to our Text element.
This is in order to be able to display the conversation information (such as its Title, it's participants, latest message etc...).
So for each group present in the Repeating Group, you'll need to set the correct Content Type, and the Data Source :
Once this is done, you'll be able to select "Parent's group Conversation" and display the appropriate data field.
For example in my case I chose to display the first name of each participant as the title of the conversation (as shown below).
Repeat the operation for this other fields you need to shown (like the latest message preview), and you'll be all set.
Opening a conversation
Now we need to be able to open a conversation, in order to actually see its content (i.e the messages).
You have several ways to do this, for example you could use a Custom State.
But I prefer to use the Data Source of the container that holds my message.
In my case, this is the container on the right of my screen :
In order to do this, you can add a workflow on your conversation and use the action "Display data in a group/popup" , like below :
This way, when the conversation is clicked, this workflow will send this conversation into the Group.
And when this, we'll be able to display the messages !
Also, you can use this information to change the style of the conversation you clicked, in order to indicated to the user that this is the conversation he's displaying :
Displaying messages
Now that we've sent the active conversation at the right place, we can use it to display the Active Conversation's list of messages.
To do this, we need to set the Repeating Group used to display our messages :
Let's start by setting up its Content Type :
Once this is done you can fetch the Messages of the active conversation by referencing the Group in which we displayed the Data earlier :
Finally, don't forget to sort the messages with the :sorted operator so that messages are displayed with the most recent ones at the bottom.
Now all we have to do left is set the correct Content Type of each group in our Repeating Group and tie each elements to the relevant field (text content in my case).
Finally, we need to apply two conditionals to show the correct Chat Bubble based on who sent this message.
To do this let's apply this conditional on the Blue Bubbles (i.e the messages sent by the User) :
And let's apply this conditional on the Grey Bubbles (i.e the messages sent by everyone else than our User) :
Also make sure that these groups are hidden by default (i.e not visible on page load) and that they Collapse when hidden.
Cool ! Now our system is showing the messages from the active conversation !
4. Build the logic
Now that we have our UI and a functional displaying system, we can keep going and build the logic to make our Chat system work.
Sending messages
To send a message, what your app needs to do is to :
- Create a new message
- Add this message to this list of messages in our conversation
Easy right ?
To do this, let's start by creating a workflow on our "Send message" button.
In its first step, here's what our workflow's doing :
It's simply creates a new messages with the appropriate fields.
In its second step, our workflow adds the messages we've just created to our Conversation's list of messages.
To select the correct conversation, we use the Data Source from the group we displayed our data in earlier.
And as the 3rd step, don't forget to use the "Reset relevant inputs" to clear the message input after sending the message.
And there you go !
With this tutorial you'll be able to create anything messaging system or any messaging app. Whether it's an additional feature in your app, its core feature or simply for support.
Hope you liked it.
Happy building !
