Framer Integration

Log in to your Koah advertiser dashboard and start the installation helper. It provides the Koah head and body pixel code you'll paste into Framer.

1. Open your Framer project
2. Click the Site Settings gear icon in the top toolbar
3. Go to the General tab and scroll down to Custom Code

1. Paste the Koah head pixel code into the Start of <head> tag field
2. Paste the Koah body pixel code into the End of <body> tag field
3. Click Save

1. Click Publish in the top right corner
2. Make sure your site is published to your custom domain
3. Wait for the publish process to complete

After publishing:

1. Visit your published website (not the Framer preview)
2. The Koah installation helper will confirm if the pixel is installed correctly

1. In the Framer editor, select the button you want to track
2. Click the Code icon in the properties panel (it appears when an element is selected) to open the custom code editor

In the custom code editor, add the following, replacing "Lead" and the parameters with your own event (see the Events documentation for all event types and parameters):

export function withKoahPixel(Component): ComponentType {
  return forwardRef((props, ref) => {
    return (
      <Component
        ref={ref}
        {...props}
        onClick={() => {
          window.kad("track", "Lead", { currency: "USD", value: 50.0 });
        }}
      />
    )
  })
}