We have a team of developers available for Freelancing in ReactJS, Angular, Java, Ionic and React Native.
For business contact: nsaikrishna008@gmail.com
Hello folks, In this Tutorial we are going to learn how to integrate chatbot in our application in a very easy way possible.
For video tutorial : click here for video tutorial on youtube
Step-1:
In this step you have to Open your command prompt and install the command mentioned below.
npm install react-simple-chatbot
This command will install react simple chatbot package in our application. Now once the installation is completed, then you have to open your package.json and verify whether you have react-simple-chatbot with version or not.
Step-2:
In this step you have to create a component and import ChatBot in respective component. Import statement is given below
import ChatBot from "react-simple-chatbot";
Step-3:
Now you have to create a constant array named steps. Now each object of this array contains different properties like id,message,user,trigger,end etc.
Below is the sample json array provided.
const steps = [
{
id: "Greet",
message: "Hello, Welcome to our shop",
trigger: "Done",
},
{
id: "Done",
message: "Please enter your name!",
trigger: "waiting1",
},
{
id: "waiting1",
user: true,
trigger: "Name",
},
{
id: "Name",
message: "Hi {previousValue}, Please select your issue",
trigger: "issues",
},
{
id: "issues",
options: [
{
value: "React",
label: "React",
trigger: "React",
},
{ value: "Angular", label: "Angular", trigger: "Angular" },
],
},
{
id: "React",
message:
"Thanks for letting your React issue, Our team will resolve your issue ASAP",
end: true,
},
{
id: "Angular",
message:
"Thanks for letting your Angular issue, Our team will resolve your issue ASAP",
end: true,
},
];
Explanation of properties:
id - unique name should be given as id.
message: This is the static data displayed to user.
end - This is a boolean value which tells to end the conversation.
trigger - this tells which message has to trigger next. So here we have to specify id of the message to be displayed .
previousValue - This is used to copy response given by the user.
For eg: If user enters his name as Technical Adda . Then we will copy the user name by using previousValue and displays Hello Technical Adda (name entered by the user).
options - This is used to show different options like radio buttons. At a time user can select only one option.
Step - 4:
Now In return/ render=>return you have to paste below code.
<ChatBot steps={steps} />
Here we will send steps as parameter to steps in the ChatBot.
In this way you can integrate Chatbot in your application. If you like this tutorial please dont forget to like, share and subscribe to our channel for more videos on React, Angular and Nodejs, Full stack development.
vhbnj
ReplyDelete