Last Updated on October 6, 2023
What is React JS?
ReactJS is an open source Javascript library that is used to create fast user interfaces for websites and applications. One of the key features of React JS is that it simplifies the development process by allowing developers to build reusable UI components. This enhances code maintainability.
Why is it convenient to build a React JS Chatbot?
ReactJS is popular not just for web development, but also to build chatbots. This is due to the following reasons:
- Component based architecture
ReactJS uses a component based architecture, which makes it simple to create modular and reusable chatbot interfaces. This makes it very easy to maintain and update the chatbot over time.
- Virtual DOM
One of the key features of ReactJS is that it uses a Virtual DOM to update the chatbot’s UI. The end result of this is that chatbots become more interactive and responsive.
- Scalability
ReactJS is highly scalable, which means you can use it to develop bots that can handle a large number of users and conversations.
- Rich ecosystem
The tools and libraries that are present in the React ecosystem to develop chatbots is unmatched. This includes libraries for chat history management, NLP and machine learning.
Building a react chatbot in 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 react chatbot in 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.
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.
Also Read: How to Add Chatbot to React Native
Phase 2: Add the created react js chatbot in 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
Integrate Chat Widget into React JS
There are different ways to integrate the Kommunicate chat widget into React website or project. Here is one way which we have explained.
By installing Kommunicate chat widget package using npm command
- Use the below npm command to install Kommunicate chat widget package
npm i @kommunicate/kommunicate-chatbot-plugin- After installing package, use the below code to import it in index.js file
import Kommunicate from "@kommunicate/kommunicate-chatbot-plugin";
- Now, add the below code in index.js file
Kommunicate.init("APP_ID", {
automaticChatOpenOnNavigation: true,
popupWidget: true
});
- Add your
APP_ID. You can get your APP_ID here
You can use Below Sanbox for Testing and checking the configuraion:
If you want to know more ways check out the documentation.
At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.
