Three SaaS apps, multi-tenant, one BrandAttach

Each page below is a mock SaaS with three demo customers (tenants). The same SaaS code path renders the right brand per tenant: one tenant uses a BrandAttach token, the others use manual fallbacks — switch between them with the chips at the top and watch the surface re-skin.

This proves the multi-tenant promise. One SaaS, many customers, each with their own verified brand. BrandAttach picks the right one based on which token the customer pasted into your settings page — your code doesn't change.

JavaScript snippet

Beacon Customer Portal

The default integration. One <script> tag per tenant with data-brand + data-app. Switching tenant swaps the injected snippet; attach.js re-runs.

Open Beacon Portal →

CSS only

RouteFlow Analytics

For server-rendered apps that want CSS variables only. One <link rel="stylesheet"> per tenant. No JavaScript on the page. Logos via background-image: var(--ba-logo-primary).

Open RouteFlow →

REST API

Mailwave Email Preview

For server-side rendering and any context where you bake the brand into HTML at build time. Server fetches with Authorization: Bearer, renders JSON inline. Includes a live response inspector per tenant.

Open Mailwave →

How to use them

Run npm run db:seed in the BrandAttach repo. It prints a demo brand token and creates an approved demo app.
Open one of the test sites above (default server URL: http://localhost:3000).
The first tenant (Acme) already has the seed token ba_test_demo000000000000000000 pre-configured — its portal renders the Acme brand from BrandAttach.
Click the Globex chip. It has no BrandAttach token; the SaaS falls back to manual fields. Same code path, different render.
Edit any tenant's tokens or manual settings in the controls panel — auto-saves to localStorage, the surface re-renders.
Try + Add tenant to add a new customer row.

Demo tokens (after running the seed)

ba_test_demo000000000000000000

The fixed test brand token for Acme. Works against any origin, no app token required. Pre-configured on the Acme tenant in every test site.

Live tokens (and the demo registered app token) are printed at the end of the seed output. Paste them into any tenant's fields to test the live-token path.

State is persisted in localStorage per test site (keys: ba-test-tenants-js, -css, -rest). To reset, open devtools → Application → Local Storage and delete the keys.