Webflow Integration
Add your Chatsby AI agent to any Webflow site. Covers site-wide and page-specific embedding, custom domains, and troubleshooting.
Webflow Integration
Webflow gives designers and developers pixel-perfect control over their websites, and adding a Chatsby AI agent enhances that experience with intelligent, always-available customer support. Because Webflow provides built-in custom code injection at both the site level and the page level, the integration process is straightforward and requires no external plugins or third-party tools. This guide covers site-wide embedding, page-specific deployment, custom domain considerations, and common troubleshooting scenarios.
Prerequisites
| Requirement | Details |
|---|---|
| Webflow account | Any paid Webflow site plan (custom code injection is not available on the free Starter plan for site-level settings) |
| Site editor access | You need the ability to edit Site Settings or page settings |
| Chatsby agent | A trained agent set to Public with at least one data source |
| Embed script | Copied from the Connect tab in your Chatsby dashboard |
Webflow's free plan does allow custom code in Embed elements on individual pages, but site-wide custom code injection in Site Settings requires a paid site plan.
Site-Wide Installation (Recommended)
This method adds the Chatsby widget to every page on your Webflow site with a single configuration step.
Open Webflow Site Settings
Log in to your Webflow dashboard. Select your site, then click the gear icon or navigate to Site Settings from the site's dropdown menu.
Navigate to the Custom Code Tab
In Site Settings, click the Custom Code tab. You will see two sections: Head Code and Footer Code.
Paste the Chatsby Script in Footer Code
Paste your Chatsby embed script into the Footer Code section. Placing it in the footer ensures the widget loads after your page content, which is optimal for performance.
<!-- Chatsby AI Agent -->
<script
src="https://chatsby.co/widget.min.js"
bot-id="YOUR_BOT_ID"
async
defer
></script>Save Changes
Click Save Changes at the bottom of the Custom Code tab.
Publish Your Site
Return to the Webflow Designer or your site dashboard and click Publish. Select your domain(s) and confirm. The Chatsby widget will not appear on your live site until you publish.
In Webflow, saving Site Settings does not automatically publish changes. You must explicitly publish your site for the embed script to go live. This is the most common reason the widget does not appear after setup.
Page-Specific Installation
If you only want the Chatsby widget on certain pages (for example, a help center or pricing page), use Webflow's Embed element instead of the site-wide custom code.
Open the Webflow Designer
Open your project in the Webflow Designer and navigate to the page where you want the widget to appear.
Add an Embed Element
In the Elements panel (the plus icon on the left), scroll to Components and drag an Embed element onto the page. Place it at the bottom of the page body or inside a hidden section, since the widget renders as a floating overlay regardless of where the element is placed.
Paste the Script
In the Embed code editor that appears, paste your Chatsby embed script and click Save & Close.
<script
src="https://chatsby.co/widget.min.js"
bot-id="YOUR_BOT_ID"
async
defer
></script>Publish the Page
Publish your site to make the changes live. The widget will only appear on pages that contain the Embed element.
Verifying the Installation
Open Your Published Site
After publishing, visit your live Webflow site URL in a new browser tab. Use an incognito window to avoid cached content.
Confirm the Chat Bubble
Look for the Chatsby chat bubble in the bottom corner of the page. It should float above your Webflow content without interfering with your layout.
Test the Agent
Click the bubble, send a test message, and verify the agent responds correctly based on your training data.
Check Multiple Pages
If you used the site-wide method, navigate to several different pages to confirm the widget appears consistently across your entire site.
Custom Domain and DNS Considerations
If your Webflow site uses a custom domain (e.g., www.yourbrand.com), the Chatsby widget works without any additional DNS or domain configuration. The embed script communicates with Chatsby's servers directly over HTTPS, regardless of your domain setup.
However, if you use a Content Security Policy (CSP) header on your custom domain (common with enterprise deployments or reverse proxy setups), you need to whitelist the following domains:
script-src: https://chatsby.co
connect-src: https://api.chatsby.co
Without these CSP exceptions, the browser may silently block the widget script from loading or prevent it from communicating with the Chatsby API.
Troubleshooting
Widget Not Appearing After Setup
| Possible Cause | Solution |
|---|---|
| Site not published | Click Publish in the Webflow Designer --- saving Site Settings alone does not deploy changes |
| Free plan limitations | Site-wide custom code requires a paid Webflow site plan. Use the Embed element method as an alternative |
| Agent not set to Public | Enable the Public toggle on the Connect tab in the Chatsby dashboard |
| Browser cache | Hard-refresh (Ctrl+Shift+R) or use an incognito window |
| CDN propagation delay | After publishing, wait 1--2 minutes for Webflow's CDN to propagate the update |
Widget Overlaps Webflow Elements
If the chat bubble overlaps a fixed footer, cookie banner, or other floating element on your Webflow site:
- Adjust the position of your overlapping element by adding bottom padding or margin.
- Customize the widget position (bottom-left vs. bottom-right) in the Settings > Chat Interface section of your Chatsby dashboard.
- Use CSS in Webflow's custom code to adjust the z-index if needed.
Webflow Staging vs. Production
Webflow provides a staging URL (your-project.webflow.io) and your custom production domain. The Chatsby widget will appear on both after publishing. If you want to test on staging before going live on your production domain, publish only to the .webflow.io domain first, verify the widget, and then publish to your custom domain.
Performance
The Chatsby widget script loads asynchronously and does not block Webflow's page rendering. With async and defer attributes, it has zero impact on your Webflow Lighthouse performance scores. The widget bundle is under 50 KB gzipped and is served from a global CDN, ensuring fast load times for visitors anywhere in the world.