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 ReactJS 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 ReactJS project.
We will learn how we can add a chatbot to our react project by using an npm package react-simple-chatbot.
Features of react-simple-chatbot:
- It is a Lightweight module and very easy to use.
- Responsive.
- Style Component gets installed along with it so no need to install it for themes.
- We can add a number of our own functionalities to the chatBot.
Prerequisite: Knowledge about react.js
Creating 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: It will look like this.
Example: To use the chatBot, we need to import it from ‘react-simple-chatbot’. 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.
In this file, we are simply creating a steps array with a single object with an id ‘0’ with a message ‘Hey Geek’ and end set to true which means this is the end message of the chatBot.
Filename: App.js:
Javascript
import ChatBot from 'react-simple-chatbot';const steps = [ { id: '0', message: 'Hey Geek!', end: true }];function App() { return ( <div className="App"> <h1>Welcome to Geeksforneveropen</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:
This is what the default chatBot will look like. We further style and add more functionalities to the chatBot. 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.
Filename: App.js:
Javascript
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 themeconst theme = { background: '#C9FF8F', headerBgColor: '#197B22', headerFontSize: '20px', botBubbleColor: '#0F3789', headerFontColor: 'white', botFontColor: 'white', userBubbleColor: '#FF5733', userFontColor: 'white',};// Set some properties of the botconst 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:
Reference: https://www.npmjs.com/package/react-simple-chatbot
