Skip to main content

Quickstart

Getting started? 😊 The process of setting up the chatbot only involves 3 simple steps, making it incredibly easy to jump right in!

Installation​

React ChatBotify is available on npm so install it with the following command within your project folder:

npm install react-chatbotify --save

Import​

Import the ChatBot within your component of interest (e.g. MyComponent.js).

import ChatBot from "react-chatbotify";

Initialization​

Initialize the ChatBot and you will be greeted with a default welcome/help message when you run your app.

import ChatBot from "react-chatbotify";

const MyComponent = () => {
  return (
    <ChatBot/>
  );
};
Info

If you are using NextJS and running into errors, look here!

Theming (Optional)​

If you are looking for a quick way to customize your chatbot, consider browsing for themes on React ChatBotify Gallery. You may then further refine the themes via settings and styles. An example for this can be found here.

Alternatively, you may also experiment with the primaryColor and secondaryColor properties in the general section of settings.

Info

In the next few sections, we will go through a brief overview on React ChatBotify, cover important properties as well as explore conversations/configurations. These materials are also available in the form of YouTube Tutorials. It is recommended to sit through these contents without skipping them as they will help ease your use of the library and the understanding of this documentation 😊!