How to Embed an AI Chat Widget on Framer

Framer sites move fast—your support should too. Embed Chirps via Site Settings → Custom Code without rebuilding your layout or adding another SaaS dashboard inside Framer.

Ideal for SaaS marketing sites, agencies, and portfolios where visitors ask about pricing, process, and availability.

Real founder scenario: design-led SaaS on Framer

Nina shipped her analytics startup's marketing site on Framer with CMS-driven pricing and changelog pages. Investors and users asked repeat questions in email. She crawled her Framer production URL, pasted Chirps at end of body, matched the widget accent to Framer variables, and added changelog-aware starter prompts. Support volume dropped 30% in the first month without hiring.

Why embed vs Framer plugins or external helpdesk only

• Framer has no native RAG chat—you would bolt on Intercom or similar separately.
• Helpdesk-only means visitors leave the beautiful Framer experience to find answers.
• One embed preserves Framer animations and layout; the bubble floats above your design system.
• CMS pages crawl like any URL—stable slugs keep knowledge accurate.

Chirps setup for Framer

1. Create an assistant with product positioning in system instructions.
2. Crawl your Framer `.framer.website` or custom domain—add `/pricing`, `/changelog`, `/docs` if separate.
3. Customize widget to match Framer brand colors and corner radius aesthetic.
4. Copy embed snippet.
5. Optional: voice for demo-heavy SaaS sites.
6. Optional: dispatch to Slack #sales when chat mentions “SOC 2,” “annual contract,” or “security questionnaire.”

Embed on Framer (exact path)

Framer CMS tips

Keep collection slugs stable—`/pricing/startup` changes break crawl mappings until you re-index. Use starter prompts pointing to top CMS collections: pricing tiers, feature comparison, changelog highlights.

Test these 5 questions before launch

1. What problem does [product] solve for [persona]?
2. What are your pricing tiers and what is included in each?
3. What shipped recently—any breaking changes in the changelog?
4. Do you offer a free trial and how long is it?
5. How do I reach the team for a security or procurement review?

Troubleshooting

Widget not showing on Framer

Custom code applies only after publish to production. Canvas preview may not load third-party scripts—always test the published URL. If using a custom domain, confirm DNS points to Framer and SSL is active. Check for duplicate custom code blocks that might strip earlier snippets.

Crawl missing Framer CMS pages

Unlinked CMS items may not appear in crawl—ensure they are in nav or sitemap. Password-protected Framer pages need manual doc upload. After large CMS imports, trigger full re-crawl. Localization: crawl each locale path if you ship multi-language sites.