Install via npm

Install the ChirpBack SDK as a package in your JavaScript or TypeScript project.

The chirpback npm package works in any modern bundler — Vite, Webpack, Next.js, Remix, Astro, SvelteKit, and so on. It ships ESM by default with TypeScript types.

Install

npm install chirpback

pnpm add chirpback

yarn add chirpback

bun add chirpback

Initialize once, at the top of your app

Call Chirp.init exactly once, as early as possible — typically in your root layout, app entry, or _app file.

app/layout.tsx

"use client";

import { useEffect } from "react";
import { Chirp } from "chirpback";

export default function RootLayout({ children }) {
  useEffect(() => {
    Chirp.init({
      clientId: process.env.NEXT_PUBLIC_CHIRPBACK_CLIENT_ID!,
      consent: { state: "granted" },
    });
  }, []);

  return <html><body>{children}</body></html>;
}

Chirp.init is idempotent — calling it more than once is a no-op and logs a warning. Safe to call from inside React effects.

Server-side rendering

The SDK is browser-only. In a SSR framework (Next.js App Router, Remix, etc.), make sure init runs in a client component or inside useEffect — never in a server component.

// ✓ Good — runs in the browser
"use client";
import { useEffect } from "react";
import { Chirp } from "chirpback";

export function ChirpbackBoot() {
  useEffect(() => {
    Chirp.init({
      clientId: "your-client-id",
      consent: { state: "granted" },
    });
  }, []);
  return null;
}

// ✗ Bad — Chirp is undefined on the server
import { Chirp } from "chirpback";
Chirp.init({ clientId: "your-client-id" }); // crashes in SSR

TypeScript

Types are bundled with the package — no @types/chirpback install needed.

import { Chirp, type IdentifyInput } from "chirpback";

const user: IdentifyInput = {
  email: "jane@acme.io",
  fullName: "Jane Doe",
};

Chirp.identify(user);

Next steps

Initialize the SDK — full config reference
Identify users — tying the SDK to your auth flow
Install via script tag — for sites without a bundler

Install

Initialize once, at the top of your app

Server-side rendering

TypeScript

Next steps

On this page