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
Shopify
Wix
Squarespace
Webflow
WordPress Installation
Option 1: Using a Plugin (Recommended)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
- Go to Appearance → Theme File Editor
- Select
footer.php from the right sidebar
- Paste the embed code just before
</body>
- Click Update File
Editing theme files directly may be overwritten during theme updates. Use a child theme or plugin for permanence.
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.
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 Chat
- Add to: All pages
- Place 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
- 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
For custom or developer-built websites:
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>
// 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;
}
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>
);
}
// 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>
<!-- 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>
Advanced Options
Script Attributes
Customize widget behavior with data attributes:
| Attribute | Values | Description |
|---|
data-site-id | Your 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
