# BubblaV — Full Documentation > BubblaV is an AI chatbot platform that enables businesses to deploy custom AI chatbots trained on their website content in minutes—no coding required. It delivers 24/7 automated customer support with seamless AI-to-human handoff, deep integrations, and live chat. ## Overview BubblaV is a SaaS platform that provides: - An embeddable JavaScript widget that adds a chat bubble to any website - Automated website crawling to build a knowledge base - AI-powered responses using AI with RAG (Retrieval-Augmented Generation) - Live support agent handoff with real-time chat - Integrations with Shopify, Zendesk, HubSpot, Attio, Zapier, Slack, Discord, WhatsApp, Instagram, Messenger, Telegram, Stripe, Klarna, Cal.com, Acuity Scheduling, Calendly, TidyCal, WordPress, WooCommerce, BigCommerce, Haravan, Zoho Commerce, ChatGPT, Email (IMAP) and more - Analytics, conversation history, and knowledge gap detection ## Quick Installation Add BubblaV to any website by placing this script tag before the closing `` tag: ```html ``` Replace `YOUR_WEBSITE_ID` with the website ID from your BubblaV dashboard at https://www.bubblav.com/dashboard. ## NPM Package Installation (Recommended for React, Vue, Angular) ### React ```bash npm install @bubblav/ai-chatbot-react ``` ```tsx // app/layout.tsx or App.tsx import { BubblaVWidget } from '@bubblav/ai-chatbot-react'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Programmatic control: ```tsx import { useBubblaVWidget } from '@bubblav/ai-chatbot-react'; function HelpButton() { const widget = useBubblaVWidget(); return ; } ``` **For Vite-based projects (Lovable, Bolt, v0, plain Vite)** — add to `vite.config.ts` to prevent duplicate-React conflicts: ```ts resolve: { dedupe: ['react', 'react-dom'] } ``` ### Vue 3 ```bash npm install @bubblav/ai-chatbot-vue ``` ```vue ``` ### Angular ```bash npm install @bubblav/ai-chatbot-angular ``` ```ts import { Component } from '@angular/core'; import { BubblaVWidgetComponent } from '@bubblav/ai-chatbot-angular'; @Component({ selector: 'app-root', standalone: true, imports: [BubblaVWidgetComponent], template: ` `, }) export class AppComponent {} ``` ## Script Tag Installation (works with any framework) ### Next.js (App Router) ```tsx // app/layout.tsx import Script from 'next/script'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ``` ### Astro ```astro --- // src/layouts/Layout.astro --- ``` ### HTML / Any ```html ``` ## CMS Installation ### WordPress / WooCommerce 1. Install the "BubblaV Chat" plugin from the WordPress plugin directory 2. Activate the plugin and enter your website ID in the BubblaV Chat settings ### Shopify 1. Install the BubblaV app from the Shopify App Store 2. Connect your BubblaV account — the widget installs automatically ### Webflow Install the official BubblaV app from the Webflow Marketplace: https://webflow.com/apps/detail/bubblav-ai-chatbot The app handles OAuth login, website selection, and widget injection automatically—no code required. Alternatively, in Project Settings → Custom Code → Footer Code, paste the script tag above. ### Framer Install the official BubblaV plugin from the Framer Marketplace: https://www.framer.com/marketplace/plugins/bubblav-ai-chatbot/ The plugin handles OAuth login, website selection, and widget injection automatically—no code required. Alternatively, in Site Settings → General → End of tag, paste the script tag above. ### Wix In Settings → Custom Code (under Advanced), add the script to Body - end of All Pages. ### Squarespace In Settings → Advanced → Code Injection → Footer, paste the script tag. ## Prompt for AI Builders (Lovable, v0, Bolt, Cursor, Windsurf) Copy and paste this into any AI builder to install BubblaV in one shot: ``` Add the BubblaV AI chatbot widget to this project. **Option 1: NPM Package (Recommended for React, Vue, Angular)** Install: React: npm install @bubblav/ai-chatbot-react Vue: npm install @bubblav/ai-chatbot-vue Angular: npm install @bubblav/ai-chatbot-angular Import and add to your root component or layout: React — import { BubblaVWidget } from '@bubblav/ai-chatbot-react'; Vue — import { BubblaVWidget } from '@bubblav/ai-chatbot-vue'; Angular (standalone) — import { BubblaVWidgetComponent } from '@bubblav/ai-chatbot-angular'; Add BubblaVWidgetComponent to the component's imports array, then: IMPORTANT — For Vite-based projects (Lovable, Bolt, v0, plain Vite), add this to vite.config.ts to prevent duplicate-React conflicts: resolve: { dedupe: ['react', 'react-dom'] } **Option 2: Script Tag (fallback — works with any framework)** Add this before in your main HTML or layout file: For Next.js (app/layout.tsx or pages/_app.tsx), use next/script instead: import Script from 'next/script';