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.

Not a developer?

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. Use the Public API key shown on Settings → Tracking:

import { init, identify, track } from '@signal-sparrow/sdk';

init('pk_live_YOUR_PUBLIC_KEY');

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');
    }, []);

    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. Use the Public API key from Settings → Tracking:

// 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">
                    {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>;
}

Use your Public key — never your Secret key

The key on your website should always be your Public API Key. Your Secret key is for private, server-side use only and should never appear in website code.

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 set up a first-party tracking domain on Settings → Tracking, the HTML snippet already points there. For the React or Next.js SDK you can optionally pass the full collector endpoint to init or RevenuePixelProvider; otherwise the default /collect endpoint works for most setups.

Next, connect Stripe so those visits can be matched to real payments.

👉 Connect Stripe

HTML snippet — no package needed​

React SDK​

Next.js SDK​

That's it​

HTML snippet — no package needed

React SDK

Next.js SDK

That's it