How to Add Live Chat and Messaging to Your Chat App

Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

This tutorial will break down all the steps and best practices you need to build a high quality chat experience for your use case.

There’s a lot of choices to make as you integrate chat into your app and there’s a lot of steps to make in-app chat work for the functionality you need. This tutorial will break down all the steps and best practices you need to build a high quality chat experience that’s customized with the right chat features for your messaging platform needs and user expectations.

Major questions you should consider when deciding how to add chat to your app

To kickoff this tutorial, it’s important to first consider the following questions. Your answers will help guide your development process—what chat features you need, the specifics of how you should build, and even what style of chat you should integrate into your app, be that live events chat or Slack-style group messaging.

Chat is essential for customer retention. How do you build a scalable real-time messaging experience that solves your user experience needs?
Customization for your use case is key to a great chat experience and user experience overall. How do you need to think about using a chat api or chat SDK to shape a chat solution for your exact needs? What specific and unique customizations do you need to build into your real-time, in-app chat?
There are different ways users chat within applications. Matching these user expectations around chat will affect what you need to consider to build your chat platform. Are you building customer support chat, a Slack-style group chat, or live event style chat rooms? Or are your needs a completely unique messaging experience built into an existing web app?

This tutorial will cover how to add live chat and messaging to your application in a way that addresses your answers to these questions. We’ll show you how to build using languages like React, React Native, Javascript, and more for iOS, Android, or Webpages. You’ll understand exactly what you need to do to create chat experiences like:

A chatbot for FAQs on your website with a text message like chat box.
A live chat support center plugin or live chat widget for your website visitors.
A customer support chat service or chat window for real-time messaging within your application.
Cross-platform chat mobile apps with Facebook messenger or Whatsapp, like instant messaging or text messaging in real-time.
A telemedicine live chat tool for SMS, like chat between doctors and patients.

Add chat app styles to enhance your messaging experience

There’s no one size fits all when it comes to building chat, but customization is a key functionality you want to ensure is a part of the messaging API you choose to build with. Customization allows you to develop in-app chat that meets your users expectations and provides them with a great experience. A few common examples of real-time chat styles that you can customize are:

Real-time live event chat messaging

This style of chat can work for a variety of use cases including: classes, sports, concerts, streaming, and more. This style of chat features an area for a live video stream, a message list, and an area for composing.

Chat brings the energy of in-person interactions to virtual live events.

This type of chat has two requirements: dependability at scale for large chat audiences and the ability to manage dialogue. These requirements exist because live events platforms need to successfully manage the chat stream flow to maintain a maximum message rate and avoid latency and concurrency issues, particularly for large audiences that have a lot to say.

Live support messaging and one-to-one messaging

This style of chat is focused on one-to-one messaging between an agent and a user. There are actually two views you’ll need to build: an agent dashboard and a client chat widget.

customer support.png

The agent dashboard will need to include a message list, an area for composing, and an area to list and select user chats. The client chat widget will need to include a message list and an area for composing messages. This type of chat requires that you manage the online status of users, handle signaling for creating new chats on the agent dashboard, and potentially push notifications for mobile devices if you want the user to be able to disconnect while a chat is in progress.

Group chats

Group chats appear in a lot of places. Multiplayer games require them for user engagement or a blog may use group chat for the comments for a post.

Simple Chat

This style chat features: a message list, an area for composing, and an area to list users. The user list area may optionally show offline users in addition to online users. It may also be selectable to enable one-to-one chats.

What are the required features of a chat app?

You probably noticed some similarities between the common styles of chat listed above. In most messaging apps, there are a few key parts you’ll want to include in your chat for essential functionality:

Chat message list area

This area shows the messages received. It may feature threading and emoji reactions to received messages. In more complex examples, you’ll find it also allows for editing messages, searching, and sorting.

Chat compose message area

This area is where a user can create a new message to be sent. It may feature advanced styling and an emoji selector for non-mobile devices.

Chat user list or presence area

This area shows who else is listening for messages. It may feature being selectable for one-to-one chat functionality. In more complex examples it may provide searching, sorting, and automatically hiding in a mobile app or on small screens

Required features for mobile chat on iOS and Android

If you’re building a chat app using iOS or Android, there are a few differences in the features you should include and that users expect compared to web-based chat apps. These mobile specific features are:

Push Notifications. Users on mobile devices often keep their phones locked even while waiting for someone to reply to a message. Notifications are essential to keep users engaged.
Usability. Screen space is limited. Things that users don’t always need, such as emoji selectors and user lists, need to be hidden when not in use so that users can focus on chat messages.
Features. Mobile users are used to sending rich messages with images and reactions. Your app must deliver the experience set by the expectations from other popular messaging apps.

Where to find a messaging SDK or chat API backend that’s scalable

So now that you’ve identified what features your in-app chat requires and style of chat works best for your needs and your users’ needs, let’s explore how to actually build in-app chat. A free PubNub account has all the features you need to build the chat experiences in this tutorial. With Pubnub, you won’t need any other backend for building the chat features covered here.

Once you sign up, you can get your unique PubNub keys from the PubNub Admin Dashboard—be sure to select the PubNub SDK that’s right for your application. The docs within our admin portal cover the specifics of implementing the features overviewed here. Each language is a little different, but functionality is mostly the same across SDKs. And if you’re building a cross-platform chat experience you’ll be able to take advantage of PubNub SDK flexibility to easily work across your source code.

In the following sections, we’ll outline how to build the specific parts and features of your chat app that we’ve explored above using PubNub, specifically by building with our pre-built React chat components and kits.

Adding message list area for chat

This area is where chat messages will be displayed. Before you begin building, you’ll need to consider how you’ll want messages to be formatted: do you want profile images? Do you want the sent and received messages on opposite sides of the view? Do you want Emoji reactions?

In our React Chat Component Live Support Starter Kit we’ve created a styled message component that looks like this that results in what you see above:

<Message message={messagetext} />

Adding a message compose area for chat

This area is where a user can type a message and send it. You’ll want to consider the functionality you’ll need: Do you want to allow Emojis? Image and file uploads? Links?

In our React Chat Component Live Support Starter Kit we create a basic styled component that looks like this that results in what you see above:

<ComposeMessageBoxWrapper>
     <UserImgWrapper src={state.selfAvatar}/>
     <TextInputWrapper>
          <SendMessageField />
     </TextInputWrapper>
</ComposeMessageBoxWrapper>

Adding a user list area for chat

This area shows a list of users that are online. You’ll want to consider the functionality you’ll need: does it show offline users in addition to online users? Is it selectable to enable one-to-one chats? Does it show message previews and the last time a user was seen online?

In our React Chat Component Simple Starter Kit we create a styled component that looks like this that results in what you see above:

<ActiveUsersHeader>Active User</ActiveUsersHeader>
<ActiveUsersListWrapper>{ActiveUsers}</ActiveUsersListWrapper>

Additional chat features you can build with PubNub

Once you’ve built out the essential features of live chat and messaging—like a message list and compose area—you can continue to give your uses more valuable features with PubNub, like:

Conclusion and additional resources

In this article, we’ve outlined how to identify the right chat style and features to add into your app and how to build them with PubNub. PubNub offers a powerful real-time network and APIs to send and receive data in any application. Take advantage of our services to easily build chat with enterprise-grade security, scalability, and reliability. PubNub eliminates the time it takes to set up and manage your infrastructure so you can focus on solving business problems for your customers.

You can start creating your chat application or adding chat to your application with these resources:

And if you’re looking for a more customized chat solution and building support from our expert team of Solution Architects, get in touch with our sales team today.