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

# Webflow

> Add your Invent assistant to Webflow sites

## Overview

Add your Invent AI assistant to any Webflow site with a floating bubble. Perfect for providing instant support to your Webflow site visitors.

## Installation

<Steps>
  <Step title="Open Project Settings">
    In Webflow Designer, click the **Settings** icon (gear) in the left sidebar.
  </Step>

  <Step title="Navigate to Custom Code">
    Go to the **Custom Code** tab at the top.
  </Step>

  <Step title="Add to Footer Code">
    Scroll down to **Footer Code** and paste this code:

    ```html theme={"system"}
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
    ```

    Replace `ast_YOUR_ASSISTANT_ID` with your actual assistant ID from the Invent dashboard.
  </Step>

  <Step title="Save and Publish">
    Click **Save Changes** and then **Publish** your site. The bubble will now appear on all pages.
  </Step>
</Steps>

## Customization

### Match Your Brand Colors

```html theme={"system"}
<invent-assistant
  assistant-id="ast_YOUR_ASSISTANT_ID"
  theme-appearance="auto"
  theme-button-background-color="#4353FF"
  theme-button-color="#FFFFFF"
/>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

### Show Only on Specific Pages

For page-specific installation:

1. Open the page in Webflow Designer
2. Click **Settings** (gear icon) for that page
3. Go to **Custom Code** tab
4. Add the code to **Before closing body tag**

## Using Webflow CMS

If you're using Webflow CMS, you can add the bubble to collection templates:

1. Open your **Collection Template** page
2. Add an **Embed** element where you want the assistant
3. Paste the bubble code
4. The assistant will appear on all collection pages

## User Authentication

<Warning>
  **User Authentication Requires External Service:** Webflow does not provide server-side scripting capabilities to securely generate the `user-hash` required for user authentication. To use user-specific features with Webflow Memberships, you **must** set up an external backend service or serverless function to generate the hash. Both `user-id` and `user-hash` must be provided together, generated using HMAC-SHA256 with your assistant's secret key.
</Warning>

For most Webflow sites, use the basic implementation without authentication:

```html theme={"system"}
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

### Advanced: With External Authentication Service

If you've set up an external service to generate user hashes:

```html theme={"system"}
<invent-assistant
  assistant-id="ast_YOUR_ASSISTANT_ID"
  user-id="USER_ID_FROM_YOUR_SERVICE"
  user-name="USER_NAME_FROM_YOUR_SERVICE"
  user-hash="HASH_FROM_YOUR_SERVICE"
/>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

See the [Widget Authentication](/assistants/widget#user-authentication-optional) guide for hash generation examples that you can deploy as serverless functions.

## Tips for Webflow

<CardGroup cols={2}>
  <Card title="Responsive Design" icon="mobile">
    The button automatically adapts to mobile and tablet layouts
  </Card>

  <Card title="Z-Index" icon="layer-group">
    Button floats above all content by default. Adjust if needed.
  </Card>

  <Card title="Page Load" icon="gauge-high">
    Using async/defer ensures no impact on page speed
  </Card>

  <Card title="Interactions" icon="wand-magic-sparkles">
    Works seamlessly with Webflow interactions and animations
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Bubble not visible">
    **Solutions:**

    * Verify the code is in the Footer Code section
    * Clear Webflow cache and republish
    * Check browser console for errors
    * Ensure assistant ID is correct
  </Accordion>

  <Accordion title="Conflicts with Webflow elements">
    **Solutions:**

    * Check for z-index conflicts in custom CSS
    * Verify no other chat widgets are installed
    * Test with Webflow Designer interactions disabled
  </Accordion>
</AccordionGroup>