How to Create a Real-Time Live Chat for Customer Support

One of the most engaging and powerful tools you can have on your website or application is live chat—it’s like you’re standing in the room with your customer, available to assist them in real-time. With live chat, you’ll be able to significantly enhance your user experience, increase your sales conversion rate, and boost your customers' confidence. Modular real-time chat SDKs, powered by PubNub, offer a solution for the unique needs of live chat for customer support. Our Live Support Chat Kit is optimized to meet the common needs of a live support widget for customers, and provides a comprehensive dashboard for support agents. And since the live chat kit is modular, you can enable and disable components and customize the CSS to meet your needs. 

How to Create a Real-Time Chat App

This tutorial will guide you through the steps to easily build a live chat customer widget and dashboard for your application or website using components in React. Thanks to React, you can tweak and arrange the many UI objects that make up your live chat application using just a few components. These components enable you to quickly and effortlessly customize the support chat experience to your needs with a lot of flexibility. 

About the real-time chat components

The components for our Live Support Chat kit are built to be expandable, reusable, and flexible for integration into another React application. You can modify the open source chat components by editing their CSS and layout to your specifications. This tutorial for how to create a live chat application serves as a template of how to build a straightforward, but winning, live chat solution. Feel free to use it as a starting off point for your real-time chat application and customize as you see fit and as fits your use case.

Choosing the API to create your live chat application

Before you dive into building your live customer support chat, consider how your messages will be transmitted—this will guide which API provider is the best to build your live chat app. The components we’ll be going over in this post are an example of how to integrate open source React chat components with PubNub to power all chat features.

In this tutorial, PubNub is leveraged to create features for your real time chat application, such as:

PubNub is a perfect fit for powering customer support chat applications as it’s adaptable to the needs of any application that can benefit from real-time messaging. You can learn more about the basics of PubNub and how to set up your account in our documentation.

Key reasons to use PubNub to create live chat app for your website or app:

The best part of building with PubNub? You don’t need prior experience with PubNub or PubNub SDKs to use these React chat components. The components explained in this tutorial are already fully integrated with PubNub, and this tutorial will explain exactly how PubNub works with each chat component so you’ll have a clear understanding of how to build your live support chat.

The Node module dependencies required by the chat components must be installed. This process may take a few minutes to download and install the dependencies with npm, a popular package manager for the Node.js platform.

Now, you're ready to run the project.

The Live Support Chat Dashboard should now be accessible at http://localhost:8080. However, to properly test it out, you'll need to start a Customer Chat Widget.

Building and running your real-time customer chat widget

To create your customer-facing chat widget, navigate into the repository using your terminal. The Customer Chat Widget can be tested and run from this location.

Next, you need to configure the components with the API keys obtained from your PubNub dashboard. These API keys enable your application to send and receive messages over the PubNub network, providing real-time functionality.

Open the file src/config/pubnub-keys.json and **replace YOUR\_PUBLISH\_KEY\_HERE and YOUR\_SUBSCRIBE\_KEY\_HERE** with your API keys. For security reasons, consider using environment variables to store your API keys instead of hardcoding them directly into your code.

Now, install the Node module dependencies used by the Customer Chat Widget components. This process involves downloading and installing the dependencies with npm.

You can now run the project and test out the components.

The Customer Chat Widget should now be accessible at http://localhost:8081.

Testing customer support real-time chat apps

When the Customer Chat Widget React app opens, you should see a new active user appear in the Support Agent Dashboard. If you refresh the Customer Chat widget or open it in more windows, more users will appear in the active users list on the Support Agent Dashboard. Based on the settings you've configured in your PubNub dashboard, these users will disappear once you close the Customer Chat Widget windows.

Try selecting a name in the active users list to open a chat in the Support Agent Dashboard. Enter text in the text area and press enter. Your message should appear in the message list area in both the Support Agent Dashboard and the Customer Chat Widget. You can respond from the Customer Chat Widget, and the messages will also appear in the Support Agent Dashboard.

Creating your live support chat component structure

Now that you've tested the Customer Support Chat Kit components, let's take a look at the component structure of each UI view. The Support Agent Dashboard and the Client Chat Widget have slightly different component structures, but in both live chat applications, the components work together to deliver a complete chat experience. These components are designed to be easily customizable and extensible for added functionality.

Creating Support Agent Dashboard structure

Creating Customer Chat Widget structure

By now, you should have a good understanding of how the live chat components work together to facilitate real-time communication between both sides of the conversation, after demoing both of the Support Chat Kit UI views. Let's delve deeper into how these components work and how you can tailor them to your needs.

Positioning your real-time chat components

Some components primarily serve to position the functional chat components. These include:

**ChatDemo:**

Used in both UI views, this component outlines the majority of the application's structure. If you open the file src/components/ChatDemo/ChatDemo.tsx in either UI view, you'll find the component structure. Notice how in the Support Agent Dashboard, there are two main sides to this chat application, while the Client Chat Widget only has one.

**MessageListPanel:**

In both UI views, this component provides the alignment for the MessageList component and the compose text area. You can find the component structure in the file src/components/MessageListPanel/MessageListPanel.tsx for either UI view.

