BricqsBricqs
Developer guides

Build gamification with Bricqs

The complete build guide for engineers and technical PMs shipping points, tiers, badges, challenges, contests, streaks, leaderboards, rewards, and referrals. Pick an integration path, learn the underlying model, copy a working pattern, push to production. Headless React SDK for React/Next.js apps, REST API for everything else — same engine behind both.

Last updatedMay 2026
Need strategy first? See the marketer, PM, and martech guide library

Key takeaways

Quick read
  • Two integration paths today: headless React SDK (11 typed hooks for React/Next.js apps) and REST API (every state and mutation, callable from any HTTP-capable stack).
  • Server-side scoring is non-negotiable. Client state is gamed within hours of release. Points, contests, and rewards always reconcile against the canonical ledger.
  • Idempotency keys on every write. Retries must never double-credit — points, contest entries, and reward claims all enforce uniqueness at the database level.
  • API keys are tenant-scoped, with separate participant and admin scopes. Mint short-lived participant tokens server-side; never ship admin keys to the browser.
  • Webhooks deliver outbound events with HMAC-SHA256 signing and exponential-backoff retry. Verify the signature header before acting on any webhook body.

Integration paths

Three ways to ship gamification

Pick the path that matches the surface you are integrating into. Most production builds combine the SDK and the REST API, while technical PMs often start in the concept guides before choosing an implementation path. SDK for member-facing React UI, REST API for server-side scoring, admin tooling, and any non-React stack. iframe an engagement page when speed beats UI control.

Headless React SDK

11 typed React hooks for points, tier, badges, streaks, challenges, leaderboards, rewards, referrals, engagement components. Zero JSX, you own the UI. Best when your design team controls the surface.

REST API

Every state and mutation exposed as one HTTP call. /gamify for participant + admin, /ingest for events, /challenges, /contests, /referrals, /webhooks. Idempotent writes, append-only ledger, anti-fraud built in. The only path for non-React stacks (Vue, Svelte, server-rendered, native mobile, partner platforms).

iframe an engagement page

Drop a Bricqs-hosted engagement page (quiz, spin, scratch, challenge surface) into your site via iframe. UI is rendered by the Bricqs runtime; you pass the participant id. Best for marketing-led drops where the team wants to ship without engineering.

End-to-end example

See every primitive compose into one product

Reading a single SDK or API page tells you how one hook works. The example below shows how nine mechanics compose — onboarding coins, daily activity, streaks, follower milestones, weekly leaderboards, badges, season rewards, webhooks, and referrals — wired end-to-end on a real product surface. If your stack maps to this page, the engine will handle it.

Proof of stack · 20 min read

Esports social network on Bricqs

A complete walkthrough for “Qlan.gg” — a hypothetical gamer social network. Onboarding coins, daily activity loop, login streak with freezes, follower milestones, weekly Valorant/Apex/BGMI leaderboards, badge catalog, season-tier rewards driven by webhook fulfilment, weekly challenges, and squad referrals. Every API call, every SDK hook, every UI component shown.

Read the walkthrough →

Coins

Streaks

Badges

Leaderboards

Challenges

Milestones

Rewards

Webhooks

Referrals

Compare the paths

SDK vs REST API vs iframe

A side-by-side comparison so you can pick the right path the first time.

CapabilityHeadless SDKREST APIiframe page
StackReact 18+, Next.js, Vite, Remix, Astro islandsAny HTTP-capable backend, mobile, or non-React frontendAny page that can host an iframe
UI controlFull — you render everything in your own componentsFull — you render everything in your own componentsBricqs renders the engagement
Best forMember-facing UI inside a React appServer-to-server, mobile, partner platforms, Vue/Svelte/server-renderedMarketing campaigns, microsites, partner placements
Auth modelShort-lived participant tokens minted server-sideAPI key (participant or admin) + optional participant tokenParticipant id passed via URL or postMessage
Real-time updatesBuilt-in revalidation channelPoll the read endpoints at the cadence you needHandled inside the iframe
Engineering effortMediumMediumLow
Default rule:All three paths hit the same Bricqs engine. Mix and match as your product evolves.

By stack

Starting points by stack

Stack-specific entry points so you skip the setup decisions and go straight to the first hook or endpoint.

React + Next.js (App Router)

Install @bricqs/headless-react. Mint participant tokens in a Route Handler. Wrap the app in BricqsProvider once. usePoints, useTier, useChallenge render in any Client Component. SSR-safe via passed-in token prop.

Vite, Remix, Astro

Same package. The Provider lives at the root of the client island. Use the same hook surface; the SDK does not depend on Next.js APIs.

Vue, Svelte, or server-rendered

Skip the SDK; call /api/v1/gamify directly with fetch or your HTTP client of choice. Every state in the SDK is exposed as one GET, including the one-call /participants/{id}/state.

Node, Python, Go, any backend

POST events from your backend, claim rewards, run admin operations. One Authorization header, deterministic Idempotency-Key on every write. No client library required.

Native mobile (iOS / Android)

REST API via your platform's HTTP client (URLSession, Retrofit, OkHttp). No native SDK ships today; the REST surface is fully sufficient. Mint participant tokens on your backend and pass them to the app.

Server-to-server / partner

Webhooks for outbound; REST API for inbound. HMAC-SHA256 signing on every webhook. Exponential backoff with up to 12 retries over 24 hours.

The library

Every developer guide, in one place

The cluster below mirrors the marketing IA. Every strategy guide should hand off cleanly into a technical concept, an implementation pattern, or the API reference — pick by goal, by primitive, or by surface.

What you get from the engine

Production guarantees, not just an API

What Bricqs handles so you do not have to.

Idempotency on every write

Send an Idempotency-Key on any write — points awards, contest entries, reward claims, events — and retries are guaranteed safe. Same key, same response, no double-credit.

Append-only ledger

Every points award, deduction, contest score, and reward claim is a row in an append-only ledger. Reconcile, rebuild, and audit without ever mutating history.

Server-side anti-fraud

Velocity caps per participant. Suspicious rank-jump detection on contests. Reward inventory locked atomically so two parallel claims can never collide. Auto-disqualification before prizes are allocated.

Rate limits and back-pressure

Per-API-key and per-tenant rate limits prevent any one client from starving others. Spikes are buffered so a sponsored stream or a championship final does not drop events.

Tenant isolation

Every row, every key, every ledger entry is tenant-scoped. Multi-tenant safe by default — your tenant never sees another tenant's data and vice versa.

Observable end-to-end

Every event you POST is traceable through the engine. Failed webhooks, dropped facts, and rate-limit hits are surfaced in the dashboard so support can answer 'where did my points go?' in one query.

Developer FAQ

Common questions when integrating gamification with Bricqs.

Ready to ship?

Build with Bricqs

Headless SDK for React UIs. REST API for any backend, mobile, or non-React frontend. Same engine, two paths.

1 brief to align the room2 mechanics max in version one
What happens next
01
Pick the mechanic
Choose the smallest working system for the brief.
02
Launch without rebuilds
Configure rules and rewards in one place.