First-Click Fight

Score first clicks into a KO card, then let Novus-tracked usage ship the rematch.

Comment

What it does

A builder picks a seeded product screen and marks the call to action they expect a stranger to use first. They share a fight link. A fresh visitor, or a judge with no account, opens it with no login and clicks once where they would start. That first official click is saved and scored: the Clarity KO Card reads CTA_DEFENDED when the visitor hit the marked target, or CTA_KNOCKED_OUT when a different element won, with the exact click point on the screen. The owner can then ship a rematch route in one action, and the next visitor sees the promoted target. Every card reopens at a stable link and replays on a phone by QR.

How we built it

The recorded first click is the mechanism. A guest session cookie lets any visitor play with no account, while the owner action is gated by a signed key carried in the share link. The first click per session is hit-tested against the marked target, written to a relational row in Cloudflare D1, and turned into a saved card. A usage-learning loop records fight creation, first click, result inspection, card replay, rematch shipment, and return behavior, then rolls official clicks into a per-target tally and a learning line. That tally, not a guess, decides whether the rematch defends the intended CTA or promotes the challenger.

Novus by Pendo is installed as the sponsor mirror. The Pendo Web SDK loader lives in src/components/NovusScript.tsx, src/lib/novus.ts mirrors those same semantic events with pendo.track, and the public fcf_novus_session visitor id mirrors the HttpOnly fcf_session used by D1. The Novus dashboard has mapped the product and marks the First-Click Fight hero-path events as Tracked.

Why it fits the judging criteria

  • Learn from real product usage: a fresh visitor's first click is saved and scored, not surveyed, and you reopen the saved card at https://first-click-fight.veithly.workers.dev
  • Let usage drive the next change: the per-target tally promotes a clearer route in the 30-second rematch, shown at GET /api/usage?fightId=...
  • Make the decision inspectable for Novus by Pendo: the dashboard tracks fcf_fight_created, fcf_first_action_clicked, fcf_result_inspected, fcf_card_replayed, fcf_rematch_shipped, and fcf_rematch_returned from the deployed app

Challenges we ran into

The first real fight was duplicate scoring: a visitor who clicked twice could create two cards and skew the tally. The fix made the first official click idempotent per session in recordFirstClick, so a second click preserves the original result and returns the existing card link. Running the cross-browser interaction check against the live route is what surfaced the abort behavior that drove that fix.

Accomplishments we're proud of

The full loop is live and inspectable: a fresh visitor scores a first click, the KO card reopens in a second browser identically, and GET /api/usage returns the recorded events with a learning line. A real run shows the six hero-path events from two distinct sessions deciding one rematch, and the Novus Track Events screen identifies the same event taxonomy in the codebase.

What we learned

Building it changed where the trust comes from. The convincing part is not the verdict label; it is that the click, the card, and the tally are reopenable rows a stranger can re-run, so the rematch decision is auditable rather than asserted.

What's next for First-Click Fight

Let builders upload their own screen instead of choosing a seeded one, then use Novus Signals to turn repeated first-click drop-offs into backlog items and rematch suggestions.

How to inspect it

No login is needed. Open https://first-click-fight.veithly.workers.dev, mark a CTA, then click as a fresh visitor in a private window. Reopen the saved card link and read GET /api/usage to see the recorded rows. Repo: https://github.com/veithly/first-click-fight. Novus proof is in the image carousel and docs/NOVUS.md.

Built With

  • cloudflare-d1
  • cloudflare-workers
  • mantine
  • next.js
  • novus-by-pendo
  • pendo-web-sdk
  • playwright
  • typescript
Share this project:

Updates