# Framer AI Chatbot: Add It With Custom Code

Source: https://insertchat.com/integration/framer

> Install the AI chat widget on Framer with Custom Code.

To add an AI chatbot to Framer, open Project Settings → Custom Code, click Add Script, paste your InsertChat install code, place it at the end of the body, and publish. Framer doesn’t load custom code in the canvas preview, so test on the live site. The chat answers from your content and books calls.

## Book demos from a Framer landing page

A founder on your Framer landing page asks how onboarding works and whether you connect to their CRM. The assistant answers from your pages and documents, asks who they are, and books a call in your calendar. The lead and transcript go to the shared inbox, and a HubSpot contact or Zoho CRM lead is created too if you connect one.

## Where the code goes in Framer

- Location: Project Settings → Custom Code → Add Script, end of body
- Requirements: Framer’s help article lists no plan requirement for custom code; connecting your own domain needs a paid Framer plan. Framer doesn’t load custom code in the canvas preview.
- Source: [Framer: How to add custom code](https://www.framer.com/help/articles/how-to-add-custom-code/), [Framer Academy: Custom code](https://www.framer.com/academy/lessons/custom-code), checked 2026-10-13

A website install adds the chat to your pages without signing in to your Framer account or reading its data.

## Setup

1. **Copy your install code.** Open your assistant’s website install settings in InsertChat, choose HTML or custom website as your website platform, and copy the installation code.
2. **Add a script in Framer.** Open Project Settings → Custom Code and click Add Script. Name it InsertChat, paste the code, and place it at the end of the body tag.
3. **Publish and test.** Publish, open the live site, and ask the chat a few questions. Then run Verify on your website in InsertChat with the published URL.

## How businesses use Framer with InsertChat

Illustrative examples, not customer results.

- **Ship a chat assistant with every client site.** Studios that build on Framer can hand over a site with its own trained assistant, branded for the client and managed from your InsertChat workspace. [Agencies & teams](https://insertchat.com/industries/agencies)
- **Answer service questions during tax season.** A visitor asks whether you file for small businesses and what documents to bring. The assistant answers from your services and checklist pages and books a first meeting. [Accounting](https://insertchat.com/industries/accounting)
- **Turn portfolio views into discovery calls.** A visitor admiring a project asks whether you work remotely. The assistant explains your process, collects the project details, and books a discovery call in your calendar. [Interior design](https://insertchat.com/industries/interior-design)

## Which Framer plan do I need for the chatbot?

Framer’s help article on custom code doesn’t list a plan requirement. Framer’s pricing page says connecting a custom domain needs a paid plan, so check your plan before you go live on your own domain.

## Why can’t I see the chat in the Framer canvas?

Framer doesn’t load custom code in the canvas preview. Publish the site, open the live page in a browser, and check that the chat launcher appears.

## Can I show the chat on only some Framer pages?

Yes. When you add the script in Project Settings → Custom Code, select the pages it should run on. Leave every page selected if you want visitors to reach the chat anywhere on the site.

## Will the chat match my Framer design?

Set the assistant’s name, logo, colors, and tone in InsertChat, then adjust the launcher’s button color and its bottom and side clearance so it doesn’t cover your own buttons.

## Related features

- [Website chat](https://insertchat.com/product/website)
- [Lead capture](https://insertchat.com/product/lead-capture)
- [Scheduling](https://insertchat.com/product/scheduling)

## Related guides and comparisons

- [How to build your assistant’s knowledge base](https://insertchat.com/blog/prepare-your-assistants-knowledge)
- [How to set up human handoff](https://insertchat.com/blog/set-up-human-handoff)
- [InsertChat vs Tidio](https://insertchat.com/alternatives/tidio)
- [InsertChat vs Chatbase](https://insertchat.com/alternatives/chatbase)