Quick start

Get Canopy running in under a minute. One script, no cookies, instant data.

1 HTML script — any site

Works on WordPress, Webflow, Ghost, static HTML, SPA frameworks. Paste in <head>.

HTML • p.jsasync • 1.5kb

<script
  src="https://your-canopy.app/p.js"
  data-site-id="canopy_example_com"
  async
></script>

Replace data-site-id with your site ID from the dashboard.

2 Next.js — wnstn/canopy/nextjs

Subpath export from @wnstn/canopy — no extra install.

npm i @wnstn/canopy/nextjsone dep

npm i @wnstn/canopy/nextjs

app/layout.tsxapp router

import { CanopyProvider } from "@wnstn/canopy/nextjs";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <CanopyProvider siteId={process.env.NEXT_PUBLIC_CANOPY_SITE_ID!} />
        {children}
      </body>
    </html>
  );
}

any componentclient

'use client';
import { useCanopyTrack } from "@wnstn/canopy/nextjs";

export function PricingButton() {
  const { track } = useCanopyTrack();
  return <button onClick={() => track("signup", { plan: "pro" })}>Upgrade</button>;
}

3 Vanilla JS — framework agnostic

No React? No problem. Import the core tracker directly.

import { initCanopy, track } from "@wnstn/canopy";

initCanopy({ siteId: "canopy_example_com" });

// anywhere in your app
track("checkout", { value: 49, currency: "USD" });

4 Verify it works

1. Open your site in a browser

2. Open Realtime — you'll see your visit instantly

3. Check Overview for pageviews, sources, live count

5 Add custom events when ready

Track sign-ups, checkouts, feature usage — typed, no setup.

track("signup", { plan: "pro", source: "header" });
track("checkout", { value: 49, currency: "USD" });
track("feature_used", { name: "export", format: "csv" });

Ready to measure?

Create your first site, paste one line, see live visitors.

Start for free Read API docs