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 pr

Usage no npm install needed!

<script type="module">
  import reactConfigurableChatbot from 'https://cdn.skypack.dev/react-configurable-chatbot';
</script>

README

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.

Table of Contents

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.

Troubleshooting

Make sure all dependencies are up to date by running 'yarn' in Terminal.

License

MIT © Chester Militante