Get Started

Install via script tag

Drop ChirpBack into any HTML page without a bundler. Calls queue automatically until the SDK loads.

If you don't use a bundler — plain HTML, WordPress, Webflow, Framer, Squarespace, server-rendered Rails / Django / Laravel pages — drop in the script-tag snippet instead of npm.

The snippet

Paste this just before </head> on every page:

<script>
  !function(c,d){if(!c.Chirp){c.Chirp=new Proxy({q:[]},{get:(t,k)=>k==="q"?t.q:
  new Proxy(()=>{},{apply:(_,__,a)=>t.q.push({path:[k],args:a}),
  get:(_,k2)=>(...a)=>t.q.push({path:[k,k2],args:a})})});
  var s=d.createElement("script");s.async=1;
  s.src="https://cdn.chirpback.io/v1/sdk.js";d.head.appendChild(s);}}(window,document);

  Chirp.init({
    clientId: "your-client-id",
    consent: { state: "granted" },
  });
</script>

Replace your-client-id with the value from Project Settings → Developer.

consent: { state: "granted" } makes the SDK active immediately. If you handle consent through a CMP, leave consent out and manage it via Chirp.consent.

How the queue works

The snippet sets up window.Chirp as a queue before the real SDK arrives. Any calls made early are saved and replayed once the SDK loads.

<script>
  /* ...snippet above... */
  Chirp.init({
    clientId: "your-client-id",
    consent: { state: "granted" },
  });
  Chirp.identify({ email: "jane@acme.io" });
  Chirp.survey.open("welcome_survey");
</script>

All three calls run in order, even if sdk.js hasn't finished loading.

Identifying logged-in users

If your server renders the page with the user's identity, inject it into the snippet:

<script>
  /* ...snippet above... */
  Chirp.init({
    clientId: "your-client-id",
    consent: { state: "granted" },
  });
  Chirp.identify({
    email: "{{ user.email }}",
    fullName: "{{ user.name }}",
  });
</script>

Don't put any sensitive data in the page source — only what you'd be comfortable sharing in the URL bar.

Where to place the snippet

PlatformWhere
WordPressSettings → Snippets → Header, or your theme's <head>
WebflowProject settings → Custom code → Head code
FramerSite settings → General → Custom code → Head
Shopifytheme.liquid inside <head>
Plain HTMLInside <head> on every page

Verify it's working

Open the browser dev tools console on your page. You should see:

[ChirpBack] SDK initialized

If nothing logs, check:

  • The clientId matches the one in Project Settings → Developer
  • The script is in <head>, not after </body>
  • The page isn't blocked by a Content Security Policy that omits cdn.chirpback.io
  • The page's domain matches an entry in Allowed domains (or that list is empty)

Next steps

On this page