QuackChat on Webflow

Add the QuackChat widget to your Webflow site using custom code settings.

Quick Start (TL;DR)

Go to your Webflow Dashboard and open your site's Settings
Paste the widget code in Custom Code > Footer Code
Publish your site

Prerequisites

Webflow site with a paid plan (Basic or above)
Bot ID from your QuackChat dashboard

Step-by-Step Installation

Option A: Site-Wide via Settings (Recommended)

This adds the widget to all pages on your site.

Go to your Webflow Dashboard where all your sites are listed
Find the site you want and click the three dots (⋯) on the site card
In the dropdown menu, click Settings
Inside Settings, open the Custom Code tab
Scroll down to the Footer Code section and paste:

html

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>

Click Save Changes
Go back to your site and click Publish
Select the domains you want to publish to and confirm

Option B: Page-Specific Code

To add the widget to specific pages only:

Open the page in the Designer
Click the gear icon next to the page name (Page Settings)
Scroll to Custom Code
In the Before </body> tag section, paste the widget code
Save and publish

Verification

Quick test:

Publish your site
Open your live website
Hard refresh the page with Ctrl + Shift + R (or Cmd + Shift + R on Mac)
Look for the chat bubble in the bottom-right corner
Click to open and send a test message
Check a few different pages to confirm the chatbot appears site-wide

Important: The widget won't appear in the Webflow Designer preview. You must publish to test.

Troubleshooting

Widget doesn't appear in Designer

Cause: Custom code doesn't run in the Webflow Designer.

Solution: This is expected. Publish your site and view the live version.

Widget not showing after publish

Cause: Publishing may take a moment to propagate.

Solution:

Wait 1-2 minutes after publishing
Clear browser cache or use incognito mode
Check the published URL (not the webflow.io staging URL if using custom domain)

Z-index issues with Webflow navbars

Cause: Webflow navbars often have high z-index values.

Solution: The widget's default z-index (2147483000) already exceeds most site elements. If you still see conflicts, check for elements using near-max z-index values and adjust with data-z-index.

Performance

Widget loads asynchronously (won't affect Webflow's page speed)
No impact on your Webflow site's performance metrics
~12KB gzipped bundle

Known Limitations

Custom code doesn't render in the Designer preview
Must publish to see the widget
CMS pages all share the same custom code (use JavaScript conditionals for variation)

Webflow Integration Guide