Skip to main content

​
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

1

Open Project Settings

In Webflow Designer, click the Settings icon (gear) in the left sidebar.
2

Navigate to Custom Code

Go to the Custom Code tab at the top.
3

Add to Footer Code

Scroll down to Footer Code and paste this code:
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
Replace ast_YOUR_ASSISTANT_ID with your actual assistant ID from the Invent dashboard.
4

Save and Publish

Click Save Changes and then Publish your site. The bubble will now appear on all pages.

​
Customization

​
Match Your Brand Colors

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

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.
For most Webflow sites, use the basic implementation without authentication: 
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

​
Advanced: With External Authentication Service

If you’ve set up an external service to generate user hashes: 
<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/button.js" async defer></script>
See the Bubble Integration guide for hash generation examples that you can deploy as serverless functions.

​
Tips for Webflow

Responsive Design

The button automatically adapts to mobile and tablet layouts

Z-Index

Button floats above all content by default. Adjust if needed.

Page Load

Using async/defer ensures no impact on page speed

Interactions

Works seamlessly with Webflow interactions and animations

​
Troubleshooting

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
Solutions:
  • Check for z-index conflicts in custom CSS
  • Verify no other chat widgets are installed
  • Test with Webflow Designer interactions disabled