bonuz SDK

From zero to live in the developer hub.

No package to install for a website. Everything you set up happens in app.bonuz.market; your code only needs the project key.

1. 1

   Sign in to app.bonuz.market

   Open Developers and pick the brand your app belongs to. Projects, team and billing live under a brand; no brand yet, create one first. Brand owners and admins can create projects.

2. 2

   Create a project

   Press New project. One project per app, and you can change everything later. You get a project key that starts with bz_. It is public: it only says which app is calling. The sites under Domains are what protect it. It is not a Web3Auth client id, and you never need one.

   Developers › New project

   App name

   Onchain Chess

   People see it on the sign-in screen.

   Website

   app.example.com

   Optional now. Where your app runs.

   Platform

   Website / web appMobile app

   Your key, once you press Createbz_…
3. 3

   Make it yours

   Each project has its own tabs. Sign-in methods are email (a one-time code), Google and Apple. The SDK fetches these settings on page load, so a change in the hub reaches your app without a redeploy (a returning visitor may see the old look for one more visit).

   Overview

   Getting-started checklist, the snippets, your project key, this month at a glance.

   Domains

   Every site your app runs on, localhost with its exact port included.

   Sign-in

   Methods and their order, app name, logo, accent colour, theme, terms and privacy links, with a live preview.

   Profile menu

   What people see when they tap their avatar: built-in rows, your own links, the order.

   Wallet

   Wallet window on or off, send, fund, custom tokens, test networks, which chain it opens on.

   Users

   Everyone who signed in to your app, with their public bonuz profile. Never their email.

   Analytics

   Monthly active users, sign-ins today, new users, who came with a bonuz ID already.

   Settings

   Project name, platform, key, archive.

4. 4

   Copy the snippet

   The Overview tab hands you ready code with your key filled in. A script tag for any website, a provider for React and Next.js, and the hook that tells you who is signed in.

   Any websiteReact / Next.jsUse the session

   WordPress (as a Custom HTML block), Webflow, Shopify, plain HTML: paste and done.

   index.htmlCopy

   <!-- bonuz login: paste where the sign-in button should appear (WordPress: in a Custom HTML block) -->
   <div data-bonuz-login></div>
   <script type="module" src="https://bonuz.id/sdk/v1/bonuz.js" data-project="bz_…"></script>
   
   <script>
     // window.bonuz exists as soon as the script starts. bonuz:ready says the widget is up, not that
     // anyone is signed in; the user arrives with bonuz:login (on sign-in, and when a saved session is restored)
     window.addEventListener("bonuz:ready", (e) => console.log("bonuz ready for", e.detail.project));
     window.addEventListener("bonuz:login", (e) => console.log("signed in", e.detail.user)); // {id, handle, name, walletAddress}
     window.addEventListener("bonuz:logout", () => console.log("signed out"));
   
     // For your own API: a fresh token, refreshed if it was about to expire
     async function callMyApi() {
       const token = await window.bonuz.getFreshToken(); // waits for a restoring session; null when nobody is signed in
       return fetch("/api/me", { headers: { Authorization: "Bearer " + token } });
     }
     // window.bonuz.getToken() is the same thing without waiting: the current token, or null
   </script>

   In the hub these come with your own project key filled in, plus an AI prompt tab you can paste into Claude Code, Cursor, Copilot or ChatGPT to set it all up for you.

5. 5

   Go live

   Add every site your app runs on under Domains. http://localhost with its port works the moment you add it; bonuz enables a real domain by hand, usually within a day, and sign-in shows a blocker there until then. Sign in once and Users and Analytics start filling. The first 1,000 monthly active users of each project are free.

   Overview › Getting started

   1. ✓Project created
   2. 2Add your website
   3. 3bonuz enables your site (usually within a day)
   4. 4Paste the snippet and sign in once