Links

Conversion pixel on Framer

Install the Styrar conversion pixel on a Framer site using Custom Code.

In your Framer project, go to Site Settings → General → Custom Code.
Under Start of <head> tag, add:
HTML
```
<script src="https://api.styrar.com/v1/pixel/styrar.js" async></script>
```
This loads the pixel on every page of your published site. If you only want it on a single landing page, add the tag under that page's own Page Settings → Custom Code instead.
Mark conversions declaratively by adding an HTML attribute to a button or element via the layer's Code → HTML Attributes panel:
- Attribute: data-styrar-track
- Value: e.g. signup

Or call the tracker directly from a code component:

TSX

export function trackPurchase(value: number) {
  if (typeof window !== 'undefined' && (window as any).styrar) {
    ;(window as any).styrar.track('purchase', { value });
  }
}

Conversion pixel — full reference

Related