![](https://framerusercontent.com/images/zxNuAqdSqxLwW4r4qpU6Cwo.png)
Simon Jenner
Saturday, 3 December 2022
![](https://framerusercontent.com/images/PFMskfYP3xrpbPaxvYWokSyGQM.png)
Guide on how to add chat functionality to your app
Posted in:
No-Code
Lead Owner: Joseph
(Responsible for updating the document & helping out with any questions)
Bubble Editor Link: Click here
Screenshot of Notification Mockup (not designed):
Step 1: Data architecture
Additional Notes
Several of the fields on messaging aren’t mandatory to the function of the system, but are very useful to have.
“Read by”: Lets you integrate the chat into an “unread messages” system.
“Thread”: Back-linking the message to the chat it is part of makes searching the database less complex in some cases.
Step 2: Chat interface
Additional Notes
This is simply a guideline of how a chat interface could look, it is by no means the only way your chat can look, you are free to design it however best fits the application you are working on.
The reason for setting it up in this way is that it’s considered “standard” design to have the threads on the left and messages on the right, provided they’re both to be displayed at the same time. Ensuring that interfaces feel familiar to users is essential
Step 3: Chat list setup
Additional Notes
The fields being displayed are optional (photo, name etc.) and are just for example purposes, the actual required fields will vary from client to client.
Step 4: Chat messages
Additional Notes
The client may want different elements added to the display, such as names above the chat “bubbles”, profile picture of the current user etc.
Step 5: Adding messages
Additional Notes
If you’ve added extra fields to your data-structure, you will also need to populate them at this stage, if applicable. This might include attaching files or images to a message (similar to Skunkworks).
Step 6: Create a new chat
Additional Notes
There are many ways that a client may want users to create chats or interact with the chat system. This video explores a common one, a chat button on another page.
Creating a new chat always uses similar workflow actions to those shown in the video, regardless of where the user is on the website. The only difference may be extra steps such as creating a default message or not navigating a user as they’re already on the right page.
Step 7: Sorting the displays
Additional Notes
These are just “standard” ways of displaying the data as it is one of the most commonly used. It’s always important to remember that users won’t have the intrinsic system knowledge that you have, so making interfaces intuitive and easy to use is incredibly important.
Launch Your Startup Fast and Affordably! Our no-code approach is perfect for non-tech founders. With a simple 3-step process: START, LAUNCH, GROW, join over 1400 startups we've successfully launched. Start your journey today!
Join