Adding the widget to Framer

If you’re building your marketing site with Framer, you can easily integrate your Fernand support widget so visitors can chat with your team directly from your site. With code ovverides, it's also possible to open, close or toggle the visibility of the widget from a link in your Framer site. Here’s how to set it up.

Add the widget script

First, make sure the Fernand widget script is embedded in your site. In Framer, open your project settings, go to the Code tab, and paste your Fernand snippet in the Custom code → End of <body> tag section.

You can find your snippet in Fernand at Settings → Chat

Create a code override

To control the widget (open, close, or toggle) from buttons inside Framer, create a new code file in your Framer project called FernandOverrides.tsx and paste the following code:

// FernandOverrides.tsx
import type { Override } from "framer"

function getFernand(): ((...args: any[]) => void) | null {
    const w = window as any
    return typeof w !== "undefined" && typeof w.Fernand === "function"
        ? w.Fernand
        : null
}

/** Attach to a button to OPEN the widget */
export function FernandOpen(): Override {
    return {
        onTap() {
            const Fernand = getFernand()
            if (!Fernand) return console.warn("Fernand widget not loaded yet.")
            Fernand("open")
            ;(window as any).__fernandOpen = true
        },
    }
}

/** Attach to a button to CLOSE the widget */
export function FernandClose(): Override {
    return {
        onTap() {
            const Fernand = getFernand()
            if (!Fernand) return console.warn("Fernand widget not loaded yet.")
            Fernand("close")
            ;(window as any).__fernandOpen = false
        },
    }
}

/** Attach to a button to TOGGLE (open if closed, close if open) */
export function FernandToggle(): Override {
    return {
        onTap() {
            const Fernand = getFernand()
            if (!Fernand) return console.warn("Fernand widget not loaded yet.")
            const isOpen = (window as any).__fernandOpen === true
            if (isOpen) {
                Fernand("close")
            } else {
                Fernand("open")
            }
            ;(window as any).__fernandOpen = !isOpen
        },
    }
}

Connect a button

Once your overrides are ready, select any button in Framer, open the Code panel on the right, and choose one of the functions:

  • FernandOpen – opens the widget

  • FernandClose – closes the widget

  • FernandToggle – toggles the widget open or closed

Troubleshooting

If you see "Fernand widget not loaded yet." in your console, double-check that the Fernand widget script is properly embedded in your Framer site and loads before you try to trigger it. Once loaded, the override will work immediately.

The widget may not appear inside Framer’s built-in preview. To see it live, publish your site and open it in a new tab.

Was this helpful?