Why Framer Sites Need a Chat Widget
Framer sites are built for speed and aesthetics. They load fast, look sharp, and convert well—but they’re typically static marketing pages, landing pages, or portfolio sites. That means there’s no built-in way for visitors to ask questions, request demos, or get support without leaving the page.
A live chat widget solves this. It sits in the corner of every page and lets visitors start a conversation instantly. With an AI-powered option like Oscar Chat, you can answer common questions automatically—even when you’re offline—while still routing complex queries to a human agent.
Here’s what a chat widget adds to a typical Framer site:
- Lead capture – Collect emails and phone numbers from interested visitors before they bounce.
- Instant support – Answer pricing, shipping, and product questions in real time.
- 24/7 availability – AI handles conversations outside business hours.
- Higher conversion rates – Visitors who chat are significantly more likely to convert than those who don’t.
- Reduced support load – Deflect repetitive queries so your team focuses on high-value conversations.
Oscar Chat vs. Other Chat Widgets for Framer
Before we get into the setup, it helps to understand why Oscar Chat is a strong fit for Framer specifically. Many chat tools were built for WordPress or Shopify and treat other platforms as an afterthought. Oscar Chat works via a lightweight JavaScript snippet that’s compatible with any website—including Framer’s custom code injection system.
| Feature | Oscar Chat | Tidio | Crisp | Intercom |
|---|---|---|---|---|
| Framer-compatible snippet | ✓ | ✓ | ✓ | ✓ |
| AI chatbot included | ✓ (all plans) | Paid add-on | Limited | ✓ (expensive) |
| Free plan available | ✓ | ✓ | ✓ | ✗ |
| WhatsApp integration | ✓ | ✓ | ✓ | ✓ |
| Setup time on Framer | ~3 minutes | ~5 minutes | ~5 minutes | ~10 minutes |
| Pricing (starting) | Free / $19 mo | Free / $29 mo | Free / $25 mo | $39 mo |
| Page-load impact | Minimal (async) | Moderate | Moderate | Heavy |
If you’re weighing alternatives, we’ve covered detailed comparisons in our Tidio alternatives, Crisp alternatives, and Intercom alternatives guides.
What You’ll Need Before You Start
The setup is quick, but make sure you have these ready:
- A Framer site on a paid plan – Framer’s free plan does not support custom code injection. You’ll need at least the Mini plan (or higher) to add third-party scripts.
- An Oscar Chat account – Sign up here. Every new account gets a 7-day Pro trial, so you can test AI features immediately.
- Your Oscar Chat widget code – You’ll grab this from your Oscar Chat dashboard after creating your account.
Step-by-Step: Adding Oscar Chat to Framer
Step 1: Create Your Oscar Chat Account and Get the Widget Code
Head to app.oscarchat.ai and create your account. Once you’re in the dashboard:
- Navigate to Settings → Installation.
- Copy the JavaScript embed snippet. It looks something like this:
<script src="https://widget.oscarchat.ai/widget.js"
data-widget-id="YOUR_WIDGET_ID"
async>
</script>Keep this snippet handy—you’ll paste it into Framer in the next step.
Step 2: Open Your Framer Project Settings
In the Framer editor, click the gear icon in the top-left corner or go to Site Settings. This is where Framer lets you inject custom code into your site’s <head> or <body> tags.
Step 3: Paste the Code into Custom Code
Inside Site Settings, find the Custom Code section. You’ll see two fields:
- Start of <head> tag
- End of <body> tag
Paste the Oscar Chat snippet into the End of <body> tag field. This ensures the chat widget loads after the rest of your page content, keeping your site fast.
Step 4: Publish Your Site
Click Publish in the top-right corner of the Framer editor. The custom code only takes effect on the published version of your site—not in the Framer editor preview. Once published, visit your live site and you should see the Oscar Chat widget in the bottom-right corner.
Step 5: Test the Widget
Open your published Framer site in a browser (or an incognito window to simulate a new visitor). Click the chat bubble and send a test message. If you’ve configured the AI chatbot in your Oscar Chat dashboard, it should respond automatically.
Check these things during testing:
- The widget loads on all pages (not just the homepage).
- The chat bubble doesn’t overlap important UI elements.
- Messages are being received in your Oscar Chat inbox.
- The AI assistant responds accurately based on your training data.
Configuring Oscar Chat for Your Framer Site
Once the widget is live, you’ll want to configure it for your specific use case. Here’s what to set up in the Oscar Chat dashboard:
Train the AI on Your Content
Oscar Chat’s AI chatbot can be trained on your website content, FAQs, product documentation, and custom knowledge base articles. This means it can answer visitor questions accurately without you writing a single chatbot flow.
In the dashboard, go to AI Training and add your Framer site URL. Oscar Chat will crawl your pages and use the content to generate responses. You can also upload PDFs, paste text, or add specific Q&A pairs for topics the AI should handle.
Customize the Widget Appearance
Match the chat widget to your Framer site’s design. In Oscar Chat settings, you can adjust:
- Brand color – Match your Framer site’s primary accent color.
- Widget position – Bottom-right is standard, but you can switch to bottom-left.
- Welcome message – Set a greeting that fits your brand voice.
- Launcher icon – Choose between chat bubble styles or upload a custom avatar.
- Operating hours – Show different messages when your team is online vs. offline.
Set Up Lead Capture
If your Framer site is a landing page or portfolio, capturing leads is probably the main goal. Configure Oscar Chat to ask for a visitor’s name and email before starting a conversation—or after the AI has answered their first question. This way you build your contact list without adding a separate form to your Framer page.
Adding Chat to Specific Framer Pages Only
By default, Framer’s Site Settings code injection applies the script to every page. But what if you only want the chat widget on your pricing page or contact page?
Framer supports per-page custom code as well. Instead of adding the snippet in Site Settings:
- Select the specific page in the Framer editor’s page list.
- Open that page’s settings (click the gear icon next to the page name).
- Find the Custom Code section for that specific page.
- Paste the Oscar Chat snippet there instead.
This gives you granular control. For example, you might show the chat widget on your pricing and contact pages but leave it off your blog or portfolio gallery.
Live Chat vs. AI Chatbot: Which Mode for Your Framer Site?
Oscar Chat supports both live chat and AI chatbot modes—and you can use them together. Here’s how to decide:
| Scenario | Best Mode | Why |
|---|---|---|
| Portfolio / personal site | AI chatbot only | You’re not online 24/7; let the AI handle inquiries |
| SaaS landing page | AI + live chat | AI qualifies leads, humans close deals |
| Agency site | AI + live chat | AI answers FAQs, routes project inquiries to the team |
| Ecommerce (Framer + Shopify) | AI chatbot + live chat | Handle order questions automatically, escalate complex issues |
| Event or waitlist page | AI chatbot only | Capture signups and answer event details on autopilot |
For most Framer sites, the hybrid approach works best: let the AI handle first-contact questions and route anything it can’t answer to your team. This is especially useful if you’re a small team or solo founder.
Troubleshooting Common Issues
Most setups go smoothly, but here are the issues we see occasionally:
Widget Not Appearing After Publish
- Clear your browser cache or open the site in incognito. Framer’s CDN can cache older versions.
- Check that you’re on a paid Framer plan. Free plans strip out custom code.
- Verify the snippet is in the correct field. It should be in “End of <body> tag,” not “Start of <head> tag.”
Widget Overlaps a Fixed Footer or CTA Button
Some Framer templates have sticky footers or floating CTA buttons. If the Oscar Chat bubble overlaps, you can adjust the widget’s position offset in the Oscar Chat dashboard settings, or add a small CSS override in Framer’s custom code to push the widget up:
<style>
#oscar-chat-widget {
bottom: 80px !important;
}
</style>Widget Loads Slowly on Mobile
Oscar Chat’s script loads asynchronously, so it shouldn’t block your page render. If you notice slowness, make sure you haven’t added the script to the <head> section (which forces it to load before the page renders). Always use the <body> injection point.
Advanced: Using Oscar Chat with Framer’s CMS
If you’re using Framer’s CMS feature for blog posts or dynamic content pages, the good news is that the Site Settings code injection applies globally—including CMS-generated pages. You don’t need to do anything extra. Every page your CMS generates will automatically include the Oscar Chat widget.
This is particularly useful for content-heavy Framer sites where visitors land on blog posts from search engines and need a way to ask follow-up questions or get in touch.
Oscar Chat Pricing for Framer Users
Oscar Chat offers plans that work well for the typical Framer user—whether you’re a freelancer with a portfolio site or a startup with a marketing page.
| Plan | Price | Best For | Key Features |
|---|---|---|---|
| Free | $0/mo | Personal sites, testing | Live chat, basic customization |
| Pro | $19/mo | Startups, freelancers | AI chatbot, lead capture, integrations |
| Business | $49/mo | Growing teams, agencies | Multiple agents, advanced AI, priority support |
Every new account starts with a 7-day Pro trial, so you can test the full AI chatbot experience on your Framer site before committing. Explore free live chat software options if you want to compare before deciding.
Tips for Getting the Most Out of Chat on Framer
- Set a proactive greeting. Don’t wait for visitors to click the bubble. Configure a timed pop-up message like “Hey! Got questions about our services?” after 10 seconds on the page.
- Use the AI training feature. Upload your most common client questions. The more context the AI has, the better it performs.
- Connect WhatsApp. If your audience prefers WhatsApp, Oscar Chat can bridge conversations across channels from a single inbox.
- Track conversions. Use the Oscar Chat dashboard to see which pages generate the most conversations and leads.
- A/B test your welcome message. Try different greetings and see which one generates more engagement.
Frequently Asked Questions
Can I add Oscar Chat to a Framer site on the free plan?
No. Framer’s free plan does not support custom code injection, which is required to embed the Oscar Chat widget. You need at least a paid Framer plan (Mini or above) to add any third-party scripts.
How long does it take to install Oscar Chat on Framer?
About 3 minutes. You copy the widget snippet from your Oscar Chat dashboard, paste it into Framer’s Site Settings under Custom Code, and publish your site. The widget appears immediately on the live version.
Will Oscar Chat slow down my Framer website?
No. The Oscar Chat script loads asynchronously, meaning it doesn’t block your page from rendering. Your Framer site’s performance scores (Core Web Vitals, Lighthouse) should remain unaffected.
Can I show the chat widget on specific Framer pages only?
Yes. Instead of adding the snippet in the global Site Settings, you can paste it into the Custom Code section of individual page settings in Framer. This lets you control exactly which pages display the widget.
Does Oscar Chat work with Framer’s CMS pages?
Yes. When you add the Oscar Chat snippet via Framer’s Site Settings (global custom code), it applies to all pages—including dynamically generated CMS pages like blog posts or product listings.
Can the AI chatbot answer questions about my Framer site’s content?
Yes. Oscar Chat’s AI can be trained on your website content by crawling your site URL. It learns from your pages, FAQs, and any additional documents you upload, then uses that knowledge to answer visitor questions accurately.
Is Oscar Chat free to use on a Framer website?
Oscar Chat has a free plan that includes live chat basics. For AI chatbot features, you’ll need the Pro plan ($19/mo), but every new account gets a 7-day Pro trial at no cost.
Can I customize the Oscar Chat widget to match my Framer site’s design?
Absolutely. You can change the widget’s brand color, position, launcher icon, welcome message, and more from the Oscar Chat dashboard. If you need additional CSS tweaks, you can add custom styles in Framer’s code injection.
Does Oscar Chat support WhatsApp on Framer sites?
Yes. Oscar Chat integrates with WhatsApp, letting visitors start conversations from the chat widget and continue them on WhatsApp—or vice versa. All messages flow into a single inbox in the Oscar Chat dashboard.
What happens to chat conversations if I redesign my Framer site?
Your chat history and settings live in your Oscar Chat account, not in Framer. If you redesign or rebuild your Framer site, just re-add the same widget snippet to the new site’s custom code and all your previous conversations, AI training, and configurations carry over.
