Skip to main content

​
Overview

Add your Invent AI assistant to any Framer site with a floating bubble. Perfect for modern, interactive websites built with Framer.

​
Installation

1

Open Your Framer Project

Open your Framer project in the Framer editor.
2

Go to Site Settings

Click on the Settings icon in the top toolbar, then select General.
3

Add Custom Code

Scroll down to Custom Code section and find End of <body> tag.
4

Paste the Code

Add this code:
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
Replace YOUR_ASSISTANT_ID with your actual assistant ID from the Invent dashboard.
5

Publish Your Site

Click Publish and your assistant will appear on all pages.

​
Customization

​
Match Your Framer Design

<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  theme-appearance="dark"
  theme-button-background-color="#0099FF"
  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 in Framer:
  1. Select the specific page in your Framer project
  2. Click Page Settings (gear icon)
  3. Scroll to Custom Code
  4. Add the code to that page only

​
Framer Components

You can also add the assistant to specific components:
  1. Create a Code Component in Framer
  2. Add the embed code inside
  3. Place the component wherever you want
export default function InventAssistant() {
  return (
    <>
      <invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
      <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
    </>
  )
}

​
User Authentication

Security Requirement: When using any user-* attributes (user-id, user-name, user-avatar), you must also provide user-hash. Both user-id and user-hash must be provided together, or neither should be provided. The user-hash must be generated on your backend using HMAC-SHA256 with your assistant’s secret key. Never expose the secret key to the client.
Pass user data if you have a membership or login system. See the Bubble Integration guide for complete authentication examples in multiple languages. 
<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  user-id="USER_ID"
  user-name="USER_NAME"
  user-hash="GENERATED_HASH"
/>
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

​
Tips for Framer

Animations

The bubble works seamlessly with Framer animations

Responsive

Automatically adapts to mobile layouts

Performance

Async loading won’t slow down your site

CMS Ready

Works with Framer CMS pages

​
Troubleshooting

Solutions:
  • Verify code is in “End of body tag” section
  • Check assistant ID is correct
  • Clear browser cache and reload
  • Check browser console for errors
Solutions:
  • Check z-index if bubble is hidden behind elements
  • Ensure no other chat widgets are installed
  • Test with interactions temporarily disabled