Kicklace examples
Kicklace is lifecycle email for SaaS founders: one map that follows every customer from sign-up to paying, with the emails for each stage on it, written in your own voice. Connect your website and Stripe, and Kicklace reads your site and your payment history, places every customer on one map by what they have done, and writes the welcome, onboarding, trial-ending and failed-payment emails for you to read and switch on. It is free up to 1,000 contacts.
Kicklace does the follow-up a CRM is bought for, without the CRM. Instead of contacts, pipelines and campaigns on separate screens to learn, every customer and every email is on one map, made for founders who have never set up a CRM. How it compares with Loops, Customer.io and Mailchimp; its MCP server lets Claude and other AI assistants read and work in it.
Four small, complete projects. Each one runs on its own, has nothing in it but
what it is showing, and is MIT.
| What it shows | Install |
|---|
plain-html | The tag, and a form Kicklace hears with no handler of yours | nothing |
react-vite | The tag in a single-page app, and kl.subscribe from a React form | npm install |
express | identify, subscribe and track from a server, through the kicklace package | npm install |
with-kicklace | The smallest Next.js app: the tag in the root layout, and one server-side event | npm install |
The two doors
There are only ever two, and most products want both.
The tag is one script in the <head> of your website. It records the page
reads, keeps one browser id so a visit last week and a sign-up today are one
person, remembers where somebody came from, and hears your own signup forms —
without taking any of them over. It is served by your workspace with your
settings already inside it, so there is nothing to install and nothing to keep
up to date. Your public key goes in its address, and is meant to be in a
page anybody can read.
The package, kicklace, is one
line in your server: identify, subscribe, track, support, batch and
messages. Zero dependencies, nothing from node:, and every method resolves
to { ok: true, … } or { ok: false, error, message } — a refusal is an
answer, so nothing it does can throw inside your checkout. Your secret key
belongs here and nowhere else.
npm install kicklace
import { Kicklace } from "kicklace";
const kl = new Kicklace(process.env.KICKLACE_SECRET_KEY!);
await kl.track("purchase", { email, value: 49, idempotencyKey: invoice.id });
Both keys are in one screen
Connections → Your website shows the tag with your public key already in it,
and its Developers tab mints a secret key, which is shown once.
While you are trying one of the two browser examples, add its address —
http://localhost:5173 for Vite, whatever port you serve the HTML page on —
under Connections → Your website → Where is your site?, or every post is
refused. That is deliberate: without it, anybody's page could put people in
your workspace. The Express example needs nothing of the sort: a post carrying
a secret key comes from a server, has no origin, and is never checked against
that list.
Consent is not a setting
A subscription carries the words the person read, stored verbatim as the proof
with the day and, if you send it, their IP. There is no default sentence to
fall back on: a subscribe without one is refused.
Every example keeps that sentence in one place, so what a person agreed to
and what Kicklace keeps cannot drift apart: plain-html lets the tag read it
off the label of the ticked box, and the other two hold it as one constant that
the form shows and the call sends.
And Kicklace only emails somebody who has been in touch — who bought, signed
up, wrote in, replied, or joined a list. There is no switch that turns that
off.
Somewhere else to start
MIT
