Install the SDK
The SDK is a small piece of code that lives on your website. Once it's in place, Signal Sparrow can quietly notice where each visitor came from — for example, which ad or campaign they clicked.
That's completely fine. This page is the one to hand to whoever manages your website. The whole job takes just a few minutes.
Pick the install method that matches your site:
- HTML snippet
- React SDK
- Next.js SDK
HTML snippet — no package needed
This is the quickest way to get started and works on any website, including no-code builders.
Copy the snippet from Settings → Tracking in your dashboard and paste it into the <head> of every page, ideally right before the closing </head> tag:
<script
async
src="https://YOUR_FIRST_PARTY_DOMAIN/i/YOUR_SCRIPT_PATH_TOKEN.js"
></script>
The dashboard shows the real URL for your workspace, so you can copy and paste it exactly.
Once the script is live, the SDK is available as window.rp. For example, after a user signs up you can identify them:
<script>
if (window.rp) {
rp.identify('user@example.com');
}
</script>
React SDK
Install the package:
npm install @signal-sparrow/sdk
Initialize it once near the top of your app. Settings → Tracking generates this call for you with your public key and endpoint already filled in — copy it from there rather than typing it out:
import { init, identify, track } from '@signal-sparrow/sdk';
init('pk_live_YOUR_PUBLIC_KEY', {
endpoint: 'https://YOUR_TRACKING_DOMAIN/e/YOUR_COLLECT_TOKEN',
});
In a React app, the safest place is inside a small useEffect so it only runs on the client:
import { useEffect } from 'react';
import { init, identify } from '@signal-sparrow/sdk';
export function SignalSparrowInit() {
useEffect(() => {
init('pk_live_YOUR_PUBLIC_KEY', {
endpoint: 'https://YOUR_TRACKING_DOMAIN/e/YOUR_COLLECT_TOKEN',
});
}, []);
return null;
}
// Later, after signup or login:
identify('user@example.com');
Next.js SDK
Install the package:
npm install @signal-sparrow/next
Wrap your root layout with the provider. Settings → Tracking has this snippet ready to copy under Show the provider for your app, with your public key, endpoint and consent mode already filled in:
// app/layout.tsx
import { RevenuePixelProvider } from '@signal-sparrow/next';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<RevenuePixelProvider
publicKey="pk_live_YOUR_PUBLIC_KEY"
endpoint="https://YOUR_TRACKING_DOMAIN/e/YOUR_COLLECT_TOKEN"
>
{children}
</RevenuePixelProvider>
</body>
</html>
);
}
Call identify when a user signs up or logs in:
'use client';
import { useIdentify } from '@signal-sparrow/next';
export function SignupForm() {
const identify = useIdentify();
const onSubmit = async (email: string) => {
// ...create the account
identify(email);
};
return <form>{/* ... */}</form>;
}
Signal Sparrow has no secret key and no API key to generate — your public key (pk_live_…) is the only credential the SDK uses, and it is safe to ship in your website's code. What actually protects your workspace is the authorised domain list on Settings → Tracking: events are only accepted from the origins you allow there.
That's it
Once the SDK is live, Signal Sparrow automatically starts noticing visits and remembering where they came from — you don't need to track anything by hand.
If you used the React or Next.js SDK, always pass endpoint. The default is the relative path /collect, which resolves against your own site — so a React or Next.js app would post its events to your server instead of ours, and nothing would arrive. The HTML snippet doesn't have this problem, because it is served from your tracking domain and resolves back to us. Copy the ready-made call from Settings → Tracking and the right endpoint is already in it.
Next, connect Stripe so those visits can be matched to real payments.