QuackChat on Framer

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

Quick Start (TL;DR)

Go to Site Settings > General > Custom Code
Paste the widget code in End of <body> tag
Publish

Prerequisites

Framer account
Bot ID from your QuackChat dashboard

Step-by-Step Installation

Option A: Site Settings (Recommended)

This adds the widget to all pages.

Open your Framer project
Click the gear icon (Site Settings) in the top-right
Go to General
Scroll to Custom Code
In the End of <body> tag section, paste:

html

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

Click Save
Publish your site

Option B: Code Override (Advanced)

For developers using Framer's code overrides:

tsx

// overrides.tsx
import { useEffect } from "react"

export function withQuackChat(Component: any) {
    return (props: any) => {
        useEffect(() => {
            const script = document.createElement("script")
            script.src = "https://www.quackchat.app/widget/quackchat-widget.js"
            script.dataset.botId = "YOUR_BOT_ID"
            document.body.appendChild(script)

            return () => {
                if ((window as any).QuackChatWidget) {
                    (window as any).QuackChatWidget.destroy()
                }
                document.body.removeChild(script)
            }
        }, [])

        return <Component {...props} />
    }
}

Verification

Quick test:

Publish your Framer site
Visit the live URL (custom code doesn't run in preview)
Look for the chat bubble
Test sending a message

Note: The widget won't appear in Framer's canvas preview.

Troubleshooting

Widget doesn't appear in canvas

Cause: Custom code only runs on published sites.

Solution: Publish and view the live site.

Widget conflicts with Framer overlays

Cause: Z-index issues with Framer modals or overlays.

Solution: The widget's default z-index (2147483000) handles most conflicts automatically. If issues persist, verify no Framer elements use near-max z-index values.

Known Limitations

No canvas preview for custom code
Must publish to test changes
Code overrides require some React knowledge

Framer Integration Guide