Quick Start

This guide assumes you have a server that can serve a brij schema and accept submissions. If you don’t have one yet, use the demo with the built-in mock backend.

Step 1 - Initialize

Call Brij.init() once when your page loads. Pass your host URL and API key.

import { Brij } from 'brij'

Brij.init({
  host: 'https://app.yourco.com',
  apiKey: 'pk_live_abc123'
})

init is synchronous and does not make any network calls. You can call it at the top of your bundle.

Step 2 - Open a form

Call Brij.open(slug) in response to a user action. The slug maps to a form on your host server.

document.querySelector('#contact-btn').addEventListener('click', async () => {
  await Brij.open('contact', {
    mode: 'panel',           // 'panel' (default) or 'modal'
    onSuccess(data) {
      console.log('Submitted:', data)
    },
    onError(err) {
      console.error('Error:', err)
    },
    onClose() {
      console.log('Form closed')
    }
  })
})

open() fetches the schema for contact from https://app.yourco.com/brij/schema/contact, renders the form, and resolves when the form is mounted.

Step 3 - Serve the schema

Your server must respond to two endpoints:

GET https://app.yourco.com/brij/schema/:slug

Returns a BrijSchema JSON object describing the form.

{
  "title": "Contact Us",
  "description": "We'll get back to you within 24 hours.",
  "submitLabel": "Send message",
  "steps": [
    {
      "fields": [
        { "name": "name",    "label": "Name",    "type": "text",  "validation": { "required": true } },
        { "name": "email",   "label": "Email",   "type": "email", "validation": { "required": true } },
        { "name": "message", "label": "Message", "type": "textarea" }
      ]
    }
  ]
}

POST https://app.yourco.com/brij/submit/:slug

Receives a multipart/form-data body with the field values. Return:

{ "success": true, "data": { "id": "sub_123" } }

Both endpoints receive the header X-Brij-API-Key: <your-api-key> - validate it server-side.

That’s it

The form renders as a slide-in panel. Users fill it out, click Submit, and your onSuccess callback fires with the response data. No redirect, no iframe, no postMessage.

Next: explore the full API reference or schema spec.