How to add Chatbot in React JS Project ?
Last Updated :
24 Jul, 2024
In today's digital world, chatbots have become an integral part of many websites and applications. They provide a convenient and efficient way to interact with users, answer their queries, and improve overall user experience. If you're working on a React JS project and want to incorporate a chatbot, you're in the right place. In this article, we'll guide you through the process of adding a chatbot to your React JS project.
Prerequisite:
Steps to create React application and Module installation:
Step 1: Create a React application using the following command:
npx create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command:
cd project
Step 3: now install the dependency react-simple-chatbot by using the following command:
npm i react-simple-chatbot
Project Structure:

Example: For the chatBot to work, we need to create a steps array. The ChatBot takes steps which is an array of objects as its props. Although there are a number of options we can pass as props to our chatBot without the steps props it will show a blank screen.
JavaScript
//App.js
import ChatBot from 'react-simple-chatbot';
const steps = [
{
id: '0',
message: 'Hey Geek!',
end: true
}
];
function App() {
return (
<div className="App">
<h1>Welcome to Geeksforgeeks</h1>
<ChatBot steps={steps} />
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:

In order to provide a theme to our project let's import ThemeProvider from 'styled-components'.
Note: The 'styled-components' gets installed along with 'react-simple-chatbot'.
- We will create a const theme with all the props available to change the styling of our chatbot. After that, we are wrapping the ChatBot within the ThemeProvider passing theme as props.
- Now to show the chatbot icon and to change the bot avatar we need to create a config that will have floating set to true so that the bot icon appears on the website and we have set an image in the botAvatar, we are passing config as a prop to our ChatBot as well. We are also passing headerTitle as props to ChatBot.
JavaScript
//App.js
import ChatBot from 'react-simple-chatbot';
import { ThemeProvider } from 'styled-components';
const steps = [
{
id: '0',
message: 'Hey Geek!',
// This calls the next id
// i.e. id 1 in this case
trigger: '1',
}, {
id: '1',
// This message appears in
// the bot chat bubble
message: 'Please write your username',
trigger: '2'
}, {
id: '2',
// Here we want the user
// to enter input
user: true,
trigger: '3',
}, {
id: '3',
message: " hi {previousValue}, how can I help you?",
trigger: 4
}, {
id: '4',
options: [
// When we need to show a number of
// options to choose we create alist
// like this
{ value: 1, label: 'View Courses' },
{ value: 2, label: 'Read Articles' },
],
end: true
}
];
// Creating our own theme
const theme = {
background: '#C9FF8F',
headerBgColor: '#197B22',
headerFontSize: '20px',
botBubbleColor: '#0F3789',
headerFontColor: 'white',
botFontColor: 'white',
userBubbleColor: '#FF5733',
userFontColor: 'white',
};
// Set some properties of the bot
const config = {
botAvatar: "img.png",
floating: true,
};
function App() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<ChatBot
// This appears as the header
// text for the chat bot
headerTitle="GeekBot"
steps={steps}
{...config}
/>
</ThemeProvider>
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
Similar Reads
How to Setup a Modern React Chatbot Integrating a chatbot into your React application can enhance user experience and provide valuable assistance to your users. With the availability of various libraries and tools, setting up a modern chatbot in a React project has become more straightforward. In this article, we'll explore how to set
2 min read
How to create Popup box in React JS ? Popup boxes, also known as modal or dialog boxes, are common UI elements used to display additional content or interactions on top of the main page. Creating a popup box in React can be achieved using various approaches, including libraries or custom implementations. We will use the Reactjs-popup li
2 min read
How to add code input in React JS? In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our
2 min read
How to install React-Bootstrap in React Application ? React Bootstrap is a popular library that let us use the Bootstrap framework's power and flexibility to React.js applications. By combining the flexibility of React with the UI components provided by Bootstrap, you can create responsive and visually appealing user interfaces with ease. In this artic
4 min read
How to Add Auto-Complete Search Box in ReactJS? An autocomplete search box is a user interface feature that offers suggestions as users type their queries. It enhances the user experience by providing real-time suggestions and help users find what they're looking for more quickly. In this article, we will explore how to implement an autocomplete
5 min read
Add Comment Section in Next.js In this article, we are going to learn how we can add a Comment Section in NextJs. Using the comment section users can write their thoughts and queries in your NextJs app. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows,
3 min read