How to build a fully-featured live chat with React?

This year poses a major challenge to all companies around the world. How can I attract more customers? Or even if you have already a customer base: How can you deliver excellent support to them? The best way to achieve this is by adding a live chat module to your React app.

One of the best solutions to implement a live chat on the React ecosystem is using Stream.io chat API with our very own react-chat-widget. Stream.io is a flexible activity feed and chat API that allows you to build a live chat, messaging app, irc, or customer support chat with a lot of customization options in just a few lines of code making it an excellent choice for a faster developing.

What is react-chat-widget and how will it make your life easier?

The react-chat-widget is a widget component developed and maintained by Wolox. It’s a fully customizable widget that can be integrated with any chat API and allows an interface with a plain text message UI for bidirectional chat conversation. It also supports snippet style for links, customization of avatars, a chat welcome message, and markdown for messages. Moreover, you can do all that just adding a few lines of code to your app.

Let me show you how in a few steps we can create a feature that will add great value to your product using the Stream.io features combined with our very own react-chat-widget module. You can also find a public repo on GitHub with the final example code.

Creating a Stream.io account

First, we will need to create a Stream.io account. Thanks to the one-month trial version that is available in Stream.io, you can get your app key for free. Once in our dashboard, we are going to create an app in development mode (as shown in Figure 1) and it would take us to the app dashboard where we can get our app id key.

Create a React app and add the react-chat-widget

To initialize our React app, we’re going to use create-react-app. If you don’t have any knowledge about this library, please check the repo.

create-react-app chat-support
cd chat-support

Then, we add the chat-react-widget library to our React app:

npm i react-chat-widget

On our App.js root file, we delete all the code that create-react-app creates for us and import our Widget component from ‘react-chat-widget’ and the default styles of the component.

If you run the code on your local machine you could see that we already have the chat widget set just by adding these few lines of code.

Integrate the widget with Stream.io

Now we are going to integrate our widget with the Stream.io API, for this we need to add the stream-chat library`

npm i stream-chat

Then we import StreamChat from the library to create a new instance that will allow us to communicate with the API. For this, we will need our app key. We don’t want to expose our secret API key so we’re going to store it as an environment variable in our .env file and then call the variable from our component.

Next, we will need to create a user for our chat and a channel where we will store our messages. For this, we will use the new client instance that we created before and an useEffect to create both instances as the component mounts.

Now we are going to set the user first, for this we will use the setUser function provided by our client instance. It needs two arguments to set the user. First, a user object with the user id and the user name. Second, you need the user token. In this case, as we are working on a development environment, the chat API allows us to use the devToken function with the user id to create it.

Now we can set the channel where our user will send the messages. For this, the API allows us to create the name of the channel and we can set a channel type. In this case, we will set it as a ‘messaging’ channel type. We also need to save the response of the API on a variable, and for that case, we set a variable with useRef and save both of them there.

Now we are connected to the Stream.io API with a user within a channel. Next, we need to be able to send messages to that channel. To do that, react-chat-widget has a function prop called `handleUserMessage` that brings us the message typed by the user. We will use the channel’s sendMessage function to add the message to our API.

Finally, we need to set the messages to our widget when we refresh the page. To achieve this, as we watch the ‘channel’, we will set a ‘message state variable’ and an ‘effect function’ that will run each time the message variable gets updated from the channel. This effect will run a function from the widget API that allows us to add messages to it.

Final words

As you can see we have just implemented, with only a few lines of code, a simple live chat that will allow us to add customer support to any React application. Of course, this is just an example but you can take advantage of all the features the react-chat-widget provides and the powerful Stream.io API to customize and add more and more behavior to it.