How to Build & Integrate a Chatbot in React JS

React JS has steadily climbed the popularity charts when it comes to Javascript libraries preferred by developers to build fast, responsive and good looking websites.

Building a chatbot in react Js website may have been a complicated affair in the past, but not so today, thanks to Kommunicate’s Kompose chatbot builder.

In this blog post, we will teach you how to integrate the chatbot in react js website.

We’ll do the integration in 2 phases:

Create a Kompose chatbot and setup the answers.
Add the created chatbot in React JS website.
Let’s jump right into it.

Phase 1: Create a chatbot in Kompose and setup the answers

Step 1: Setup an account in Kommunicate
If you do not have an account in Kommunicate, you can create one here for free.

Next, log in to your Kommunicate dashboard and navigate to the Bot Integration section. Locate the Kompose section and click on Integrate Bot.

If you want to build a bot from scratch, select a blank template and go to the Set up your bot section. Select the name of your Bot, your bot’s Avatar, and your bot’s default language and click “Save and Proceed”.

You are now done creating your bot and all you have to worry about now is to “Enable bot to human transfer” when the bot encounters a query it does not understand. Enable this feature and click “Finish Bot Setup.”

From the next page, you can choose if this bot will handle all the incoming conversations. Click on “Let this bot handle all the conversations” and you are good to go.

Newly created bot here: Dashboard →Bot Integration → Manage Bots.

Step 2: Create welcome messages & answers for your chatbot
Go to the ‘Kompose – Bot Builder’ section and select the bot you created.

First, set the welcome message for your chatbot. The welcome message is the first message that the chatbot sends to the user who initiates a chat.

Click the “Welcome Message” section. In the “Enter Welcome message – Bot’s Message” box, provide the message your chatbot should be shown to the users when they open the chat and then save the welcome intent.

After creating the welcome message, the next step is to feed answers/intents. These answers/intents can be the common questions about your product and service.

The answers section is where you’ve to add all the user’s messages and the chatbot responses.

Go to the “Answer” section, click +Add, then give an ‘Intent name’

In the Configure user’s message section – you need to mention the phrases that you expect from the users that will trigger.

Kommunicate create welcome messages
Configure bot’s reply section – you need to mention the responses (Text or as Rich messages) the chatbot will deliver to the users for the particular message. You can add any number of answers and follow-up responses for the chatbot. Here, I have used custom payload by selecting “Custom” option in “More” option.

Once you have configured the responses, you need to click on “Train Bot” which is at the button right and to the left of the preview screen. Once successfully trained, a toast “Anser training completed” will come at the top right corner.

Kommunicate create welcome messages
Phase 2: Add the created chatbot in react js website
Step 1: Create a React app
Create a new React app (my-app) by using the command in your terminal or Command Prompt:

npx create-react-app my-app

Step 2: Now, navigate to the my-app folder
cd my-app

Step 3: Create a new file chat.js inside src folder
Once you create the chat.js, add the below code in componentDidMount. The below code will launch a chat widget on your website with the integrated Dialogflow bot. Make sure to replace with your Kommunicate application ID.

You can get this code in the install section of Kommunicate as well.

import React, { Component } from “react”;

class KommunicateChat extends Component {

constructor(props){

   super(props);

}

componentDidMount(){

(function(d, m){

   var kommunicateSettings =

       {“appId”:”2bf085baaad3f559103cf127c1cc98c10″,”popupWidget”:true,”automaticChatOpenOnNavigation”:true};

   var s = document.createElement(“script”); s.type = “text/javascript”; s.async = true;

   s.src = “https://widget.kommunicate.io/v2/kommunicate.app”;

   var h = document.getElementsByTagName(“head”)[0]; h.appendChild(s);

   window.kommunicate = m; m._globals = kommunicateSettings;

})(document, window.kommunicate || {});

}

render(){

return(

   <div>

       <h1>Hello</h1>

 </div>

)

}

}

export default KommunicateChat;

Here’s a screenshot of my code editor for the same:

Step 4: Start your app locally
Use the following command to start your newly created website with the installed Kompose bot.

npm start

Start app locally
Voila! How simple was that? In these few simple steps, you could integrate Kompose bot in React JS websites. This is how the chat widget looks on a website:

How the chatbot widget looks