On this page

Website Builders

Framer Integration

Add your Chatsby AI agent to your Framer site using custom code injection. Covers setup, verification, and troubleshooting.

Framer Integration

Framer is a modern design-to-production website builder favored by designers and startups for its fluid animations, responsive layouts, and clean publishing workflow. Adding a Chatsby AI agent to your Framer site takes just a few minutes and requires no coding beyond pasting a single script tag. This guide covers site-wide installation, page-specific embedding, publishing considerations, and troubleshooting.

Prerequisites

RequirementDetails
Framer accountA Framer project on any paid site plan (Mini, Basic, or Pro). Custom code injection in Site Settings requires a paid plan
Project editor accessYou need the ability to edit the project and its settings
Chatsby agentA trained agent set to Public with at least one data source
Embed scriptCopied from the Connect tab in your Chatsby dashboard

Framer's free plan does not support custom code injection in Site Settings. If you are on the free plan, you can use the Code Override or Embed component method described later in this guide, though some limitations may apply.

This method adds the Chatsby widget to every page on your Framer site.

Open Your Framer Project

Log in to Framer and open the project where you want to add the Chatsby widget.

Navigate to Site Settings

Click the gear icon in the top-right corner of the Framer canvas (or go to Site Settings from the project menu). Then click General in the settings sidebar.

Scroll to the Custom Code Section

Scroll down the General settings page until you find the Custom Code section. You will see two fields: one for code to be inserted in the <head> tag and one for code to be inserted at the End of <body> tag.

Paste the Chatsby Script

Paste your Chatsby embed script into the End of <body> tag field. This placement ensures the widget loads after your page content.

<!-- Chatsby AI Agent -->
<script
  src="https://chatsby.co/widget.min.js"
  bot-id="YOUR_BOT_ID"
  async
  defer
></script>

Save and Publish

Close the Site Settings panel. Click Publish in the top-right corner of the Framer editor and select your domain(s). The Chatsby widget will go live once publishing completes.

Page-Specific Installation Using an Embed Component

If you only want the widget on certain pages, you can use Framer's Embed component instead of the site-wide custom code approach.

Open the Target Page in the Framer Editor

Navigate to the page where you want the widget to appear.

Add an Embed Component

From the Insert menu (or the components panel), add an Embed element to the page. Place it at the bottom of the page layer stack. You can resize it to be as small as possible, since the Chatsby widget renders as a floating overlay.

Paste the Script in the Embed Component

Click the Embed component and paste your Chatsby embed script into its HTML field:

<script
  src="https://chatsby.co/widget.min.js"
  bot-id="YOUR_BOT_ID"
  async
  defer
></script>

Publish

Publish your site. The widget will appear only on pages that contain the Embed component.

Verifying the Installation

Visit Your Published Framer Site

After publishing, open your Framer site's URL in a new browser tab. Use an incognito window to ensure you are not seeing a cached version.

Confirm the Chat Bubble Appears

Look for the Chatsby chat bubble in the bottom corner of the page. It should float above your Framer content and be visible regardless of scroll position.

Test the Agent

Click the bubble to open the chat window. Send a test question that your agent should be able to answer based on its training data.

Navigate to Other Pages

If you used the site-wide method, visit multiple pages on your site to confirm the widget appears consistently.

The Chatsby widget will not appear in the Framer editor or its built-in preview. Custom code only executes on the published version of your site. Always verify by visiting the live URL.

Framer Staging and Custom Domains

Framer provides two URL types for published sites:

  • Framer subdomain: your-project.framer.website
  • Custom domain: www.yourbrand.com (if configured)

The Chatsby widget works on both. If you want to test on the Framer subdomain before publishing to your custom domain, publish only to the .framer.website URL first, verify, and then update your publishing settings to include the custom domain.

If your custom domain uses additional security headers (such as a Content Security Policy), ensure chatsby.co and api.chatsby.co are whitelisted.

Troubleshooting

Widget Not Appearing After Publishing

Possible CauseSolution
Site not publishedCustom code only runs on the published site, not in the editor or preview
Free planCustom code in Site Settings requires a paid Framer plan. Upgrade or use the Embed component method
Wrong code fieldEnsure the script is in the End of <body> tag field, not the <head> field. The head field works too, but body-end is recommended
Agent not PublicEnable the Public toggle on the Connect tab in your Chatsby dashboard

Publishing Delay

Framer's publishing process is usually instant, but CDN propagation can occasionally take 1--3 minutes. If the widget does not appear immediately:

  • Wait a few minutes and reload the page.
  • Clear your browser cache or test in an incognito window.
  • Verify the script is still present in Site Settings (it should persist across publish cycles).

Animations and Z-Index Conflicts

Framer sites often use complex animations and layered elements. If the chat bubble appears behind a Framer element:

  • The Chatsby widget uses a high z-index by default and should render above most content.
  • If a Framer component has an explicitly set z-index higher than the widget, adjust the component's z-index in the Framer editor to be lower.
  • Avoid placing full-screen overlay animations that run continuously, as they can intercept clicks intended for the chat bubble.

Interactions With Framer's Page Transitions

Framer supports smooth page transitions. The Chatsby widget, when installed via Site Settings custom code, persists across page navigations and is not affected by Framer's transition animations. If you used the Embed component method, the widget may briefly disappear during page transitions and re-initialize on the new page. For the smoothest experience, the site-wide custom code method is recommended.

Performance

The Chatsby widget script is lightweight (under 50 KB gzipped) and loads with async and defer attributes. It does not block Framer's page rendering, interfere with animations, or affect Core Web Vitals scores. The widget communicates with Chatsby's API over HTTPS and does not require any server-side resources from your Framer hosting.

WixShopify