vcf-chatbot-ai

The vcf-chatbot-ai package allows you to easily integrate a chatbot into your web applications. It supports customization options such as changing the title, image, and primary color of the chatbot.

Installation

To install the package, run the following command in your project directory:

npm install vcf-chatbot-ai

Usage

Import Chatbot from the vcf-chatbot-ai package and initialize it with optional parameters to customize the chatbot. Then, call the display() method to render the chatbot on your page.

import Chatbot from 'vcf-chatbot-ai';

const chatbot = new Chatbot({
  botTitle: "Support", // Optional: Customize the title of the chatbot
  botImage: "https://example.com/chatbot.png", // Optional: Provide a custom image URL for the chatbot
  primaryColor: "#00ff00", // Optional: Customize the primary color of the chatbot
  env: "development" // Optional: Default: 'production' ('development' or 'production')
});

chatbot.display();

Configuration Option

When initializing the Chatbot, you can pass an object with the following optional properties to customize the chatbot:

botTitle (string): The title of the chatbot. Default is 'ChatBot'. botImage (string): The URL of the image to be used as the chatbot's icon. Default is a sample chatbot image. primaryColor (string): The primary color used in the chatbot theme. Default is '#581B98'. env (string): The environment the chatbot is running in. Must be either 'development' or 'production'. This is required for proper initialization Default at version 1.0 will be 'production' to directly communicate with the backend.

Methods

display()

Renders the chatbot on the page. Call this method after initializing the Chatbot instance to display the chatbot to the user.

For use with server side rendered frameworks this method will need to work once mounted on DOM

eg SvelteKit

<script>
	
  import Chatbot from 'vcf-chatbot-ai'
  import {onMount} from 'svelte'


onMount(()=>{
  const chat = new Chatbot({
    botTitle: "Bolt"
  })
  
  chat.display()

})
</script>

To intergrate with phoenix framework in assets/app.js

import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
import Chatbot from 'vcf-chatbot-ai'

chat = new Chatbot({
  botTitle: "Hello World"
})

chat.display()

This should render as

Support

For support, issues, or feature requests, please visit our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.