Examples
Vanilla JavaScript
<!doctype html>
<html>
<head>
<script type="module">
import { Brij } from 'https://unpkg.com/brij/dist/index.js'
Brij.init({ host: 'https://app.yourco.com', apiKey: 'pk_...' })
document.getElementById('open-btn').addEventListener('click', () => {
Brij.open('contact', { mode: 'panel' })
})
</script>
</head>
<body>
<button id="open-btn">Contact us</button>
</body>
</html>React
import { useEffect } from 'react'
import { Brij } from 'brij'
export function ContactButton() {
useEffect(() => {
Brij.init({ host: 'https://app.yourco.com', apiKey: 'pk_...' })
return () => Brij.destroy()
}, [])
return (
<button onClick={() => Brij.open('contact', { mode: 'panel' })}>
Contact us
</button>
)
}If multiple components use brij, call init() once at the app root and skip destroy() in individual components.
Next.js (App Router)
// app/components/ContactButton.tsx
'use client'
import { useEffect } from 'react'
import { Brij } from 'brij'
export function ContactButton() {
useEffect(() => {
Brij.init({
host: process.env.NEXT_PUBLIC_BRIJ_HOST!,
apiKey: process.env.NEXT_PUBLIC_BRIJ_API_KEY!
})
}, [])
return (
<button onClick={() => Brij.open('contact')}>
Contact us
</button>
)
}brij.js requires a browser DOM - mark any component that calls Brij.open() with 'use client'.
Vue 3
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Brij } from 'brij'
onMounted(() => {
Brij.init({ host: 'https://app.yourco.com', apiKey: 'pk_...' })
})
onUnmounted(() => {
Brij.destroy()
})
function openForm() {
Brij.open('contact', { mode: 'modal' })
}
</script>
<template>
<button @click="openForm">Contact us</button>
</template>Multiple independent instances
Use createBrij() when you need two isolated instances - for example, connecting to different hosts on the same page:
import { createBrij } from 'brij'
const internalForms = createBrij({
host: 'https://internal.yourco.com',
apiKey: 'pk_internal_...'
})
const partnerForms = createBrij({
host: 'https://partner.example.com',
apiKey: 'pk_partner_...'
})
// Open forms from different hosts without interference
internalForms.open('hr-request')
partnerForms.open('partner-signup')Custom fetch (testing / SSR)
Pass a fetch implementation to avoid real network calls in tests or server-side renders:
import { createBrij } from 'brij'
const mockFetch: typeof fetch = async (url) => {
return new Response(JSON.stringify({
steps: [{ fields: [{ name: 'email', label: 'Email', type: 'email' }] }]
}), { status: 200, headers: { 'Content-Type': 'application/json' } })
}
const brij = createBrij({
host: 'https://mock.example.com',
apiKey: 'test',
fetch: mockFetch
})