> ## Documentation Index > Fetch the complete documentation index at: https://chatbase.co/docs/llms.txt > Use this file to discover all available pages before exploring further. # Framer > Embed your Chatbase AI agent on a Framer website using the website widget embed code ## Overview Adding your Chatbase AI agent to a Framer website takes two things: the embed code from your Chatbase dashboard, and the **Custom Code** section of your Framer page settings. Once pasted, a floating chat bubble appears on that page. Put your AI agent in front of every visitor to your Framer site, answering questions without them leaving the page. ## Before you start * A Chatbase account with an AI agent. If you haven't built one yet, follow [Your first AI agent](/docs/user-guides/quick-start/your-first-agent). * A Framer website project you can edit. ## How to embed your AI agent 1. Log into your Chatbase account and navigate to your [dashboard](https://www.chatbase.co/dashboard/). 2. On the list of available AI agents, click the one you want to integrate into your Framer website. 3. Click **Channels** in the left sidebar, then click **Manage** on the **Chat bubble** card (or **Setup**, if you haven't configured it yet). 4. Click **Deploy** and select the **Website widget** embed type. Scroll down and click **Copy** to copy the provided script. The Deploy step showing the website widget embed code Sign in to Framer, go to your project dashboard, and click the website project you want to embed your AI agent in. Selecting a website project in the Framer dashboard Locate the page you want the AI agent on in the left side of the editor, click the three-dot icon next to the page name, then click **Settings**. Opening page settings from the three-dot menu in Framer On the Settings page, scroll down to the section labeled **Custom Code**. Paste your embed code in the first box, labeled *"Start of \ tag"*, then click **Save** in the top-right corner of the panel. Pasting the embed code into the Custom Code section in Framer You should now see a floating Chatbase AI agent icon on your Framer website, on the page you added it to. The Chatbase chat bubble live on a Framer website You can customize the appearance and colors of your AI agent on your Chatbase dashboard. Go to your **dashboard**, choose an AI agent, click **Channels** in the left sidebar, click **Manage** on the **Chat bubble** card, then open the **Display** tab to edit Content, Capabilities, Colors, Floating bubble, and Localization. ## Next steps Match the widget to your brand colors, position, and copy.