Install GetFluxly on Framer
Drop a single <script> into Framer's site settings to enable autocapture across every page. Events flow into your GetFluxly project tagged with context.install_source = "framer".
What you need
- A GetFluxly project (sign up at getfluxly.com).
- A Framer site you can edit. Custom code is available on the Pro and Free plans both, on the published domain.
- The site must be published. Framer's preview URLs (
*.framer.app/preview) don't run custom code in the same way.
Steps
1. Get the snippet
In the GetFluxly dashboard, open Settings, Install. Switch to the Framer tab. The snippet is prefilled with your project's first active publishable key, the canonical API host, and data-source="framer":
<script
src="https://cdn.jsdelivr.net/npm/@getfluxly/browser@0.5.0/dist/gflux.iife.js"
data-project="gflux_pub_yourkey"
data-host="https://api.getfluxly.com"
data-source="framer"
crossorigin="anonymous"
></script>
Click Copy.
2. Paste into Framer
- Open the Framer project, then Site Settings.
- General, Custom Code section.
- Scroll to End of
<body>tag. - Paste the snippet.
- Save.
3. Publish
Framer requires a publish for custom code to take effect. Publish, choose the production domain.
Verify
Step-by-step
- Open the published Framer site.
- DevTools, Network, filter by
events/batch. - Trigger a few clicks across the page. Each one fires a
POSTtoapi.getfluxly.com/v1/events/batch(events are batched, so you may see one request per 20 events or per 5 seconds, whichever comes first). - In the GetFluxly dashboard, the live feed shows
page_viewed,click, and other autocapture events withcontext.install_source = "framer".
Troubleshooting
| Symptom | Likely cause |
| --- | --- |
| Snippet not visible on the live site | Framer's publish didn't include the custom code. Verify the change is saved, then re-publish. |
| Events on preview but not on published domain | Framer's preview and production CDNs can drift. Re-publish; the change propagates within a few seconds. |
| 403 wrong_key_type in DevTools | Server key (gflux_secret_*) pasted by mistake. Use a publishable key (gflux_pub_*); the dashboard's Install panel always picks the right one. |
| Mixed events tagged from a previous host | The browser SDK persists anonymous_id per origin. Visitors who first hit the Framer-hosted domain stay attributed to it; visitors hitting both your custom domain and *.framer.app get separate IDs (this is by design). |
Use Framer's interaction events
Framer's component event handlers can call into the SDK once the snippet has loaded. From a Code Override:
import type { ComponentType } from "react";
export function withGFluxClick(Component: ComponentType): ComponentType {
return (props) => (
<Component
{...props}
onClick={(e) => {
window.gflux?.track("cta_clicked", { id: "hero_get_started" });
props.onClick?.(e);
}}
/>
);
}
Then apply the override to any button or link in the Framer canvas to send a custom event alongside autocapture.