Skip to content
Related Articles

Related Articles

How to add Chatbot in ReactJS Project ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 29 Mar, 2022

In this article, 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 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:

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 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:

Reference: https://www.npmjs.com/package/react-simple-chatbot


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!