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
| Platform | Where |
|---|---|
| WordPress | Settings → Snippets → Header, or your theme's <head> |
| Webflow | Project settings → Custom code → Head code |
| Framer | Site settings → General → Custom code → Head |
| Shopify | theme.liquid inside <head> |
| Plain HTML | Inside <head> on every page |
Verify it's working
Open the browser dev tools console on your page. You should see:
[ChirpBack] SDK initializedIf nothing logs, check:
- The
clientIdmatches 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
- Identify users
- Open a survey
- Consent — when to skip the inline
consentoption