Build a chatbot for React apps
Building chatbots for your websites may feel intimidating. However, it is not difficult at all! I want to show how you can easily build a chatbot for your website using React Simple Chatbot. React Simple ChatBot has many useful functionalities such as speech recognition, custom components, Wikipedia search, and many more. They can make your chatbot highly interactive and user-friendly. Let’s start!
To install chatbot you will need to run
npm install react-simple-chatbot --saveNext, we need to create a component, which will contain our chatbot. The first thing we will need to do is to import the chatbot and create the component itself. And don’t forget to include it in the parent component.
import ChatBot from 'react-simple-chatbot';const ChatBotHelper = () => { // Chatbot configuration will go here return <ChatBot />}export default ChatBotHelper
Now the fun part begins! Let’s configure our chatbot. To configure it, we need to provide clear instructions or steps for a chatbot, which it will follow in response to user interaction. Here is an example of the steps we can define:
import ChatBot from 'react-simple-chatbot';const ChatBotHelper = () => { const steps = [
{
id: '1',
message: 'Hello!',
trigger: '2',
},
{
id: '2',
message: 'How can I help you?',
trigger: '3',
},
{
id: '3',
options: [
{ value: 1, label: 'Show ChatBot example', trigger:'4' },
{ value: 2, label: 'Show ChatBot API', trigger: '5' },
]
}, // We will add step 4 and 5 later ] return <ChatBot steps={steps}/>}export default ChatBotHelper
In the code above, we give each step an ID. In the first two steps, we use the message property of Simple ChatBot to display a message of our choice. Trigger, which might be the most important part of the configuration, connects different steps, which allows us to construct a logical interaction with the user of the website. The third step provides options for the user, which will lead to different steps. To see our chatbot, we have to pass steps to ChatBot’s steps property.
Let’s say we want our chatbot to show a message with a link to another website when options Show ChatBot example and Show ChatBot API are clicked. To do that, I will create a function component, which will accept two props url and message.
const BotRedirect = ({ url, message }) => {
return (
<div>
<a href={url} target="_blank">
{message}
</a>
</div>
);
};Next, we have to add our custom component to component property in steps 4 and 5 as shown below:
const steps = [
{
id: '1',
message: 'Hello!',
trigger: '2'
},
{
id: '2',
message: "How can I help you?",
trigger: '3'
},
{
id: '3',
options: [
{ value: 1, label: 'Show ChatBot example', trigger: '4' },
{ value: 2, label: 'Show ChatBot API', trigger: '5' }
]
},
{
id: '4',
component: (
<BotRedirect
message="See all examples in this page"
url="<https://lucasbassetti.com.br/react-simple- chatbot/#/docs/previous-value>"
/>
),
trigger: '2'
},
{
id: '5',
component: (
<BotRedirect
message="See chatbot API here"
url="<https://lucasbassetti.com.br/react-simple-chatbot/#/docs/chatbot>"
/>
),
trigger: '2'
}
];Component property and custom components are extremely useful in many cases. In one of the projects, I used it for navigation between webpages with the Redirect function of react-router-dom, which was working perfectly taking into consideration the ease of building it.
You can read more about chatbot properties here. They will definitely enrich user experience of your website.
Cool! We have built a simple chatbot that can greet and provide us with links to other websites.
What about styling it? To do that we should have styled-components installed.
First of all, we want our chatbot icon to float in the right bottom corner of the screen and when clicked to show the conversation window. To do that we should add floating={true} to the chatbot component like this:
return (
<div>
<ChatBot steps={steps} floating={true} />
</div>
);To change default theme of the chatbot, we should wrap ChatBot component in <ThemeProvider /> and pass CHATBOT_THEME to theme property.
const CHATBOT_THEME = {
background: "#FFFEFC",
fontFamily: "Roboto",
headerBgColor: "#FFBFB5",
headerFontColor: "#fff",
headerFontSize: "15px",
botBubbleColor: "#C8D7C2",
botFontColor: "#fff",
userBubbleColor: "#FFBFB5",
userFontColor: "#fff",
};return (
<>
<ThemeProvider theme={CHATBOT_THEME}>
<ChatBot steps={steps} floating={true} />
</ThemeProvider>
</>
);
For changing avatars and many other functions, check this link. You will need to pass them directly to the ChatBot component.
Complete code looks like this:
import React from "react";
import ChatBot from "react-simple-chatbot";
import { ThemeProvider } from "styled-components";const BotRedirect = ({ url, message }) => {
return (
<div>
<a href={url} target="_blank">
{message}
</a>
</div>
);
};const CHATBOT_THEME = {
background: "#FFFEFC",
fontFamily: "Roboto",
headerBgColor: "#FFBFB5",
headerFontColor: "#fff",
headerFontSize: "15px",
botBubbleColor: "#C8D7C2",
botFontColor: "#fff",
userBubbleColor: "#FFBFB5",
userFontColor: "#fff"
};const ChatBotHelper = () => {
const steps = [
{
id: "1",
message: "Hello!",
trigger: "2"
},
{
id: "2",
message: "How can I help you?",
trigger: "3"
},
{
id: "3",
options: [
{ value: 1, label: "Show ChatBot example", trigger: "4" },
{ value: 2, label: "Show ChatBot API", trigger: "5" }
]
},
{
id: "4",
component: (
<BotRedirect
message="See all examples in this page"
url="<https://lucasbassetti.com.br/react-simple-chatbot/#/docs/previous-value>"
/>
),
trigger: "2"
},
{
id: "5",
component: (
<BotRedirect
message="See chatbot API here"
url="<https://lucasbassetti.com.br/react-simple-chatbot/#/docs/chatbot>"
/>
),
trigger: "2"
}
]; return (
<>
<ThemeProvider theme={CHATBOT_THEME}>
<ChatBot steps={steps} floating={true} />
</ThemeProvider>
</>
);
};export default ChatBotHelper;
And this is how our chatbot looks like
As you can see, building a chatbot is not difficult at all! Hope it was useful and you are not hesitant to build chatbots anymore!
The full example code https://cutt.ly/fhP70rK
