Looking for an existing tool to send messages? We’d recommend using WhatsApp. But if you’re a maker who’s eager to start building your own messaging app, go no further than Bubble.

No-code tools like Bubble are revolutionizing how everyday makers can build software. Bubble’s powerful platform has made it easier than ever to start building software without having to write a single line of code. Our customers are using Bubble to build websites, directories, and even social networks.

Still interested in building your own messaging app like WhatsApp? Great, because this guide is for you! Throughout this article, we’ll take you through the step-by-step process of building your product from start to finish. Whether you’re looking to build a dedicated messaging app, or you’re just interested in utilizing some of the core features from WhatsApp, this guide will share how to start building the underlying workflows for your MVP.

Steps to build your own no-code WhatsApp clone:

Get Started

To get started, you’ll need a Bubble account, then you can follow along as we build our messenger app together.

Register your account on Bubble

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your WhatsApp clone.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. If you’re replicating a no-code version of WhatsApp, some of the core pages you’ll want to include are:

  • Registration page - Including relevant input fields to sign a user up
  • Home page - Displaying a list of a users existing messages
  • Chat page - Displaying a users list of contacts and also a field to create new contacts
  • Chat portal: Displaying the messages within a chat, as well as function to send new messages

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your WhatsApp clone, you’ll only need to create one page to host each chat. We can then write the necessary logic to display only the relevant messages within each chat when they’re needed.

Configuring your app

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building WhatsApp as an MVP, we’ll need to create the following data types & fields:

Data type: User

Data fields:

  • Name
  • Photo
  • Contact number
  • Contacts - List of users. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional fields
  • Chats joined - List of chats
Bubble No Code Whatsapp User Data Type and Fields Tutorial

Data type: Message

Data fields:

  • Message content
  • Messages chat - Chat
Bubble Whatsapp Clone Walkthrough Message Data Type and Fields

Data type: Chat

Data fields:

  • Messages - List of messages
  • Users - List of users
Bubble Whatsapp Chat App Clone Data Type and Fields

Building workflows

Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together - making your product functional.

In Bubble, the main way to do this is with “workflows”. Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Creating user accounts

Let’s start by building the workflow that enables a user to first create a new account. Within Bubble, we’ve made this process as intuitive as possible.

Once you’ve created a dedicated registration page, it’s possible to reuse elements from our existing library. Within the page dropdown, select the login/sign-up element.

Bubble Tutorial Sign up Login Popup for No Code Whatsapp Clone

You can easily copy the element template from this page onto your own account registration page.

By using the input fields provided, you can then create a workflow that triggers when a user clicks the sign up button.

Bubble Whatsapp Clone Tutorial Workflow Walkthrough

Within your workflow editor, you’ll then select to sign the user up.

Bubble Whatsapp Clone Tutorial Sign Up Workflow Walkthrough

From here, you’ll then match the input fields from the on-page elements with the necessary fields in your database to create a new user profile.

When building our WhatsApp MVP, we’ll also include some additional account fields such as a users contact number, name, and profile photo.

Bubble No Code Whatsapp Clone Signup Workflow Tutorial

Just like that, a new user profile is added to your platform. You can even select to remember the user and send them an automated confirmation email.

Building a home page to display a list of chats

The next key feature we’ll build is the home page of our product. The purpose of this page is to display a list of all the existing chats for an individual user.

We’ll start by using a repeating group element to display a list of user chats. Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type of content as chats.

You’ll also need to set the data source as a list of chats within your database. Finally, we’ll add a constraint to our data source, opting to only fetch the chats that include the current user. This will ensure that the current user only sees the chats that are relevant to them.

Bubble Whatsapp Clone Tutorial Chat Example

Now you’re ready to start structuring the dynamic content that will be displayed within the grid. Simply map out the top column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

In the case of our repeating group, we’ll want to include the names of both the users within each chat.

Bubble Whatsapp Clone Tutorial Chat App Walkthrough

We’ll also display the last message sent within the chat.

Display Last Message in Chat App Bubble Whatsapp Tutorial

Within a repeating group, it’s also possible to create workflows based on the individual elements within each row.

This will come in use when a user clicks on the text of a chat, opening the entire message thread on our chat portal page.

Bubble No Code Whatsapp Chat App Template Workflow Tutorial

Within your workflow, you’ll create a navigation event, directing the user to the chat portal page.

Bubble Whatsapp Chat Clone Tutorial Workflow Walkthrough

Within this workflow, we’ll also need to send the data of the current cells chat. This will allow our chat portal page to register which messages to display when the user lands on the page.

Bubble Whatsapp Clone Chat Portal Workflow Tutorial

