> ## 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. # Framer > Add your Invent assistant to Framer sites ## Overview Add your Invent AI assistant to any Framer site with a floating bubble. Perfect for modern, interactive websites built with Framer. ## Installation Open your Framer project in the Framer editor. Click on the **Settings** icon in the top toolbar, then select **General**. Scroll down to **Custom Code** section and find **End of \ tag**. Add this code: ```html theme={"system"} ``` Replace `YOUR_ASSISTANT_ID` with your actual assistant ID from the Invent dashboard. Click **Publish** and your assistant will appear on all pages. ## Customization ### Match Your Framer Design ```html theme={"system"} ``` ### 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 ```jsx theme={"system"} export default function InventAssistant() { return ( <> ) } ``` ## 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 [Widget Authentication](/assistants/widget#user-authentication-optional) guide for complete authentication details. ```html theme={"system"} ``` ## Tips for Framer The bubble works seamlessly with Framer animations Automatically adapts to mobile layouts Async loading won't slow down your site 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