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">
      <VAKChat
          VAKFlowID="Your_VAKFlow_ID"
          btnText="AI Assistant"
          theme="light"
          shade="rose"
          introMessage="Hello, I'm your AI assistant, here to help! How can I assist you today?"
          defaultPopupSize="small"
      />
    </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	Default Value
VAKFlowID	Unique ID of your deployed VAKFlow	Your_VAKFlow_ID	null
sessionID	Session ID for tracking conversations	unique_session_id	null
localStorage	Enable/disable local storage for session data	true, false	true
defaultPopupVisible	Show/hide chat window by default	true, false	false
defaultPopupSize	Size of the chat popup window	"small", "medium", "full"	"small"
baseFontSize	Base font size for the chat window	"18px", "20px"	"16px"
btnText	Text that appears on the button	"AI Assistant"	"AI Assistant"
btnTextColor	Text color of the chat button	#ffffff, #000000	#ffffff
btnWidth	Width of the chat button	"auto", "100px"	"auto"
btnType	Type of chat button	"plainbutton", "searchbar", "gradientbutton"	"gradientbutton"
btnSize	Size of the chat button	"xs", "sm", "md", "lg", "xl", "xxl"	"md"
contentWidth	Width of the chat content area	"xs", "sm", "md", "lg", "xl", "xxl"	"lg"
position	Position of the button in your layout	"relative", "fixed"	"relative"
top	Position button from top of screen	"20px", "auto"	"auto"
right	Position button from right of screen	"20px", "auto"	"auto"
bottom	Position button from bottom of screen	"20px", "auto"	"auto"
left	Position button from left of screen	"20px", "auto"	"auto"
shade	Color scheme of the chat button and popup	"zinc", "slate", "amber", "lime", "emerald", "teal", "sky", "indigo", "fuchsia", "rose"	"indigo"
characterLimit	Maximum characters allowed in user input	300, 500	300
introMessage	Initial message displayed in chat window	"Hello, how can I help?"	"Hello, I'm your AI assistant, here to help! How can I assist you today?"
callToAction	Custom call-to-action message displayed in the chat window	"Get in Touch", "Buy Now", "Order Now"	null
theme	Theme of the chat window	"light", "dark"	"light"
emailRequired	Require email input from the user	true, false	true

Example

In the example above, we have set the following:

• VAKFlowID: Your VAKFlow ID (replace Your_VAKFlow_Id with your actual VAKFlow ID).
• btnText: "AI Assistant", which appears on the chat button.
• btnSize: 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.