Skip to main content

Vanilla JS Integration

After deploying your VAKFlow, 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​

Light Theme Integration​

To integrate the chatbot with a light theme, add the following script to your web application:

<script>
  var VAKFlowID = '';  // Replace with your VAKFlow ID
  var VAKBtnTxt = "AI Assistant";  // Button text
</script>
<script src="https://cdn.vakx.io/chat/iframe-light.min.js"></script>

Dark Theme Integration​

For a dark theme, use the following script:

<script>
  var VAKFlowID = '';  // Replace with your VAKFlow ID
  var VAKBtnTxt = "AI Assistant";  // Button text
</script>
<script src="https://cdn.vakx.io/chat/iframe-dark.min.js"></script>

In both examples, make sure to replace the VAKFlowID with your unique flow ID, which you can find in your Deployment Dashboard.

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.