Finally, the last feature we’ll add to our home page is a simple icon that will direct users to our create chat page.

How to begin workflow for Bubble Whatsapp clone
Begin a Workflow when the "Create Chat" Icon is clicked.
Bubble Whatsapp Clone Create Chat Workflow Walkthrough
Select Navigation > Go to page in the Workflows tab
Bubble Whatsapp Clone Create Chat Tutorial Step by Step.
Choose the new destination for when the user clicks the Icon.

Creating new contacts

On our chat creation page, we’ll use another repeating group to display a list of the current users list of contacts.

Create new contacts in Bubble Whatsapp clone tutorial

Within this page, we’ll also need to create a function for users to add new contacts within their list. We’ll achieve this by using a popup element. Popups are a useful way to display information or create events without directing the user away from the current page.

Create new contact popup element Bubble Whatsapp tutorial

Within our MVP, our popup will include a basic search bar element and a button. The search bar will be used to search for contact numbers within our database.

When configuring this element, start by setting the choices style to dynamic choices. You’ll then need to select the list of items to be users, and the field to search as the users contact numbers.

Create new contact tutorial for chat app in Bubble.

This will now index all the contact numbers within your database and even offer search suggestions as they’re typed.

Once a user has selected the contact number they wish to add, we’ll create a workflow from our add user button that will add the contact number into the list of users contacts.

Bubble Workflow Walkthrough for Whatsapp clone chat app.

This workflow will be used to make changes to a thing.

Workflow for adding users and contacts to Bubble chat app clone.

The thing we’ll want to change is the current users contact, adding the search box’s value.

Make changes to user in Bubble Whatsapp chat clone tutorial.

Additionally, we’ll also want to make changes to the receiving user - adding the current user into their list of contacts.

Create contacts in Bubble chat app how to tutorial.

Once this workflow has run, the new contact will automatically be added to the repeating group on the contact page for both the users.

Creating new contacts

Once a user has added a new contact, we’ll start building a separate workflow to create a new chat when a profile is clicked on the contact page.

Similar to our home page, we’ll start this workflow by triggering an event when an element in the top grid is clicked.

How to create new contacts in bubble whatsapp clone

Within this workflow, we’ll want to create a new thing.

Workflow tutorial for creating new contacts in chat app on Bubble

The thing we’ll want to create, is of course, a new chat. Within this event, we’ll also add both the current user and the current cells users as the participants within the chat.

Create New Chat with Bubble Whatsapp Clone Workflow Walkthrough

Finally, we’ll then redirect the user to the chat portal page, also sending the data from the new chat we’ve just created.

Bubble Workflow Walkthrough Whatsapp Chat Portal

Displaying and sending messages

The final feature we’ll need to build in our MVP is the function to not only display messages within a chat, but also send new messages between users.

On the chat portal page, start by configuring the page type to be a chat. This will allow the Bubble editor to register the type of content on the page.

template for Bubble whatsapp clone chat portal page

From here, we’ll then add another repeating group to display the list of messages within the current pages chat.

RepeatingGroup Data source for Bubble Chat app tutorial

Once you’ve mapped out the content to display within each grid, we’ll then build the workflow to send messages within this chat.

Start by creating a workflow when the send button is clicked.

Workflow walkthrough for Whatsapp no code clone in Bubble

Start this workflow by creating a new thing - a message. When creating a message, match the multiline input element with the message content field in your database.

Creating a new message in Bubble chat app tutorial

Once a new message has been created, we’ll need to create an additional step that adds this message to the current chat. This can be achieved by making changes to a thing - the current pages chat. Within this step, we’ll add the message created in step 1 of the workflow to the current pages chat.

Workflow walkthrough for no code whatsapp chat in Bubble

Now the repeating group on your chat page will update in real-time whenever a new message is sent.

Additional features

After building these core features for your MVP, you’ll become familiar with the process of creating custom data fields and displaying dynamic content. If you’d like to continue adding additional features to your messaging app, you could consider:

  • Adding support for group chats
  • Creating message reactions
  • Using our rich text editor plugin for sending rich content in messages

Launch

Hiring a developer or dev team to build this app would cost thousands, if not tens-of-thousands of dollars. As you launch and grow in users, our paid plans allow you to host the app on your own custom domain for as little as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of a message app without any additional costs.

Templates

If you don’t want to build your WhatsApp clone from scratch, you can purchase one of the templates made by our community members. Some similar templates to include:

Start Building

Bubble can help you build an WhatsApp clone or any other product you choose! It’s never been easier to build something incredible without having to code.

To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.

Bubble-CTA@2x-3