VAKChat ReactJS

The vakchat ReactJS npm module allows for seamless integration of a chatbot into your React application. You can easily integrate your deployed VAKFlow Chatbot into a ReactJS app using the vakchat package. This guide will walk you through the integration process.

Step 1: Install VAKChat

To start, you need to install the vakchat package:

npm install vakchat

Step 2: Import and Use VAKChat Component

After installing the package, you can integrate the VAKFlow assistant by using the VAKChat component in your React application.

Here is an example of how to implement it:

import { VAKChat } from "vakchat";
import "vakchat/dist/index.css";

function App() {
  return (
    <div className="App">
      {/* Replace 'Your_VAKFlow_Id' with your unique VAKFlow ID */}
      <VAKChat 
        flowID="Your_VAKFlow_Id" 
        btnText="AI Assistant" 
        size="sm" 
        theme="dark" 
        position="fixed" 
        bottom="20px" 
        right="20px" 
        introMessage="Hi, Hello, I'm your AI assistant, here to help! How can I assist you today?"
      />
    </div>
  );
}

export default App;

Step 3: Customizing the VAKChat Component

You can customize various properties of the VAKChat component to suit your application’s needs:

Parameter	Description	Example Values
flowID	The unique ID of your deployed VAKFlow.	Your_VAKFlow_ID
btnText	The text that will appear on the button.	"AI Assistant"
introMessage	The initial message displayed in the chat window.	"How can I help you today?"
size	The size of the chat button.	xs, sm, md, lg, xl
theme	The theme of the chat window.	"light", "dark"
position	The position of the button in your layout.	"relative", "fixed"
top	Use to position the button from the top of the screen.	"20px"
bottom	Use to position the button from the bottom of the screen.	"20px"
right	Use to position the button from the right of the screen.	"20px"
left	Use to position the button from the left of the screen.	"20px"

Example

In the example above, we have set the following:

• flowID: Your VAKFlow ID (replace Your_VAKFlow_Id with your actual VAKFlow ID).
• btnText: "AI Assistant", which appears on the chat button.
• size: Set to "sm" for a small button size.
• theme: Set to "dark" for the dark theme.
• position: The chat button is positioned "absolute", bottom: "20px" and right: "20px".

Once this code is added to your React app, the chat button will appear on your screen, and users can interact with the chatbot through VAKFlow.