react-customizable-chat-bot alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-customizable-chat-bot alternatives based on common mentions on social networks and blogs.
-
react-pdf
Display PDFs in your React app as easily as if they were images. -
react-joyride
Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. -
typography
A powerful toolkit for building websites with beautiful typography. -
react-split-pane
React split-pane component. -
react-resizable-and-movable
Resizable and movable component for React. -
react-designer
Easy to configure, lightweight, editable vector graphics in your react components. -
react-resizable-box
Resizable component for React. #reactjs. -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
react-facebook
Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. -
react-avatar
Universal React avatar component makes it possible to generate avatars based on user information. -
react-blur
React component for blurred backgrounds. -
react-timesheet
Time Sheet Component for React. -
react-images-uploader
React.js component for uploading images to the server. -
react-svg-buttons
Configurable animated SVG buttons for react. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
react-dnr
Dragable and Resizable window build with React.js. -
material-color-hash
Hash strings to Material UI colors. -
react-avatar-generator
Allows users to create random kaleidoscopes to be used as avatars. -
react-filter-control
The React filterbuilder component for building the filter criteria in the UI. -
react-headings
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. -
react-color-scroll
Change and blend new colors on the background as you scroll. -
captcha-image
Allows you to generate a random captcha image with options. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
Get performance insights in less than 4 minutes
Do you think we are missing an alternative of react-customizable-chat-bot or a related project?
README
Build your own chatbot with minimal changes
Live Demo live demo
Comes with 5 predefined styles and you can define your own styles as well
Installation
npm install react--customizable-chat-bot or Yarn add react--customizable-chat-bot
Usage
List of questions to be asked by bot the can be passed . Take a look at example questions structure here!
import { Bot, BotConfig } from 'react--customizable-chat-bot'
BotConfig has some default set of questions and styles which you can override.
Adding Validators to user response
If you need to validate user response , under each question we have a handlers where you can pass validators to validate user response and drive the chat accordingly.
Validators can either be a regex or a function which returns boolean
BotConfig.questions = [{'dob': {
id: 1,
message: "What's your Date of Birth (DD/MM/YYYY)?",
questionKey : 'dob',
handlers: [
{
validators: dateReg,
nextQuestion: 'email',
},
{
validators: dateRegNeg,
nextQuestion: 'dobWrong',
},
],
}},'dobWrong': {
id: 2,
message: "Please enter a valid date of birth",
questionKey : 'dob',
handlers: [
{
validators: dateReg,
nextQuestion: 'email',
},
{
validators: dateRegNeg,
nextQuestion: 'dobWrong',
},
],
}];
Customizing the Styles
By Default there are 5 themes available
1.)Default,
2.)GoogleAssitant,
3.)Facebook,
4.)WhatsApp,
5.)GradientGreen
You can chose any of these themes as below
import { Bot, BotConfig } from 'react--customizable-chat-bot'
import { Themes } from 'react--customizable-chat-bot/lib/config/config';
BotConfig.Theme = Themes.GoogleAssitant;
You can entirely redefine the ui styles based on your brand. Take a look at List of custom style option available here!
Once your styling is ready you can pass it as a props to the bot component
import { Bot, BotConfig , IStyles } from 'react--customizable-chat-bot'
const myStyles: IStyles = {
primaryColor: "#4870df",
sendButtonColor: "#4870df",
userAvatar: '',
userAvatarColor: '#4870df',
userAvatarTextColor: '#fff',
botAvatar: "https://i.ibb.co/NxZqGVN/bot-avatar.png",
botAvatarColor: '#e6e5eb',
botAvatarTextColor: '#000',
bubbleRadius: "0",
botMessageBubbleColor: '#4870df',
botMessageTextColor: '#fff',
userMessageBubbleColor: '#e6e5eb',
userMessageTextColor: '#000',
inputBoxBorderRadius: '40px',
primaryLabelColor: '#000',
}
export const MyFunc() => <Bot config={BotConfig} customStyles={myStyles}/>
You should pass a function to onConversationEnd props of Bot component to get the conversation data which we will a json string
import { Bot, BotConfig } from 'react--customizable-chat-bot'
const onConversationEnd = (converstationData : string ) => {
console.log(converstationData);
}
export const MyFunc() => <Bot config={BotConfig} onConversationEnd={onConversationEnd}/>