Which Framer plans support custom code injection?
The Custom Code panel in Framer Site Settings is available on all paid site plans. The free Framer plan publishes to a framer.website subdomain and does not include code injection. If the Custom Code section is absent from your Site Settings, you are on the free tier.
The table below shows how Framer's plan types map to custom code eligibility. Framer charges per site, so each project has its own plan — upgrading one site does not affect others in your account.
| Plan | Custom Code | Custom Domain | Best for |
|---|---|---|---|
| Free | No | No (framer.website subdomain) | Prototypes, personal experiments |
| Mini | Yes | Yes | Small marketing sites, landing pages |
| Basic | Yes | Yes | Growing business sites |
| Pro | Yes | Yes | High-traffic sites, teams |
If you are building a site for a client or running a business, the Mini plan is the minimum tier you need to both connect a custom domain and inject a chatbot script. Check your current plan at your Framer dashboard and upgrade there if needed before proceeding.
What are the two custom-code paths in Framer?
Framer provides two distinct ways to add third-party code to a site, and choosing the wrong one is the most common setup mistake when embedding a chatbot.
The rule is simple: floating-bubble chatbots go in Site Settings. Inline embeds (content you want at a specific position in your page design) go in the Embed component. For Knobot — and nearly any other chat widget — use Site Settings.
How do you add a chatbot site-wide in Framer?
The site-wide method uses Framer's Custom Code fields to load your chatbot on every published page automatically. These steps cover the full process from opening the right panel to verifying the result on your live site.
- 1
Confirm your plan supports custom code
In your Framer editor, click the Framer logo (top-left corner) and look for Site Settings in the dropdown. If you see Site Settings but no Custom Code section inside it, you are on a plan that does not include this feature. Upgrade at framer.com before continuing.
- 2
Open Site Settings → General
Click the Framer logo → Site Settings. In the panel that opens, select the General tab. Scroll down until you see the Custom Code section with two text areas.
- 3
Paste your script into "End of <body> tag"
Copy the full <script> tag from your chatbot provider and paste it into the "End of <body> tag" field — not the "Start of <head> tag" field. Chatbot widgets initialize after the page DOM is ready; placing them at the end of the body ensures correct load order without blocking page rendering.
- 4
Save Site Settings
Click Save (or the checkmark) inside the Site Settings panel. Saving here stages the change — it is not live yet.
- 5
Publish the site
Click the Publish button in the top-right corner of the Framer editor and confirm the publish. Framer deploys to its global CDN near-instantly — most sites are live within seconds.
- 6
Verify on your published URL, not the canvas
Open your published site URL in a new browser tab. Custom code does not run inside the Framer design canvas or the built-in Preview panel — those environments sandbox third-party scripts. The chatbot widget will appear only on the live published site. Confirm the bubble appears and send a test message.
- 7
Register your domain in your chatbot dashboard
Most chatbot providers scope the widget to authorized domains. In Knobot, go to Widget → Install and add your Framer site's published domain. If you are using a custom domain connected to Framer, add both the apex and www variants.
How do you embed Knobot on Framer specifically?
Knobot generates a single <script> tag — there is no Framer plugin, no marketplace listing, and no developer setup required. Knobot's Premium plan ($79/month) includes 10,000 chat messages per month with no per-conversation overages. A 100-message free preview and a 14-day trial let you test the full setup before paying.
- 1
Create a Knobot account
Sign up at knobot.org. During onboarding, create a business profile and provide your website URL. Knobot uses RAG (Voyage embeddings + Gemini Flash 2.5) to index your site content and build the initial knowledge base automatically.
- 2
Customize the widget
In the Knobot dashboard, set your primary brand color, welcome message, and which lead-capture fields to show (name, email, phone number). Configuration changes apply to the live widget automatically — you do not need to re-paste the script.
- 3
Copy the embed snippet
Navigate to Widget → Install in the Knobot dashboard and copy the script tag. It looks like this:
<script
src="https://www.knobot.org/widget.js"
data-key="YOUR_KEY"
async
></script>- 1
Paste into Framer Site Settings → End of <body>
Follow the site-wide steps above: Framer logo → Site Settings → General → Custom Code → "End of <body> tag". Paste the snippet and save.
- 2
Publish and verify
Publish the Framer site, then open the live URL in a browser. Confirm the chat bubble appears. Submit a test lead and check that it arrives in the Knobot dashboard under Conversations.
- 3
Add your domain to Knobot
In Knobot under Widget → Install, add your Framer site domain. If you later connect a custom domain or switch from a framer.website subdomain, update this field to match the new domain.
Why must you Publish before the chatbot appears?
Custom code in Framer's Site Settings is attached to the published output — the static HTML and JavaScript files that Framer pushes to its CDN when you click Publish. The Framer canvas is a design environment and the built-in Preview panel runs a sandboxed render of your frames; neither executes third-party scripts injected via Site Settings.
This is the single most common point of confusion for Framer users setting up a chatbot. If you paste the script, save, and then check the Preview panel without publishing, the widget will not appear — and it is easy to conclude incorrectly that the script is broken. The fix is always to Publish first, then verify at the live URL.
Framer publishes near-instantly to its CDN. After clicking Publish and seeing the confirmation, open your site in a fresh browser tab within a few seconds. There is no propagation delay to wait out.
How does the Framer Embed component differ from site-wide injection?
The Embed layer component in Framer's design editor accepts raw HTML, an iframe snippet, or a URL and renders that content inline at the component's position in your page layout. It is the right tool for content you want at a specific location — a YouTube embed, a Calendly booking widget inline on a page, a Google Map — but not for a floating chat bubble.
| Embed Component | Site Settings Custom Code | |
|---|---|---|
| Placement | Fixed position in page layout | Document-level (every page) |
| Use case | Maps, videos, inline forms | Floating widgets, analytics, chat |
| Requires publish to test | No — visible in canvas | Yes — publish required |
| Per-page control | Yes — drag to specific page | Site-wide only (see FAQ for workaround) |
| Correct for chatbot | No | Yes |
If you place a chat widget script inside an Embed component, the script will run inside that component's DOM subtree. Some widgets will still mount their floating bubble to document.body and appear to work, but this is not reliable behavior — and the widget may conflict with Framer's layout engine or fail on page transitions in multi-page Framer projects. Use Site Settings for chat widgets.
What should you do if the chatbot does not appear after publishing?
If you have published the Framer site and the chat widget still does not appear on the live URL, work through these causes in order.
Does Framer's hosting have a CSP that blocks third-party scripts?
Standard Framer hosting does not apply a restrictive Content Security Policy that would block chatbot scripts. CSP headers instruct the browser to refuse scripts, styles, or frames from origins not listed in the policy — a common source of frustration on platforms like certain enterprise CMSs or highly locked-down hosting environments.
Framer's default hosted sites have permissive headers for content loaded through Site Settings. Your Knobot script tag — fetching from https://www.knobot.org/widget.js — will load without any CSP modification. If you have configured a custom reverse proxy or CDN layer in front of your Framer site (uncommon for small business sites), verify that your proxy is not injecting a script-src header that excludes knobot.org.
For the vast majority of Framer users on standard hosting, SSL and CSP are not factors. All Knobot assets are served over HTTPS, so there is no mixed-content issue either.
How do you handle z-index conflicts with Framer's sticky or overlay components?
Framer's sticky navigation bars, modals, and overlay components use their own stacking context and may cover the chat bubble if their z-index is higher than the widget's default. The fix is a targeted CSS override.
Add the following CSS to your Framer project. The cleanest way to do this is to add a second snippet in Site Settings → General → Custom Code → "Start of<head> tag":
<style>
[data-knobot-widget] {
z-index: 99999 !important;
}
</style>Replace data-knobot-widget with the attribute or class selector your chatbot provider uses if you are not using Knobot. Alternatively, in Framer's design editor you can reduce the z-index of the conflicting sticky component — check its layer properties in the right panel.
Shadow DOM encapsulation (used by some widget implementations) prevents Framer's global CSS from reaching inside the widget's internal elements, but the wrapper element that the widget mounts to the document body is still targetable from outside. The CSS above targets that wrapper and will resolve most overlap issues.