React-configurable-chatbot NPM

react-configurable-chatbot

Based on React Chatbot Kit, I have coded certain keywords to trigger a specific response coming from a JSON endpoint. This package relies on the react, prop-types,and styled-components peer-dependency packages to be already installed and set up in your project.

Installation

yarn add react-configurable-chatbot

Run yarn until all dependencies are up to date.

Usage

import Chatbot from 'react-configurable-chatbot';

function App() {
  return <Chatbot jsonData="/data/test.json" />;
}

export default App;

Configuration

Props

The Chatbot component has the following props:

Name	Type	Required	Default	Description
isOpenDefault	boolean	no	false	Determines if the chatbot is toggled open on load
bottom	string	no	"30px"	Bottom position of chatbot icon in px
right	string	no	"30px"	Right position of chatbot icon in px
jsonData	string	yes	"'https://localhost/data/test.json'"	The JSON data file. See examples of JSON data in /public/data/test.json

Adding/Modifying Bot Logic (Keywords and Responses)

This chatbot requires fetching a JSON file endpoint. Edit that JSON to add logic. See JSON examples in test.json file under logic key.

Changing Bot Name

The bot name can be provided in the JSON file as a string. See JSON examples in test.json file under botName key. If not provided, the default name will be Bot.

Changing Bot Avatar Icon

The bot avatar icon can be provided in the JSON file as a URL to the image. See JSON examples in test.json file under avatarURL key. If not provided, the default icon will be the React logo logo192.png in /public.