The 60-second Framer chatbot path
Framer has a single canonical install path for third-party scripts: Site Settings, General, Custom Code, End of Body. Once you're on a paid Framer plan (Basic at $10/mo annual or above) and inside the Custom Code panel, the install takes about 60 seconds.
The chatbot snippet is one line:
<script async src="https://chatraj.com/widget.js" data-bot-id="YOUR_BOT_ID"></script>
Inside your Framer project, click the gear icon (Site Settings) in the top toolbar. Go to General, then scroll to Custom Code. Paste the script tag into the End of Body field. Hit Publish (top-right). The chatbot bubble now appears in the bottom-right corner of every page of your Framer site within seconds.
That's the whole integration. No Framer marketplace plugin to install, no permission scope to grant, no Custom Code component to wire up per page. The widget loads asynchronously after your page renders, never blocks Largest Contentful Paint, and shows up on every page that includes your site's published footer (which is every page, by default).
Why End of Body, not Start of Head
Framer's Custom Code panel exposes two slots: Start of Head and End of Body. For the chatbot loader, End of Body is the correct placement.
The End of Body slot injects code right before the closing body tag, after all your page content has rendered. The Start of Head slot injects code into the document head, before the body. For the chatbot loader specifically:
- End of Body (recommended): the async loader runs after the page is interactive, so the chatbot bubble appears 1-2 seconds after the page loads with zero impact on First Contentful Paint or Largest Contentful Paint.
- Start of Head (not recommended): the async attribute still prevents render-blocking, but the loader is competing for browser resources during the initial paint window. Slightly less optimal, no real upside.
Use End of Body. The convention for chat widgets is body-end placement, and Framer's Custom Code panel makes that the path of least resistance.
Site-wide vs page-level: which to pick
Framer gives you two ways to add custom code, depending on whether you want the chatbot on every page or only on specific pages:
Option A: Site Settings Custom Code (recommended, site-wide bubble). The path above. The script runs on every page of your Framer site. This is the standard pattern for embedded chat widgets and what we recommend.
Option B: Custom Code component on a specific page. Open a page in the Framer canvas, insert the Custom Code component (Insert menu, Components, Custom Code), paste the script tag. The widget only loads on pages where the component is present. Useful for niche cases (you only want the bot on your Pricing page) but overkill for site-wide installs.
Most operators use Option A. Use Option B if you have a specific reason to scope the bot to one page.
Will it work on my Framer template?
Yes. ChatRaj's widget is an iframe rendered above all your site content via z-index 2147483647 (the maximum 32-bit signed integer, so no other element on the page can sit on top of it accidentally). It does not import any CSS into your Framer site, does not add classes to your body element, and does not load fonts that conflict with your Framer design system.
We've verified the script on Framer's most-installed templates (across the Personal, Startup, SaaS, Agency, Portfolio, and Restaurant categories) and on the latest Framer Sites starter projects. The widget renders correctly above Framer Smart Components, scroll-triggered Framer Motion animations, sticky navigation bars, full-bleed image sections, and the Framer Overlay component.
The only conflicts we've seen are a handful of custom-coded Framer sites with full-screen overlays that override z-index aggressively (unusual; most Framer designers don't touch z-index at root level). The fix is a one-line CSS override added via Site Settings, Custom Code, Start of Head as a style tag: <style>#chatraj-iframe { z-index: 2147483647 !important; }</style>. If you hit this, ping support.
Compatibility with Framer Motion animations
Framer's flagship feature is its tight integration with Framer Motion for scroll-triggered animations, parallax effects, sticky scroll reveal, and component-level interactions. None of these interact with the chatbot widget.
The widget renders inside an iframe with its own document context, so:
- Framer Motion scroll handlers run on your main page and do not see or interact with the iframe.
- Component-level interaction states (hover, tap, drag) work normally on your site; the chatbot iframe is a separate element above all of them.
- Page transitions between Framer routes do not unmount the chatbot bubble. The widget mounts once on initial page load and persists across client-side route changes.
- Variants and gestures in Framer Motion do not affect the chatbot's open/close transitions, which are CSS-only and run inside the iframe.
In short: heavy Framer Motion sites stay smooth, the chatbot stays on top, and the two layers don't fight for the main thread.
Training on Framer CMS Collections
If your Framer site uses CMS Collections (blog posts, case studies, team members, products), ChatRaj indexes every published CMS item alongside your static pages. When you add your Framer site as a source, the crawler reads your published sitemap (Framer auto-generates one) and walks every CMS Collection page individually.
This matters more on Framer than on most platforms because Framer encourages CMS-driven content for anything that scales (blog post per post, case study per case study, FAQ per FAQ). The bot picks up all of those automatically without you having to point at individual URLs. If you publish a new case study in Framer, hit Publish, and refresh the source in the ChatRaj dashboard, the bot can answer questions about that case study within minutes.
Hidden or draft CMS items are not crawled. The bot only sees what's published to the live site.
For teams that use Framer's staging environment (available on the Pro plan and above), point ChatRaj at your production custom domain rather than your staging URL. Staging URLs are typically password-protected or non-indexed, and the crawler cannot read content behind authentication. Publish to production once you're ready, then add or refresh the source in the ChatRaj dashboard so the new content rolls into the bot's knowledge base.
Lead capture for designer-built Framer sites
Framer sites tend to be marketing-heavy: agency portfolios, SaaS product pages, indie hacker landing pages, design-studio showcases. The two ChatRaj features that map most naturally:
Lead capture from visitor questions. When a visitor asks a question and doesn't take the obvious CTA (book a call, sign up, request a quote), the bot can offer to take their email and follow up. The captured emails flow to a CSV export or a webhook of your choice. For Framer agency sites specifically, the webhook flow into a CRM (Attio, HubSpot, Pipedrive) is the typical pattern.
Unanswered-question analytics. Every question the bot couldn't answer from your Framer content gets surfaced in the ChatRaj dashboard's Unanswered tab. For a marketing-heavy site, this is a free editorial backlog: every unanswered question is a content gap on your site (a feature you didn't document, a pricing FAQ you didn't anticipate). Most Framer operators find 3-10 high-signal content gaps per month this way.
For Framer sites running Framer Forms (the native form-builder), captured ChatRaj leads complement rather than replace your existing form submissions. Visitors who interact with the bot but don't fill out a form are exactly the segment ChatRaj catches.
Multi-language sites via Framer Localization
Framer launched Localization in 2024 as a native multi-language feature on the Pro plan and above. If you've enabled Framer Localization on your site, ChatRaj auto-detects the visitor's language from their first message and replies in the same language. No configuration needed. Hindi, Spanish, Japanese, German, Portuguese, Mandarin, French, Italian, Arabic, and 90+ other languages are supported out of the box.
For locale-specific answers, the bot reads the language variant of each page the visitor is browsing. A visitor on your German localized page gets answers in German based on the German-localized content. The bot's training crawl indexes each language variant separately during ingestion.
If your audience is mono-lingual (for example, a France-only Framer site), you can set a per-bot Force response language in Settings so the bot always replies in French regardless of what the visitor types. That setting overrides the auto-detect rule and is useful when you want a consistent UX even if a curious tester types English at your France-first site.
GDPR + cookie consent
ChatRaj never trains models on your visitors' chat logs and never shares visitor data across customers. Each bot is fully isolated by chatbot_id; the only data we store about visitors is a random visitor_id cookie (used to give conversation continuity across page loads) and the messages they send.
For GDPR compliance on EU traffic, ChatRaj signs a Data Processing Agreement (DPA) with every paid customer. Visitor consent for the chat widget should fold into your Framer site's existing cookie consent flow. Framer does not ship a built-in cookie consent banner; most operators add one via Custom Code (Cookiebot, Iubenda, OneTrust) or via a Framer Code Component. Either path can be configured to delay the ChatRaj script until consent is granted.
For stricter consent flows, ChatRaj's widget loader honors a window-level flag (window.chatrajConsent = true) so you can keep the bot hidden until your consent layer fires.
When you should NOT use ChatRaj on Framer
A few honest signals that ChatRaj might not be the right fit for your Framer site:
- You're on the free Framer plan. Custom code is blocked on free, so no third-party chatbot can be installed. You'll need to upgrade to Basic ($10/mo annual) or above first.
- Your Framer site has fewer than 50 visits per month. At that volume the chatbot's value is hard to justify against your setup time. Focus on driving traffic first via SEO, social, or partnerships.
- You need the chatbot to trigger Framer Motion animations on your page or modify Framer components in real time. ChatRaj is content-grounded and stays inside its iframe; it does not poke at your main page's component tree.
For everyone else, especially designer-led teams that already use Framer for the speed of its design-to-publish loop: the 60-second chatbot install matches that same speed, and the free ChatRaj tier is enough to confirm whether the bot's answers from your Framer content are good enough before you spend a dollar.