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

# Webflow

> Add BubblaV to your Webflow website with our official app from the Webflow Marketplace

Add BubblaV AI chatbot to your Webflow website in minutes. No coding required.

## Why Use the Webflow App?

<CardGroup cols={3}>
  <Card title="One-Click Install" icon="zap">
    Install the app from the Webflow Marketplace and connect your BubblaV account. The widget is automatically added to your site.
  </Card>

  <Card title="Automatic Setup" icon="sliders">
    The chat widget is configured and deployed automatically — no embed codes or manual installation needed.
  </Card>

  <Card title="Secure OAuth" icon="lock">
    Connect your BubblaV account via secure OAuth. No API keys or manual configuration required.
  </Card>
</CardGroup>

***

## Installation

### Option 1: Using the Webflow App (Recommended)

The easiest way to add BubblaV to your Webflow site. The app is available on the Webflow Marketplace:

<Card title="BubblaV AI Chatbot on Webflow Marketplace" icon="link" href="https://webflow.com/apps/detail/bubblav-ai-chatbot">
  Install the BubblaV app directly from the Webflow Marketplace
</Card>

<Steps>
  <Step title="Open the Webflow Marketplace">
    In your Webflow dashboard, 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="Install the App">
    Click <strong>Install</strong> to add the BubblaV app to your Webflow project
  </Step>

  <Step title="Connect Your Account">
    Log in to your BubblaV account when prompted, or create a new account if you don't have one yet
  </Step>

  <Step title="Select Your Website">
    Choose the website from your BubblaV dashboard that corresponds to your Webflow site
  </Step>

  <Step title="Publish">
    Publish your Webflow site and the chatbot will appear automatically
  </Step>
</Steps>

### Option 2: Manual Installation

If you prefer manual setup:

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

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

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

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

<Note>
  The Webflow Marketplace app is recommended because it handles the entire setup automatically — authentication, widget configuration, and deployment. No need to copy-paste embed codes.
</Note>

***

## Connection Flow

The app uses a secure OAuth flow for authentication:

1. Click **"Install"** on the Webflow Marketplace
2. The app redirects to BubblaV login
3. Complete login (or sign up if new)
4. Select your website from the dashboard
5. Widget is configured and added to your Webflow site automatically

***

## App Features

### Automatic Widget Management

* **Auto-install** — Widget is added to your site automatically after connection
* **Auto-update** — Widget updates are pushed automatically, no reinstallation needed
* **Site sync** — Your Webflow site content is crawled and used as knowledge base

### Customization

Customize the chatbot from your BubblaV dashboard:

* **Colors** — Match your Webflow site color scheme
* **Bot Name** — Custom display name for your chatbot
* **Position** — Widget placement on the page
* **Theme** — Light or dark mode

### When Published

The widget renders as a floating chat button on your published Webflow site. Visitors can click it to start a conversation with your AI-powered chatbot.

***

## Available Tools After Connection

When you connect your Webflow website to BubblaV, the chatbot gains access to your crawled website content and knowledge base.

| Feature            | Description                                       |
| ------------------ | ------------------------------------------------- |
| **Website Search** | Chatbot searches your entire Webflow site content |
| **Knowledge Base** | Add FAQs, documents, and custom content           |
| **Live Support**   | Handoff to human agents when needed               |
| **Analytics**      | Track conversations and visitor insights          |

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget not appearing on published site">
    * Verify you've published your site (not just preview)
    * Wait 1-2 minutes for caching to clear
    * Try clearing your browser cache
    * Check that the app is still installed in your Webflow dashboard
  </Accordion>

  <Accordion title="OAuth login not working">
    * Make sure popups are allowed in your browser
    * Check that you're not using an ad blocker
    * Try removing and re-installing the app from your Webflow dashboard
  </Accordion>

  <Accordion title="Chatbot not responding to questions">
    * Check your message limits (may be exceeded)
    * Verify your site has been crawled successfully
    * Ensure knowledge base has content
    * Try asking a question related to your site content
  </Accordion>

  <Accordion title="Need to reconnect or change website">
    * Remove the BubblaV app from your Webflow dashboard
    * Re-install it from the Webflow Marketplace
    * Log in and select the correct website
  </Accordion>
</AccordionGroup>

***

## Next Steps

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

  <Card title="Setup Knowledge" icon="book" href="/user-guide/knowledge/overview">
    Add your content for better responses
  </Card>
</CardGroup>