Integration

Add an AI voice & chat agent to Framer, with one embed snippet

Paste a single Venbit snippet into Framer's Custom Code, hit publish, and your agent answers visitors by voice or chat across every page, trained on your own content.

Add an AI voice & chat agent to Framer, with one embed snippet

Short version first. Framer doesn't use plugins, so you don't install an AI agent here. You paste a snippet. The clean part is that Framer already gives you a spot built for exactly this: the Custom Code panel in Site Settings. You train your agent in Venbit, copy one short embed snippet, drop it into the body end slot, and publish. A minute later the agent is live on every page, voice and chat both on, answering from your actual pages.

Here's how it attaches. Open Site Settings, scroll to the General tab, and find the Custom Code section. Click Show Advanced and you'll see four slots: head start, head end, body start, and body end. A floating voice and chat launcher belongs in body end, because that loads it after your page content. Your design renders first, the agent loads right behind it, and your page speed stays clean. Paste the Venbit snippet there, save, and publish.

One honest heads-up before you start, because it trips people up on Framer specifically. The site-wide Custom Code panel that injects code into head and body is a paid feature. On the free Framer plan you don't get site-wide head and body code injection, and you can't connect a custom domain either. So a true site-wide launcher needs a paid Framer plan. If you're on the free plan and want to stay there, you can still drop a Venbit HTML Embed component onto a single page, but that only shows the agent on the page where you place it, not across your whole site.

The agent does two things most Framer chat embeds won't. It talks and it types. A visitor can open the bubble and type like any chat box, or tap the mic and have a real spoken conversation in real time. A lot of Framer embeds are text-only. Venbit answers out loud, which helps on mobile where typing is a pain, helps anyone who'd rather ask than read, and helps with accessibility. Voice and chat both ship standard.

And it's trained on your own content. You point Venbit at your Framer site URL and it crawls your public pages, or you upload PDFs, help docs, and price sheets directly. So when someone asks about your pricing or your refund policy, the agent answers from your real pages instead of guessing. As it trains, Venbit also generates AI-SEO artifacts like JSON-LD and an llms.txt file, so AI search engines can read your site the same way your visitors can.

Below is the whole process. It takes a few minutes, and you can build and train the agent on Venbit's free plan with no card before you decide on anything.

How to add Venbit to Framer

  1. 1

    Create and train your agent on Venbit

    Sign up free at venbit.ai. Paste your Framer site URL and Venbit crawls your public pages, or upload documents like product sheets, FAQs, and pricing PDFs directly. The agent answers from whatever you feed it, so a few minutes of good content here is what keeps it from inventing answers later. This part costs nothing and needs no card.

  2. 2

    Copy your embed snippet from Venbit

    In your Venbit dashboard, open the install panel and copy the embed snippet. It's one short script tag with your agent's ID baked in. That single line is everything Framer needs to load the agent, so you won't be pasting anything else. If you run more than one site, each gets its own snippet so they stay separate.

  3. 3

    Open Custom Code in Framer Site Settings

    In the Framer project, open Site Settings, go to the General tab, and scroll to the Custom Code section. Heads-up: the site-wide Custom Code panel that injects into head and body needs a paid Framer plan. On the free plan it isn't available, so either upgrade or use the page Embed option in the FAQ below. Click Show Advanced to reveal the four placement slots.

  4. 4

    Paste the snippet into the body end slot

    Drop the Venbit snippet into the body end field, not the head fields. Body end loads the agent after your page content, so your design renders first and the widget loads right after without blocking anything. Click Save. That single paste applies the agent across every published page on your Framer site at once.

  5. 5

    Choose voice, chat, or both

    Back in Venbit, decide how visitors reach the agent. Turn on the mic for spoken conversations, the bubble for typed chat, or run both at once. Set the launcher position, match your brand colors, and write a greeting line. These live in your Venbit settings, so you can tweak them anytime without touching Framer again.

  6. 6

    Publish your Framer site and check it live

    Hit Publish in Framer. Custom code only renders on the live published site, not the editor canvas, so this step is what makes the agent appear. Open your published .framer.website URL or your live domain in a fresh tab, look for the launcher, and ask it a real question. From here it runs 24/7 and drops every captured lead into your Venbit inbox so nothing slips through after hours.

Why add Venbit to Framer

  • Installs with one embed snippet pasted into Framer's site-wide Custom Code, no plugin and no canvas hacking
  • Goes live on every published page from a single paste in the body end slot, not page by page
  • Real-time voice and typed chat in one agent, not the text-only widget most Framer embeds ship
  • Trained on your own Framer pages and documents, so answers come from your business instead of generic guesses
  • Loads in body end so your Framer pages render first and your page speed stays clean
  • Captures and stores leads 24/7, including the late-night questions you'd otherwise never see
  • Update colors, voice, and greeting from the Venbit dashboard without republishing or editing Framer
  • Generates AI-SEO artifacts like JSON-LD and llms.txt so AI search engines can read your site too

Frequently asked questions

Does Framer have a Venbit plugin like WordPress does?+

No, and that's a Framer thing, not a Venbit thing. Framer doesn't have a plugin system the way WordPress does, so every tool installs by pasting code. You copy one Venbit snippet and drop it into Framer's Custom Code panel. WordPress gets a true one-click plugin from us, but on Framer the snippet route is the clean, standard way and it takes about a minute.

Do I need a paid Framer plan to add the agent site-wide?+

For the snippet to run on every page through Site Settings, yes. Framer's site-wide Custom Code that injects into head and body is a paid feature, and the free plan doesn't include it, so a true site-wide launcher needs a paid plan. The free plan also can't connect a custom domain. If you want to stay on the free plan, you can drop a Venbit HTML Embed component onto a single page instead, though that only shows the agent on that one page.

Where exactly do I paste the Venbit snippet in Framer?+

Open Site Settings, go to the General tab, scroll to the Custom Code section, and click Show Advanced to reveal four slots. Paste the snippet into the body end field, then Save and publish. Use body end rather than the head fields. Body end loads the agent after your page content so your design renders first and your site stays fast, while the head slots are meant for scripts that must fire before the page draws, like analytics.

Why don't I see the agent in the Framer editor?+

Framer only renders custom code on the live published site, not in the editor canvas or the preview. So after you paste the snippet, you have to click Publish before the agent shows up. Check your published .framer.website URL or your live domain in a normal browser tab and it'll be there.

Can Framer visitors actually talk to it, or is it only chat?+

They can talk. Venbit does real-time voice, not just text. A visitor can tap the mic and have a spoken back-and-forth with your site, or type if they'd rather stay quiet. Most Framer chat embeds are text-only, so this is one of the bigger differences. Voice tends to win on mobile, where typing is a chore, and it helps visitors who find reading hard.

I build Framer sites for clients. Is this a clean fit for an agency?+

Yes. Paste the snippet into the client's Site Settings, connect it to that client's agent, and you're done. The training and all the settings live in the Venbit dashboard, so handoff is tidy and you're not leaving fragile code scattered across pages. You can run a separate agent per client and keep every project cleanly separated. Just remember the client's Framer site needs a paid plan for the site-wide snippet to run.

Add an AI agent to Framer in minutes

Build an agent trained on your business in minutes. Free to start, no credit card, install on any website.