Vanilla JS Integration

After creating chatbot, you can integrate the chatbot into your web application using Vanilla JavaScript. This guide provides the steps to integrate your chatbot with different themes.

Integration Options

<div style="position:fixed; bottom:40px; right:40px;" id="vakchat"></div>
<script src="https://cdn.vakx.io/vakchat/vanilla-v3.1.12.js"></script>
<script>
    window.initVAKChat({
        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"
    })
</script>

Make sure to replace the VAKFlowID with your unique flow ID, which you can find in your My Chatbots section.

Customizing the Component

You can customize various properties of the VAKChat 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 Usage

These integration scripts can be easily embedded in your HTML files. Once added, the chat button will appear in your web app, and users can interact with your AI assistant through the VAKFlow.

Key Points:

• VAKFlowID: This is the unique ID of your deployed VAKFlow.
• VAKBtnTxt: You can customize the button text that triggers the AI assistant (e.g., "Ask AI", "Chat with us").
• Theme Options: Choose between light and dark themes using the appropriate script.
• By embedding these scripts, you can quickly integrate your AI assistant into your application, enhancing user interaction through seamless AI-powered assistance.