A Custom Chat Button for a React App

React is one of the most popular ways to build modern web apps and adding a live chat to your React app can be a great addition to your CX strategy. The Kustomer Chat SDK for Web it’s a library aimed to do this, even though the Web SDK is not specific for React, it can easily be added with a few lines of code.

This blog is a starting point to use the Chat SDK within a React app or if you want to customize how the chat is launched in your web app.

In the following steps we're going to show you how to use the Kustomer Chat Web SDK from a React App and make use of options and events to implement a custom button to open the chat window. To follow the next steps you will need to know the basics of React and how to create a new React project.

Step 1: Create a new React Web App

We are going to create a new React project with the Create React App utility.

npx create-react-app my-app
cd my-app
npm start

Step 2: Add the Kustomer Chat SDK

Once this project is set up and the sample app is running, we will add the SDK library to the app using the asynchronously loading method.

Also we will add a loading indicator using a local state variable isChatLoaded that will be updated in the kustomerLoaded event callback function. The isChatLoaded variable will be used to conditionally render the Chat SDK is loading... text until the chat is loaded. Notice that this message could be visible for a second or less.

Edit src/App.js

import React, { useEffect, useState } from 'react';

const KustomerChatAPIKey = '<YOUR-CHAT-API-KEY>';

function App() {
  const [isChatLoaded, setChatLoaded] = useState(false);

  useEffect(() => {
    window.addEventListener('kustomerLoaded', function() {
      setChatLoaded(true);
    });

    // Dynamically adds the SDK to the page.
    var script = document.createElement('script');
    script.src = 'https://cdn.kustomerapp.com/chat-web/widget.js';
    script.setAttribute('data-kustomer-api-key', KustomerChatAPIKey);
    window.document.body.appendChild(script);
  }, []);

  return (
    <div className='App'>
      <header className='App-header'>
        ...
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        { !isChatLoaded && <div>Chat SDK is loading...</div> }
        ...
      </header>
    </div>
  );

Replace <YOUR-CHAT-API-KEY> with your own Chat API Key in the variable KustomerChatAPIKey. If you don't have an API Key yet, you can find additional information on how to generate a new one here.

Step 3: Start the Chat SDK

After the SDK is loaded, we can initialize the chat using the start method. We will invoke the start in the kustomerLoaded callback function to make sure that the initialization is done after the SDK library loading is complete. Using start with an empty options object will initialize the chat with the default settings and display the default icon to open the chat.

function App() {
  const [isChatLoaded, setChatLoaded] = useState(false);
  useEffect(() => {
    window.addEventListener('kustomerLoaded', function() {
      setChatLoaded(true);
      window.Kustomer.start({}, () => {
        console.log('Kustomer started');
      });
    });

Step 4: Add a custom button

In the previous step, the chat is initialized with the default settings and it is already fully functional. Now, we will use the option hideChatIcon to start the chat without displaying any default icon.

We need to add a custom button to have a way to open the chat window, we will use a built-in <button> component and the onClick event to invoke the method Kustomer.open(). Also, we will use the isChatLoaded to render the button only when the chat loading is complete.

Additionally, we will add a new local state variable chatStatus and add listeners for the events onOpen and onClose to update the chatStatus status. Using the chatStatus variable we will hide the custom button when the chat window is open.

function App() {
  const [isChatLoaded, setChatLoaded] = useState(false);
  const [chatStatus, setChatStatus] = useState('closed');
  useEffect(() => {
    window.addEventListener('kustomerLoaded', function() {
      setChatLoaded(true);
      window.Kustomer.start({ hideChatIcon: true }, () => {
        window.Kustomer.addListener('onOpen', () => setChatStatus('open') );
        window.Kustomer.addListener('onClose', () => setChatStatus('closed') );
      });
    });
    ...
  }, []);
  const openChat = () => {
    window.Kustomer.open();
  };
  return (
    <div className='App'>
      <header className='App-header'>
        ...
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        { !isChatLoaded && <div>Chat SDK is loading...</div> }
        { isChatLoaded && chatStatus === 'closed'
          && <button className='Chat-button' onClick={openChat}></button>
        }
        ...
      </header>
    </div>
  );

Great! We have completed a basic React app that loads the Chat SDK asynchronously and uses the listener to properly initialize after loading. Also, we update the local state variables using the event listeners and later use them to conditionally render text messages and the button. This project can be also the starting point to implement other use cases and chat experience customizations.