# Integrating Statsig with Framer
## How Statsig integrates with Framer
Statsig integrates with Framer to capture user behavior on the sites you build there. You paste the Statsig web snippet into your Framer project's custom code to autocapture basic interactions, then log your own events with `window.statsig.logEvent()`. Framer is a tool for building interactive websites and prototypes.
This guide covers integrating Statsig into your Framer project using the JavaScript SDK.
## Installation
To start tracking user interactions in your Framer project, follow these steps:
1. Copy your web snippet from Statsig, replacing `YOUR_CLIENT_KEY` with a Client API Key from your Statsig project. Find your key at [console.statsig.com/api\_keys](https://console.statsig.com/api_keys).
```html
```
2. In your Framer project, click the gear icon in the top right corner to open project settings. You need the "mini" site plan or above to enable custom code.
3. In the General tab, scroll down to the Custom Code section and paste your Statsig snippet at the end of the `` tag section.
4. Save your changes and publish your site. Statsig tracks basic user interactions.
## Capture custom events
To track custom events in your Framer project, use `window.statsig.logEvent()` inside a custom component.
1. Go to the Assets tab in your Framer project.
2. Click the plus icon next to Code and create a new code component.
3. Name the file `CaptureButton` and select New Component.
4. Replace the default code with the following:
```js
export default function CaptureButton() {
const handleClick = () => {
window.statsig.logEvent("click", "button");
};
return (
);
}
```
5. Save your changes (Cmd/Ctrl + S).
6. Drag your new CaptureButton component from the Code tab onto your Framer page.
7. Publish your site and click the button. After a couple of minutes, the event appears in your Statsig metrics.