With these components and the right adjustments, you can create a powerful real-time chat solution for your customers. For more information and tutorials like this, check out our documentation. Happy coding!

The MessageListPanel component has an area to display the current user avatar. The avatar URL is created in the `src/AppStateContext.tsx` file when defining the initial state. It's set from the name created by the `generatedName()` function for the Customer Chat Widget. The Support Agent Dashboard always uses the name "Support Agent", so the avatar stays consistent. Consider the avatar URL a placeholder where you can set custom avatars or use a service like Gravatar for avatars.

selfAvatar: "https://ui-avatars.com/api/?name="+generatedName+"?size=100&rounded=true&uppercase=true&bold=true&background=edab63&color=FFF", //The img for the avatar graphic file selfName: generatedName, // Set the display name.

**ActiveUsersListPanel:**

This component is only for the Support Agent Dashboard. It aligns the ActiveUsersList component.

**Compose component for your live chat application**

Both compose components can be found in the `src/components/ComposeMessageBox` directory for either view. Open the file `ComposeMessageBox.tsx`, and you’ll see the compose component returns a text area.

A function for handling key press events dispatches the `SEND_MESSAGE` function declared in the `src/AppStateContext.tsx` file for both views.

The `SEND_MESSAGE` function publishes the contents of the input field to the active channel. In this app, the Customer Client Widget publishes messages to a channel name based on the user's generated name. The active channel for the Support Agent Dashboard is determined by the last user selected in the active users panel (it must be selected first). The sender’s name is also appended to the published message.

**Presence Component for your chat application**

The Support Agent Dashboard features an active users component that’s found in the `src/components/ActiveUsersList` directory. Open the file `ActiveUsersList.tsx`. The component returns a list from the UUIDs in the `state.activeUsers` array. The active users component also shows a count of the current occupancy in the header of the list. The UUID for a user is configured to the same as the generated name for each user and as a result, you don’t need any additional information to visually display who a user is.

Upon selecting a user from the list, the `CHANGE_CHANNEL` function gets dispatched. This function is responsible for updating the `state.messages` array within `src/AppStateContext.tsx` with the message history for that specific user. This is a crucial part of creating a real-time chat app since it allows an agent to see messages even before they open the chat. If there are no messages, an alert prompts the agent to begin the conversation.

The `src/AppStateContext.tsx` file is used for managing the `state.activeUsers` array. When the application starts, a `hereNow` call is made to PubNub to retrieve the occupants of the global channel. It's worth noting that the support agent is not added to the list to prevent them from chatting with themselves.

The `REFRESH_ACTIVEUSERS` function updates the `state.activeUsers` array with the newly fetched list of users while the `UPDATE_OCCUPANCY` function updates the count of `state.presenceOccupancy`.

The list of active users is updated by a PubNub listener callback each time users open or close the Customer Chat Widget. This listener callback is also responsible for handling new messages in the Support Agent Dashboard.

Chat Message List Component

The Chat Message List Component is essential in any chat application. It displays the conversation history between the Support Agent and the customer. Each message is presented with the sender's name and avatar. The component is located in the `src/components/MessageListPanel` directory.

Remember, building a real-time chat using modern technologies is no small feat, but with the right tools and resources, you can create a dynamic and engaging user experience. Check out our documentation for more information on how you can leverage PubNub's APIs and services to enhance your application.

The Message List component is located in the `src/components/MessageList` directory for both chat UI views. This component returns the list of messages from the `state.messages` array. This component is essential for both UI views when implementing a real-time chat solution.

The Message subcomponent is located in the `src/components/Message` directory for both chat UI views. Messages are formatted conditionally depending on whether you sent or received the message. Each message is formatted with an avatar (generated from the message sender name), the sender name, and the actual message. The message subcomponent for the Support Agent Dashboard is slightly different to enable alerts to help the agent use the dashboard.

The management of the `state.messages` array is handled by the `src/AppStateContext.tsx` file for both chat UI views. Once the application initiates, it begins subscribing for messages. In the Customer Chat Widget, the subscription is for the universal support channel (“support”) and an active channel designated as “support.[generated name]”. Meanwhile, in the Support Agent Dashboard, the subscription is for the global support channel (“support”) along with the global channel + wildcard (“support.*”). The subscription for the global support channel “support” is exclusively for application-wide presence, and not for transmitting and obtaining messages.

**Support Agent Dashboard:**

**Customer Chat Widget:**

The PubNub listener callback receives new messages from the subscription. The Support Agent Dashboard also filters messages and only displays messages received from the currently active chat/channel.

**Support Agent Dashboard:**

**Customer Chat Widget:**

The ADD_MESSAGE function appends messages to the message list array. This function adds the new message to the beginning of the array and disposes of old messages.

**Elevating Your Live Chat App with Additional Features**


These open-source chat components enable you to build an all-purpose chat support solution. They're expandable with additional features and customizable via CSS. Think of these components as a template that can easily integrate with your application to enhance user engagement and sales conversion.

Here are some other fantastic chat features you can integrate with PubNub:

Are you building a live support chat app? Reach out to our sales team to get your in-app chat up and running in no time.