# Framer

Add ProductLense to a Framer site in Site settings under Custom code, at the end of the head tag, then publish.

In Framer, site-wide code goes in Site settings → General → Custom code. Paste the ProductLense script into the End of `<head>` tag box and publish. Framer page transitions change the URL through the history API, so each page is recorded.

## Add the script

1. Copy your site id from Settings → Sites in the ProductLense dashboard.
2. In Framer, open Site settings → General → Custom code.
3. Paste the snippet into End of `<head>` tag, replacing `SITE_ID`.
4. Publish.

```html title="Site settings → Custom code → End of <head> tag" {2}
<script>window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}</script>
<script defer data-site="SITE_ID" src="https://api.productlense.app/a.js"></script>
```

Add your custom domain and the `framer.website` or `framer.app` domain you publish to as hostnames of the site in ProductLense if you want to see both.

## Custom events

Count form submissions from the End of `<body>` tag box:

```html title="Site settings → Custom code → End of <body> tag" {3}
<script>
  document.addEventListener('submit', () => {
    window.productlense('event', 'Signup');
  }, true);
</script>
```

Then add `Signup` as a goal in the dashboard. See [custom events](/docs/track/custom-events) and [goals and funnels](/docs/dashboard/goals-and-funnels).

## Verify your installation

1. Publish, then open the published site in a normal browser window.
2. Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
3. In the browser's developer tools, the Network tab shows a `POST` to `https://api.productlense.app/api/e` with status `204`.

Custom code runs on the published site, not in the editor preview. Ad blockers in your own browser may block the request. If the visit does not appear, follow [Verify your installation](/docs/install/verify).