Getting Started

You can integrate Business Dash into your project two ways. Pick the one that fits your workflow.

Before you start: connect your site

The fastest way to get every value you need is the guided wizard in your dashboard — it creates each credential and hands you a copy-paste .env block.

In your BIAB dashboard, open Settings → Web Content SDK (open it). Pick your site, create a secret key + publishable token + revalidation webhook, and copy the assembled .env. Secrets are shown once, so copy as you go.

Each variable maps to a spot in the dashboard:

`.env` variable	What it is	Where in the dashboard
`NEXT_PUBLIC_BIAB_SITE_ID`	The site UUID this app renders	Site Builder ▸ Developer ▸ Site ID
`BIAB_API_KEY`	Secret key (`sk_…`) — server-only	Site Builder ▸ Developer ▸ Secret keys
`NEXT_PUBLIC_BIAB_PK`	Publishable token (`pk_…`) — browser-safe	Site Builder ▸ Developer ▸ Publishable tokens
`BIAB_REVALIDATION_SECRET`	Webhook HMAC (`whsec_…`) — server-only	The wizard, or Settings ▸ Integrations
`NEXT_PUBLIC_BIAB_PACKAGE_API_BASE_URL`	Where BIAB is hosted	Defaults to production

Your .env ends up looking like:

# Non-secret + browser-safe (the browser needs these)
NEXT_PUBLIC_BIAB_PACKAGE_API_BASE_URL=https://www.biab.app
NEXT_PUBLIC_BIAB_SITE_ID=your-site-uuid
NEXT_PUBLIC_BIAB_PK=pk_...

# Server-only secrets — never prefix these with NEXT_PUBLIC_
BIAB_API_KEY=sk_...
BIAB_REVALIDATION_SECRET=whsec_...

SITE_ID and the base URL aren't secret, so each uses a single NEXT_PUBLIC_ variable (the browser needs them); the API key and revalidation secret stay server-only. No site yet? Create one in the Site Builder first — the wizard links you there.

Starter templates ship with .env.example — copy it to .env and paste the wizard's block. The SDK content needs no database, so DATABASE_URL is optional. As a last step, verify your domain in Settings → Organization so this org owns the domain your publishable token is locked to.

The SDK starters use slug="general-inquiry" for the contact form — a platform-default form that's available to every org without any dashboard setup. See Forms → Zero-setup contact form for how the fallback works.

Option 1: Clone a starter

The fastest path. Each framework has a starter template with the SDK already wired up — just clone, install, and go.

Select your framework with the picker in the navbar above. Every code example across the docs will update to match your choice.

git clone --depth 1 https://github.com/Gold240sx/biab-sdk-starters.git my-app
cd my-app/React-Bun
cp .env.example .env
pnpm install

Then copy the .env.example to .env, fill in the values from the section above, and run the dev server — you're live.

Option 2: Install manually

Add the SDK to an existing project.

Make sure you've completed the API key setup above first.

1. Install the package

npm install @biab-dev/sdk

2. Create a client

// src/client.ts — browser-side proxy calls
const BIO_ENDPOINT = "/api/biab";

function api(path: string, body?: unknown) {
  return fetch(`${BIO_ENDPOINT}${path}`, {
    method: body ? "POST" : "GET",
    headers: body ? { "Content-Type": "application/json" } : undefined,
    body: body ? JSON.stringify(body) : undefined,
  }).then((r) => r.json());
}

export const biab = {
  forms: {
    schema: (slug: string) => api(`/forms/${slug}/schema`),
    submit: (slug: string, data: unknown) =>
      api(`/forms/${slug}/submit`, data),
  },
};

3. Make your first call

const schema = await biab.forms.schema('contact')

From here you can fetch data, render forms, embed a chatbot, and more — see the Feature Integration guides for each surface.