> ## 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.

> **What you can do:**
>
> 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](https://chatbase.co/docs/user-guides/quick-start/your-first-agent.md).
* A Framer website project you can edit.

## How to embed your AI agent

**1. Copy your embed code**

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](https://mintcdn.com/chatbase/DnMdgLj-7YGWYAcx/user-guides/integrations/images/Integrations/deploy-step.png?fit=max\&auto=format\&n=DnMdgLj-7YGWYAcx\&q=85\&s=31b0448df7dee6c3ccc65eaf9bb47879)

**2. Open your Framer project**

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](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/framer/framer-4.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=e51f7ee035e6e02309b74a3c546521de)

**3. Open the page settings**

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](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/framer/framer-5.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=4e0ea062e50ba7043939f6e8aa129071)

**4. Paste the embed code**

On the Settings page, scroll down to the section labeled **Custom Code**. Paste your embed code in the first box, labeled *"Start of \<head> tag"*, then click **Save** in the top-right corner of the panel.

![Pasting the embed code into the Custom Code section in Framer](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/framer/framer-6.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=7e56bf014d01256e82c8bf49cace1dc1)

> [!TIP]
>
> 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](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/framer/framer-7.jpg?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=5cf0db91175581c7223bfb46bae56644)

> [!NOTE]
>
> 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

> **[Customize the chat bubble](https://chatbase.co/docs/user-guides/chatbot/channels.md#chat-bubble-display)**
>
> Match the widget to your brand colors, position, and copy.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.