Install BubblaV on any website in minutes. Choose your platform for step-by-step instructions.
Getting Your Embed Code
Select Website
Click on the website you want to install
Go to Installation
Click Installation in the sidebar
Copy Code
Click Copy to copy the embed code to your clipboard
Your Embed Code < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script >
Your website ID is unique to your account. Never share it publicly, as it identifies your chatbot.
Choose your website platform:
WordPress
WooCommerce
BigCommerce
Shopify
Haravan
Wix
Squarespace
Webflow
Framer
Joomla
Drupal
WordPress Installation Option 1: Using BubblaV WordPress Plugin (Recommended) Install our official WordPress plugin for the easiest installation:
Go to Plugins
Log in to your WordPress admin and go to Plugins → Add New
Search Plugin
Search for “BubblaV Chat” in the WordPress plugin repository
Install Plugin
Click Install Now and then Activate
Configure
Go to BubblaV Chat settings and enter your website ID
Done
The widget is automatically installed on your WordPress site
Option 2: Manual Installation Alternatively, use a generic plugin:
Install Plugin
Go to Plugins → Add New , search for “Insert Headers and Footers”, and install it
Activate
Click Activate after installation
Open Settings
Go to Settings → Insert Headers and Footers
Paste Code
Paste your BubblaV embed code in the Scripts in Footer section
Save
Click Save to apply changes
WooCommerce Installation Option 1: Using BubblaV WordPress Plugin (Recommended) Install our official WordPress plugin for seamless WooCommerce integration:
Go to Plugins
Log in to your WordPress admin and go to Plugins → Add New
Search Plugin
Search for “BubblaV Chat” in the WordPress plugin repository
Install Plugin
Click Install Now and then Activate
Configure
Go to BubblaV Chat settings and enter your website ID
Connect Integration
The widget is automatically installed on your WooCommerce store
The widget will work seamlessly with your WooCommerce store and can be configured to track orders and search products when you connect the WooCommerce integration.
Option 2: Manual Installation Alternatively, use a generic plugin:
Install Plugin
Go to Plugins → Add New , search for “Insert Headers and Footers”, and install it
Activate
Click Activate after installation
Open Settings
Go to Settings → Insert Headers and Footers
Paste Code
Paste your BubblaV embed code in the Scripts in Footer section
Save
Click Save to apply changes
BigCommerce Installation Option 1: Using BubblaV BigCommerce App (Recommended) Install our official BigCommerce app for automatic installation:
Go to Marketplace
Log in to your BigCommerce admin panel and go to Apps → BigCommerce Marketplace
Search App
Search for “BubblaV” in the marketplace
Install App
Click Install and follow the setup wizard
Connect Account
Connect your BubblaV account during setup
Done
The widget is automatically installed on your store
Option 2: Manual Installation (Legacy) Use BigCommerce’s Script Manager to add the widget:
Log In
Log in to your BigCommerce admin panel
Script Manager
Go to Storefront → Script Manager
Create Script
Click Create a Script
Configure Script
Set these options:
Name : BubblaV WidgetLocation : FooterPages : All PagesScript category : ScriptScript content : Paste your embed code
Save
Click Save to apply changes
Shopify Installation Option 1: Using BubblaV Shopify App (Recommended)
Install the BubblaV app from the Shopify App Store
Connect your BubblaV account during setup
The widget will be automatically installed on your store
Configure the widget appearance from your Shopify admin or this dashboard
Option 2: Manual Installation (Legacy)
Open Theme Editor
Go to Online Store → Themes
Edit Code
Click the … menu on your active theme, then Edit code
Open theme.liquid
In the Layout section, click on theme.liquid
Find Body Tag
Scroll to find the closing </body> tag
Paste Code
Paste your embed code just before </body>
Save
Click Save in the top right
If you’re using a Shopify 2.0 theme, you can also add the code via Online Store → Themes → Customize → Theme settings → Custom code .
Haravan Installation Haravan uses Liquid templating similar to Shopify. Add the widget through the theme code editor.
Access Theme Editor
Go to your Haravan admin at your-store.myharavan.com, then navigate to Website → Giao diện (Theme)
Edit Theme Code
Click on your active theme, then select Chỉnh sửa code (Edit code)
Open theme.liquid
In the Layouts folder on the left sidebar, click on theme.liquid
Find Body Tag
Scroll to the bottom of the file to find the closing </body> tag (usually around line 142)
Paste Code
Paste your BubblaV embed code just before </body>: <!-- BubblaV Chat Widget --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script >
Save
Click Save to apply changes
Haravan’s theme structure is very similar to Shopify. The theme.liquid file in the Layouts folder is the main template that wraps all pages, making it the ideal location for the widget script.
If you prefer, you can also add the script to the footer-scripts.liquid snippet (found in the Snippets folder) if your theme uses it. However, theme.liquid is recommended as it ensures the widget loads on all pages.
Wix Installation
Open Settings
In your Wix dashboard, go to Settings
Custom Code
Click Custom Code (under Advanced)
Add Code
Click + Add Custom Code
Paste Code
Paste your BubblaV embed code
Configure
Set these options:
Name : BubblaV ChatAdd to : All pagesPlace code in : Body - end Custom code requires Wix Premium. Free Wix sites cannot add custom scripts.
Squarespace Installation
Open Settings
Go to Settings → Advanced → Code Injection
Footer Section
Scroll to the Footer section
Paste Code
Paste your BubblaV embed code
Code Injection requires a Squarespace Business plan or higher.
Webflow Installation Option 1: Site-wide (Recommended)
Open Project Settings
Click the gear icon in the left panel
Custom Code
Go to the Custom Code tab
Footer Code
Paste your embed code in the Footer Code section
Save and Publish
Save changes and publish your site
Option 2: Specific Pages Only
Open the page in the Designer
Go to Page Settings (gear icon)
Scroll to Custom Code → Before </body> tag
Paste your embed code
Save and publish
Framer Installation
Open Site Settings
Open your Framer project and go to Site Settings
General Tab
Click on the General tab
Custom Code
Scroll down to the End of <body> tag section
Paste Code
Paste your BubblaV embed code
Save and Publish
Click Save and then Publish your site
Joomla Installation Option 1: Using a Plugin (Recommended)
Install Plugin
Install a “Custom HTML” or “Insert HTML” extension from the Joomla Extensions Directory
Configure Plugin
Go to Extensions → Plugins and configure the plugin
Paste Code
Paste your BubblaV embed code in the footer section
Save
Save and apply changes
Option 2: Editing Template Files
Go to Extensions → Templates → Templates
Select your active template
Open index.php or footer.php
Paste the embed code before </body>
Save & Close
Drupal Installation Option 1: Using a Module (Recommended)
Install Module
Install the “Add to Head” or similar module
Configure
Go to Configuration → Add to Head
Paste Code
Add your BubblaV embed code to the footer section
Option 2: Editing Theme
Go to Appearance → Themes
Edit your active theme
Open html.html.twig or your template file
Paste the embed code before </body>
For custom or developer-built websites:
HTML
React
Next.js
Vue
Angular
Svelte
Astro
Static HTML Add the script tag before the closing </body> tag: <! DOCTYPE html > < html > < head > < title > My Website </ title > </ head > < body > <!-- Your website content --> <!-- BubblaV Widget --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script > </ body > </ html >
React / Create React App Add to your public/index.html: <!-- In public/index.html, before </body> --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script >
Or use a component approach: // components/BubblaVWidget.jsx import { useEffect } from 'react' ; export default function BubblaVWidget () { useEffect (() => { const script = document . createElement ( 'script' ); script . src = 'https://www.bubblav.com/widget.js' ; script . async = true ; script . dataset . websiteId = 'YOUR_WEBSITE_ID' ; document . body . appendChild ( script ); return () => { document . body . removeChild ( script ); }; }, []); return null ; }
Then add to your App: import BubblaVWidget from './components/BubblaVWidget' ; function App () { return ( <> { /* Your app content */ } < BubblaVWidget /> </> ); }
Next.js Option 1: Using next/script (Recommended) // app/layout.tsx or pages/_app.tsx import Script from 'next/script' ; export default function RootLayout ({ children }) { return ( < html > < body > { children } < Script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" strategy = "lazyOnload" /> </ body > </ html > ); }
Option 2: Using _document.tsx (Pages Router) // pages/_document.tsx import { Html , Head , Main , NextScript } from 'next/document' ; export default function Document () { return ( < Html > < Head /> < body > < Main /> < NextScript /> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async /> </ body > </ Html > ); }
Vue.js Add to your public/index.html: <!-- In public/index.html, before </body> --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script >
Or create a component: <!-- components/BubblaVWidget.vue --> < template > < div ></ div > </ template > < script > export default { name: 'BubblaVWidget' , mounted () { const script = document . createElement ( 'script' ); script . src = 'https://www.bubblav.com/widget.js' ; script . async = true ; script . dataset . websiteId = 'YOUR_WEBSITE_ID' ; document . body . appendChild ( script ); } , beforeUnmount () { const script = document . querySelector ( 'script[src="https://www.bubblav.com/widget.js"]' ); if ( script ) script . remove (); } } ; </ script >
Angular Option 1: Edit src/index.html (Recommended) <!-- In src/index.html, before </body> --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script >
Option 2: Using Component // src/app/bubblav-widget/bubblav-widget.component.ts import { Component , OnInit , OnDestroy } from '@angular/core' ; @ Component ({ selector: 'app-bubblav-widget' , template: '' }) export class BubblaVWidgetComponent implements OnInit , OnDestroy { private scriptElement : HTMLScriptElement | null = null ; ngOnInit () { this . scriptElement = document . createElement ( 'script' ); this . scriptElement . src = 'https://www.bubblav.com/widget.js' ; this . scriptElement . async = true ; this . scriptElement . setAttribute ( 'data-site-id' , 'YOUR_WEBSITE_ID' ); document . body . appendChild ( this . scriptElement ); } ngOnDestroy () { if ( this . scriptElement ) { document . body . removeChild ( this . scriptElement ); } } }
Svelte Option 1: Edit src/app.html (SvelteKit) <!-- In src/app.html, before </body> --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" async ></ script >
Option 2: Create a Component <!-- src/lib/BubblaVWidget.svelte --> < script > import { onMount , onDestroy } from 'svelte' ; let scriptElement ; onMount (() => { scriptElement = document . createElement ( 'script' ); scriptElement . src = 'https://www.bubblav.com/widget.js' ; scriptElement . async = true ; scriptElement . setAttribute ( 'data-site-id' , 'YOUR_WEBSITE_ID' ); document . body . appendChild ( scriptElement ); }); onDestroy (() => { if ( scriptElement ) { document . body . removeChild ( scriptElement ); } }); </ script >
Astro Option 1: Using Inline Script (Recommended) Add the script directly to your main layout file (e.g., src/layouts/Layout.astro): --- // Layout.astro --- < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width" /> < title > Your Site </ title > </ head > < body > < slot /> <!-- BubblaV Widget --> < script src = "https://www.bubblav.com/widget.js" data-site-id = "YOUR_WEBSITE_ID" defer ></ script > </ body > </ html >
Option 2: Using Client-Side Script For more control over when the script loads: --- // In your layout or page --- < script is:inline > ( function () { const script = document . createElement ( 'script' ); script . src = 'https://www.bubblav.com/widget.js' ; script . setAttribute ( 'data-site-id' , 'YOUR_WEBSITE_ID' ); script . defer = true ; document . body . appendChild ( script ); })(); </ script >
Use is:inline to ensure the script runs on the client side without Astro’s bundling.
Advanced Options Script Attributes Customize widget behavior with data attributes:
Attribute Values Description data-site-idYour ID Required. Identifies your chatbot
Excluding Pages To hide the widget on specific pages, use the Exclude URLs setting in your Widget Design settings:
Go to Design in the sidebar
Expand the Advanced Settings section
Enter the URLs where you want to hide the widget (one per line)
You can use specific paths like https://example.com/checkout or https://example.com/admin
The widget will automatically be hidden on those pages without requiring any code changes.
Verify Installation After adding the code, verify it’s working:
Clear Cache
Clear your browser cache or open an incognito window
Visit Your Site
Go to your website in a new tab
Look for Widget
The chat bubble should appear in the corner (usually bottom-right)
Test It
Click the bubble and send a test message like “Hello”
Check Response
You should receive a response from your AI assistant
If the widget doesn’t appear immediately, wait 1-2 minutes for caching to clear, then try again.
Troubleshooting
Widget appears but doesn't respond
Widget conflicts with other elements
Widget not appearing on mobile
Ensure your domain matches BubblaV settings
Check for Content Security Policy restrictions
Verify HTTPS is used on your site
Content Security Policy (CSP) If your site uses CSP headers, add these directives:
script-src 'self' https://www.bubblav.com; frame-src 'self' https://www.bubblav.com;
Multiple Websites If you have multiple websites:
Each website needs its own embed code
Use the unique data-site-id for each site
Install the appropriate code on each website
Using the wrong website ID will cause the widget to load with incorrect knowledge and settings.
Next Steps 
