Integration Guides
Framer
Add Rybbit analytics to your Framer site
Framer has a Custom Code section in the site settings that injects HTML into the <head> of every published page.
Get your tracking snippet
In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.
Add the snippet to Framer
- Open your Framer project and go to Site Settings → General.
- Scroll to Custom Code.
- Paste the snippet into the Start of
<head>tag field (End of<head>works too). - Click Save, then Publish. Custom code only reaches the live site on publish.
Verify installation
Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.
If nothing shows up:
- View the page source and search for
script.js?siteId=to confirm the snippet is on the page. - Open the browser Network tab and check that
script.jsreturns200and thatPOSTrequests go to/api/track. - Disable ad blockers, or set up a proxy so the script loads from your own domain.
- See the script troubleshooting guide for other common causes.
Track custom events
Use a Code Override to send events from any element in the canvas.
- Select the element, open Overrides in the properties panel, and click + File to create an override file such as
RybbitOverrides.tsx. - Add an override that wraps the element's click handler:
// RybbitOverrides.tsx
import type { ComponentType } from "react";
export function withRybbitClick(Component: ComponentType): ComponentType {
return (props) => {
const handleClick = () => {
window.rybbit?.event("cta_click", { label: props.text ?? "cta" });
props.onClick?.();
};
return <Component {...props} onClick={handleClick} />;
};
}- Back in the properties panel, pick the file and apply
withRybbitClickto the element.
The same window.rybbit.event() call works inside a Code Component.
Troubleshooting
- Navigation between pages is not tracked: Framer sites navigate client-side and the script detects those URL changes. If a view changes without the URL changing, call
window.rybbit.pageview()from an override when it appears.
Next steps
- Track custom events such as signups, purchases and button clicks.
- Identify users to connect sessions to accounts.
- Proxy the script through your own domain to bypass ad blockers.
- Script attributes let you skip or mask URLs and tag events.