> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bubblav.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Add the chatbot widget to your website

Install BubblaV on any website in minutes. Choose your platform for step-by-step instructions.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/bubblav-e553cf80/nhelQxnCmiOq_LRR/images/installation.png?fit=max&auto=format&n=nhelQxnCmiOq_LRR&q=85&s=b3d93fb312522d43a5d9feea92efe806" alt="Installation Overview" width="1409" height="767" data-path="images/installation.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/bubblav-e553cf80/nhelQxnCmiOq_LRR/images/installation-dark.png?fit=max&auto=format&n=nhelQxnCmiOq_LRR&q=85&s=fe02aa104ca1c2b6a8dd25bf2293cae9" alt="Installation Overview" width="1395" height="753" data-path="images/installation-dark.png" />
</Frame>

## Using AI Builders (Lovable, v0, Bolt, Cursor)

Building with an AI-powered tool? Copy the prompt below and paste it directly into your AI builder to integrate BubblaV automatically.

<Tip>
  This works with Lovable, v0, Bolt, Cursor, Windsurf, and any other AI coding assistant.
</Tip>

```text expandable theme={null}
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';
    <BubblaVWidget websiteId="YOUR_WEBSITE_ID" />

  Vue — import { BubblaVWidget } from '@bubblav/ai-chatbot-vue';
    <BubblaVWidget website-id="YOUR_WEBSITE_ID" />

  Angular (standalone) — import { BubblaVWidgetComponent } from '@bubblav/ai-chatbot-angular';
    Add BubblaVWidgetComponent to the component's imports array, then:
    <bubblav-widget websiteId="YOUR_WEBSITE_ID"></bubblav-widget>

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 </body> in your main HTML or layout file:

<script
  src="https://www.bubblav.com/widget.js"
  data-site-id="YOUR_WEBSITE_ID"
  async
></script>

For Next.js (app/layout.tsx or pages/_app.tsx), use next/script instead:
  import Script from 'next/script';
  <Script src="https://www.bubblav.com/widget.js" data-site-id="YOUR_WEBSITE_ID" strategy="lazyOnload" />

Replace YOUR_WEBSITE_ID with the ID from your BubblaV dashboard at bubblav.com/dashboard.
```

<Note>
  After the AI applies the change, replace `YOUR_WEBSITE_ID` with the actual ID from your [BubblaV dashboard](https://www.bubblav.com/dashboard).
</Note>

***

## Getting Your Embed Code

<Steps>
  <Step title="Open Dashboard">
    Go to [bubblav.com/dashboard](https://www.bubblav.com/dashboard)
  </Step>

  <Step title="Select Website">
    Click on the website you want to install
  </Step>

  <Step title="Go to Installation">
    Click **Installation** in the sidebar
  </Step>

  <Step title="Copy Code">
    Click **Copy** to copy the embed code to your clipboard
  </Step>
</Steps>

### Your Embed Code

```html theme={null}
<script
  src="https://www.bubblav.com/widget.js"
  data-site-id="YOUR_WEBSITE_ID"
  async
></script>
```

<Note>
  Your website ID is unique to your account. Never share it publicly, as it identifies your chatbot.
</Note>

***

## Using NPM Packages

For React, Vue, and Angular applications, you can use our official NPM packages for a better developer experience with type safety and framework integration.

<Tabs>
  <Tab title="React">
    ### React Package

    Install the package:

    ```bash theme={null}
    npm install @bubblav/ai-chatbot-react
    # or
    yarn add @bubblav/ai-chatbot-react
    # or
    pnpm add @bubblav/ai-chatbot-react
    ```

    Basic usage:

    ```jsx theme={null}
    import { BubblaVWidget } from '@bubblav/ai-chatbot-react';

    function App() {
      return (
        <BubblaVWidget
          websiteId="your-website-id"
        />
      );
    }
    ```

    With customization:

    ```jsx theme={null}
    import { BubblaVWidget } from '@bubblav/ai-chatbot-react';

    function App() {
      return (
        <BubblaVWidget
          websiteId="your-website-id"
          bubbleColor="#3b82f6"
          desktopPosition="bottom-right"
        />
      );
    }
    ```

    The React package is **strict-mode safe** and prevents double initialization. It also provides hooks for programmatic access:

    ```jsx theme={null}
    import { useBubblaVWidget } from '@bubblav/ai-chatbot-react';

    function SendMessageButton() {
      const widget = useBubblaVWidget();

      const handleClick = () => {
        widget?.sendMessage('Hello, I need help!');
      };

      return <button onClick={handleClick}>Get Help</button>;
    }
    ```

    <Note>
      The React package handles SSR automatically and only loads the widget script in the browser.
    </Note>
  </Tab>

  <Tab title="Vue">
    ### Vue Package

    Install the package:

    ```bash theme={null}
    npm install @bubblav/ai-chatbot-vue
    # or
    yarn add @bubblav/ai-chatbot-vue
    # or
    pnpm add @bubblav/ai-chatbot-vue
    ```

    Basic usage:

    ```vue theme={null}
    <script setup>
    import { BubblaVWidget } from '@bubblav/ai-chatbot-vue';
    </script>

    <template>
      <BubblaVWidget
        website-id="your-website-id"
      />
    </template>
    ```

    With customization:

    ```vue theme={null}
    <script setup>
    import { BubblaVWidget } from '@bubblav/ai-chatbot-vue';
    </script>

    <template>
      <BubblaVWidget
        website-id="your-website-id"
        bubble-color="#3b82f6"
        desktop-position="bottom-right"
      />
    </template>
    ```

    Using composables:

    ```vue theme={null}
    <script setup>
    import { useBubblaVWidget } from '@bubblav/ai-chatbot-vue';

    const widget = useBubblaVWidget();

    const sendMessage = () => {
      widget.value?.sendMessage('I need help!');
    };
    </script>

    <template>
      <button @click="sendMessage">Get Help</button>
    </template>
    ```

    <Note>
      The Vue package is SSR-safe and works with Vue 3 Composition API.
    </Note>
  </Tab>

  <Tab title="Angular">
    ### Angular Package

    Install the package:

    ```bash theme={null}
    npm install @bubblav/ai-chatbot-angular
    # or
    yarn add @bubblav/ai-chatbot-angular
    # or
    pnpm add @bubblav/ai-chatbot-angular
    ```

    Basic usage (standalone component):

    ```ts theme={null}
    import { Component } from '@angular/core';
    import { BubblaVWidgetComponent } from '@bubblav/ai-chatbot-angular';

    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [BubblaVWidgetComponent],
      template: `
        <bubblav-widget
          websiteId="your-website-id"
        />
      `
    })
    export class AppComponent {}
    ```

    With customization:

    ```html theme={null}
    <bubblav-widget
      websiteId="your-website-id"
      bubbleColor="#3b82f6"
      desktopPosition="bottom-right">
    </bubblav-widget>
    ```

    Using the service for programmatic access:

    ```ts theme={null}
    import { Component, inject } from '@angular/core';
    import { BubblaVWidgetService } from '@bubblav/ai-chatbot-angular';

    @Component({
      selector: 'app-support',
      template: `
        <button (click)="openChat()">Open Chat</button>
      `
    })
    export class SupportComponent {
      private bubblav = inject(BubblaVWidgetService);

      openChat() {
        this.bubblav.open();
      }
    }
    ```

    <Note>
      The Angular package supports Angular 14+ with standalone components and is SSR-safe.
    </Note>
  </Tab>
</Tabs>

***

## Platform Instructions

Choose your website platform:

<Tabs>
  <Tab title="WordPress">
    ### WordPress Installation

    **Option 1: Using BubblaV WordPress Plugin (Recommended)**

    Install our official WordPress plugin for the easiest installation:

    <Steps>
      <Step title="Go to Plugins">
        Log in to your WordPress admin and go to **Plugins** → **Add New**
      </Step>

      <Step title="Search Plugin">
        Search for "BubblaV Chat" in the WordPress plugin repository
      </Step>

      <Step title="Install Plugin">
        Click **Install Now** and then **Activate**
      </Step>

      <Step title="Configure">
        Go to **BubblaV Chat** settings and enter your website ID
      </Step>

      <Step title="Done">
        The widget is automatically installed on your WordPress site
      </Step>
    </Steps>

    **Option 2: Manual Installation**

    Alternatively, use a generic plugin:

    <Steps>
      <Step title="Install Plugin">
        Go to **Plugins** → **Add New**, search for "Insert Headers and Footers", and install it
      </Step>

      <Step title="Activate">
        Click **Activate** after installation
      </Step>

      <Step title="Open Settings">
        Go to **Settings** → **Insert Headers and Footers**
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code in the **Scripts in Footer** section
      </Step>

      <Step title="Save">
        Click **Save** to apply changes
      </Step>
    </Steps>
  </Tab>

  <Tab title="WooCommerce">
    ### WooCommerce Installation

    **Option 1: Using BubblaV WordPress Plugin (Recommended)**

    Install our official WordPress plugin for seamless WooCommerce integration:

    <Steps>
      <Step title="Go to Plugins">
        Log in to your WordPress admin and go to **Plugins** → **Add New**
      </Step>

      <Step title="Search Plugin">
        Search for "BubblaV Chat" in the WordPress plugin repository
      </Step>

      <Step title="Install Plugin">
        Click **Install Now** and then **Activate**
      </Step>

      <Step title="Configure">
        Go to **BubblaV Chat** settings and enter your website ID
      </Step>

      <Step title="Connect Integration">
        The widget is automatically installed on your WooCommerce store
      </Step>
    </Steps>

    <Tip>
      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.
    </Tip>

    **Option 2: Manual Installation**

    Alternatively, use a generic plugin:

    <Steps>
      <Step title="Install Plugin">
        Go to **Plugins** → **Add New**, search for "Insert Headers and Footers", and install it
      </Step>

      <Step title="Activate">
        Click **Activate** after installation
      </Step>

      <Step title="Open Settings">
        Go to **Settings** → **Insert Headers and Footers**
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code in the **Scripts in Footer** section
      </Step>

      <Step title="Save">
        Click **Save** to apply changes
      </Step>
    </Steps>
  </Tab>

  <Tab title="BigCommerce">
    ### BigCommerce Installation

    **Option 1: Using BubblaV BigCommerce App (Recommended)**

    Install our official BigCommerce app for automatic installation:

    <Steps>
      <Step title="Go to Marketplace">
        Log in to your BigCommerce admin panel and go to **Apps** → **BigCommerce Marketplace**
      </Step>

      <Step title="Search App">
        Search for "BubblaV" in the marketplace
      </Step>

      <Step title="Install App">
        Click **Install** and follow the setup wizard
      </Step>

      <Step title="Connect Account">
        Connect your BubblaV account during setup
      </Step>

      <Step title="Done">
        The widget is automatically installed on your store
      </Step>
    </Steps>

    **Option 2: Manual Installation (Legacy)**

    Use BigCommerce's Script Manager to add the widget:

    <Steps>
      <Step title="Log In">
        Log in to your BigCommerce admin panel
      </Step>

      <Step title="Script Manager">
        Go to **Storefront** → **Script Manager**
      </Step>

      <Step title="Create Script">
        Click **Create a Script**
      </Step>

      <Step title="Configure Script">
        Set these options:

        * **Name**: BubblaV Widget
        * **Location**: Footer
        * **Pages**: All Pages
        * **Script category**: Script
        * **Script content**: Paste your embed code
      </Step>

      <Step title="Save">
        Click **Save** to apply changes
      </Step>
    </Steps>
  </Tab>

  <Tab title="Shopify">
    ### Shopify Installation

    **Option 1: Using BubblaV Shopify App (Recommended)**

    1. Install the BubblaV app from the Shopify App Store
    2. Connect your BubblaV account during setup
    3. The widget will be automatically installed on your store
    4. Configure the widget appearance from your Shopify admin or this dashboard

    **Option 2: Manual Installation (Legacy)**

    <Steps>
      <Step title="Open Theme Editor">
        Go to **Online Store** → **Themes**
      </Step>

      <Step title="Edit Code">
        Click the **...** menu on your active theme, then **Edit code**
      </Step>

      <Step title="Open theme.liquid">
        In the Layout section, click on `theme.liquid`
      </Step>

      <Step title="Find Body Tag">
        Scroll to find the closing `</body>` tag
      </Step>

      <Step title="Paste Code">
        Paste your embed code just before `</body>`
      </Step>

      <Step title="Save">
        Click **Save** in the top right
      </Step>
    </Steps>

    <Tip>
      If you're using a Shopify 2.0 theme, you can also add the code via **Online Store** → **Themes** → **Customize** → **Theme settings** → **Custom code**.
    </Tip>
  </Tab>

  <Tab title="Haravan">
    ### Haravan Installation

    Haravan uses Liquid templating similar to Shopify. Add the widget through the theme code editor.

    <Steps>
      <Step title="Access Theme Editor">
        Go to your Haravan admin at `your-store.myharavan.com`, then navigate to **Website** → **Giao diện** (Theme)
      </Step>

      <Step title="Edit Theme Code">
        Click on your active theme, then select **Chỉnh sửa code** (Edit code)
      </Step>

      <Step title="Open theme.liquid">
        In the **Layouts** folder on the left sidebar, click on `theme.liquid`
      </Step>

      <Step title="Find Body Tag">
        Scroll to the bottom of the file to find the closing `</body>` tag (usually around line 142)
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code just before `</body>`:

        ```html theme={null}
        <!-- BubblaV Chat Widget -->
        <script
          src="https://www.bubblav.com/widget.js"
          data-site-id="YOUR_WEBSITE_ID"
          async
        ></script>
        ```
      </Step>

      <Step title="Save">
        Click **Save** to apply changes
      </Step>
    </Steps>

    <Note>
      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.
    </Note>

    <Tip>
      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.
    </Tip>
  </Tab>

  <Tab title="Wix">
    ### Wix Installation

    <Steps>
      <Step title="Open Settings">
        In your Wix dashboard, go to **Settings**
      </Step>

      <Step title="Custom Code">
        Click **Custom Code** (under Advanced)
      </Step>

      <Step title="Add Code">
        Click **+ Add Custom Code**
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code
      </Step>

      <Step title="Configure">
        Set these options:

        * **Name**: BubblaV Chat
        * **Add to**: All pages
        * **Place code in**: Body - end
      </Step>

      <Step title="Apply">
        Click **Apply**
      </Step>
    </Steps>

    <Note>
      Custom code requires Wix Premium. Free Wix sites cannot add custom scripts.
    </Note>
  </Tab>

  <Tab title="Squarespace">
    ### Squarespace Installation

    <Steps>
      <Step title="Open Settings">
        Go to **Settings** → **Advanced** → **Code Injection**
      </Step>

      <Step title="Footer Section">
        Scroll to the **Footer** section
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code
      </Step>

      <Step title="Save">
        Click **Save**
      </Step>
    </Steps>

    <Note>
      Code Injection requires a Squarespace Business plan or higher.
    </Note>
  </Tab>

  <Tab title="Webflow">
    ### Webflow Installation

    **Option 1: Using the BubblaV Webflow App (Recommended)**

    <Steps>
      <Step title="Install App">
        In Webflow, go to <strong>Apps</strong> and search for "BubblaV", or <a href="https://webflow.com/apps/detail/bubblav-ai-chatbot" target="_blank">open the app page directly</a>
      </Step>

      <Step title="Click Install">
        Click <strong>Install</strong> to add the app to your project
      </Step>

      <Step title="Login & Select">
        Click <strong>Login & Select Website</strong> to sign in and choose your website
      </Step>

      <Step title="Publish">
        Publish your site and the chatbot appears automatically
      </Step>
    </Steps>

    <Tip>
      The app handles OAuth login, website selection, and widget injection automatically — no code required. No need to copy-paste embed codes!
    </Tip>

    **Option 2: Manual Installation (Site-wide)**

    <Steps>
      <Step title="Open Project Settings">
        Click the gear icon in the left panel
      </Step>

      <Step title="Custom Code">
        Go to the **Custom Code** tab
      </Step>

      <Step title="Footer Code">
        Paste your embed code in the **Footer Code** section
      </Step>

      <Step title="Save and Publish">
        Save changes and publish your site
      </Step>
    </Steps>

    **Option 3: Specific Pages Only (Manual)**

    1. Open the page in the Designer
    2. Go to **Page Settings** (gear icon)
    3. Scroll to **Custom Code** → **Before `</body>` tag**
    4. Paste your embed code
    5. Save and publish
  </Tab>

  <Tab title="Framer">
    ### Framer Installation

    **Option 1: Using BubblaV Framer Plugin (Recommended)**

    <Steps>
      <Step title="Install Plugin">
        In Framer, go to <strong>Plugins</strong> → <strong>Store</strong> and search for "BubblaV"
      </Step>

      <Step title="Click Install">
        Click <strong>Install</strong> to add the plugin to your project
      </Step>

      <Step title="Login & Select">
        Click <strong>Login & Select Website</strong> to sign in and choose your website
      </Step>

      <Step title="Customize">
        Adjust widget appearance in the plugin panel (optional)
      </Step>

      <Step title="Publish">
        Publish your site and the chatbot appears automatically
      </Step>
    </Steps>

    <Tip>
      The plugin automatically creates the component in your code and adds it to your canvas with pre-configured settings. No need to copy-paste codes!
    </Tip>

    **Option 2: Manual Installation**

    <Steps>
      <Step title="Open Site Settings">
        Open your Framer project and go to <strong>Site Settings</strong>
      </Step>

      <Step title="General Tab">
        Click on the <strong>General</strong> tab
      </Step>

      <Step title="Custom Code">
        Scroll down to the <strong>End of <code>\<body></code> tag</strong> section
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code
      </Step>

      <Step title="Save and Publish">
        Click <strong>Save</strong> and then <strong>Publish</strong> your site
      </Step>
    </Steps>
  </Tab>

  <Tab title="Joomla">
    ### Joomla Installation

    **Option 1: Using a Plugin (Recommended)**

    <Steps>
      <Step title="Install Plugin">
        Install a "Custom HTML" or "Insert HTML" extension from the Joomla Extensions Directory
      </Step>

      <Step title="Configure Plugin">
        Go to **Extensions** → **Plugins** and configure the plugin
      </Step>

      <Step title="Paste Code">
        Paste your BubblaV embed code in the footer section
      </Step>

      <Step title="Save">
        Save and apply changes
      </Step>
    </Steps>

    **Option 2: Editing Template Files**

    1. Go to **Extensions** → **Templates** → **Templates**
    2. Select your active template
    3. Open `index.php` or `footer.php`
    4. Paste the embed code before `</body>`
    5. Save & Close
  </Tab>

  <Tab title="Drupal">
    ### Drupal Installation

    **Option 1: Using a Module (Recommended)**

    <Steps>
      <Step title="Install Module">
        Install the "Add to Head" or similar module
      </Step>

      <Step title="Configure">
        Go to **Configuration** → **Add to Head**
      </Step>

      <Step title="Paste Code">
        Add your BubblaV embed code to the footer section
      </Step>

      <Step title="Save">
        Save configuration
      </Step>
    </Steps>

    **Option 2: Editing Theme**

    1. Go to **Appearance** → **Themes**
    2. Edit your active theme
    3. Open `html.html.twig` or your template file
    4. Paste the embed code before `</body>`
  </Tab>
</Tabs>

***

## Developer Platforms

For custom or developer-built websites:

<Tabs>
  <Tab title="HTML">
    ### Static HTML

    Add the script tag before the closing `</body>` tag:

    ```html theme={null}
    <!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>
    ```
  </Tab>

  <Tab title="React">
    ### React / Create React App

    Add to your `public/index.html`:

    ```html theme={null}
    <!-- 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:

    ```jsx theme={null}
    // 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:

    ```jsx theme={null}
    import BubblaVWidget from './components/BubblaVWidget';

    function App() {
      return (
        <>
          {/* Your app content */}
          <BubblaVWidget />
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Next.js">
    ### Next.js

    **Option 1: Using next/script (Recommended)**

    ```jsx theme={null}
    // 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)**

    ```jsx theme={null}
    // 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>
      );
    }
    ```
  </Tab>

  <Tab title="Vue">
    ### Vue.js

    Add to your `public/index.html`:

    ```html theme={null}
    <!-- 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:

    ```vue theme={null}
    <!-- 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>
    ```
  </Tab>

  <Tab title="Angular">
    ### Angular

    **Option 1: Edit src/index.html (Recommended)**

    ```html theme={null}
    <!-- 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**

    ```typescript theme={null}
    // 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);
        }
      }
    }
    ```
  </Tab>

  <Tab title="Svelte">
    ### Svelte

    **Option 1: Edit src/app.html (SvelteKit)**

    ```html theme={null}
    <!-- 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**

    ```svelte theme={null}
    <!-- 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>
    ```
  </Tab>

  <Tab title="Astro">
    ### Astro

    **Option 1: Using Inline Script (Recommended)**

    Add the script directly to your main layout file (e.g., `src/layouts/Layout.astro`):

    ```astro theme={null}
    ---
    // 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:

    ```astro theme={null}
    ---
    // 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>
    ```

    <Note>
      Use `is:inline` to ensure the script runs on the client side without Astro's bundling.
    </Note>
  </Tab>
</Tabs>

***

## 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:

1. Go to **Design** in the sidebar
2. Expand the **Advanced Settings** section
3. Enter the URLs where you want to hide the widget (one per line)
4. 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:

<Steps>
  <Step title="Clear Cache">
    Clear your browser cache or open an incognito window
  </Step>

  <Step title="Visit Your Site">
    Go to your website in a new tab
  </Step>

  <Step title="Look for Widget">
    The chat bubble should appear in the corner (usually bottom-right)
  </Step>

  <Step title="Test It">
    Click the bubble and send a test message like "Hello"
  </Step>

  <Step title="Check Response">
    You should receive a response from your AI assistant
  </Step>
</Steps>

<Tip>
  If the widget doesn't appear immediately, wait 1-2 minutes for caching to clear, then try again.
</Tip>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget not appearing">
    **Check these common issues:**

    * Code is placed before `</body>`, not in `<head>`
    * Website ID is correct (copy from dashboard)
    * Your domain matches the one in your BubblaV settings
    * JavaScript is enabled in your browser
    * No browser extensions blocking scripts

    **Debug steps:**

    1. Open browser DevTools (F12)
    2. Check Console for errors
    3. Check Network tab for widget.js loading
  </Accordion>

  <Accordion title="Widget appears but doesn't respond">
    * Check your message limits (may be exceeded)
    * Verify crawl completed successfully
    * Ensure knowledge base has content
    * Check browser console for API errors
  </Accordion>

  <Accordion title="Widget conflicts with other elements">
    * Adjust z-index in Widget Design settings
    * Check for CSS conflicts with `.bubblav-widget` class
    * Try different position (left vs right)
  </Accordion>

  <Accordion title="Widget loads slowly">
    * The `async` attribute ensures non-blocking load
    * Widget loads after main content (intentional)
    * Check if your site has slow third-party scripts
  </Accordion>

  <Accordion title="Widget not appearing on mobile">
    * Verify mobile isn't disabled in settings
    * Check responsive CSS isn't hiding it
    * Test on actual mobile device, not just DevTools
  </Accordion>

  <Accordion title="CORS or security errors">
    * Ensure your domain matches BubblaV settings
    * Check for Content Security Policy restrictions
    * Verify HTTPS is used on your site
  </Accordion>
</AccordionGroup>

***

## 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:

1. Each website needs its own embed code
2. Use the unique `data-site-id` for each site
3. Install the appropriate code on each website

<Warning>
  Using the wrong website ID will cause the widget to load with incorrect knowledge and settings.
</Warning>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Design Your Widget" icon="palette" href="/user-guide/widget-design">
    Customize colors and appearance
  </Card>

  <Card title="Test Your Bot" icon="flask" href="/user-guide/testing">
    Verify everything works correctly
  </Card>
</CardGroup>