BoardAPI Documentation

Appearance

Integration Overview ​

Intermediate - 30 minutes

Prerequisites: Understanding of REST APIs, basic JavaScript

Learn how to integrate BoardAPI into your application with embedding, webhooks, and real-time events.

Integration Approaches ​

1. Embedded iFrame ​

Embed boards directly in your application:

html
<iframe
  src="https://app.boardapi.io/board/abc-123?token=..."
  width="100%"
  height="600px"
  allow="clipboard-write"
></iframe>

Use Cases:

  • EdTech platforms (lesson boards)
  • SaaS dashboards (collaboration spaces)
  • Internal tools (project planning)

Learn More: White-Label Setup

2. Webhooks ​

Receive real-time notifications when events occur:

bash
curl -X POST https://api.boardapi.io/api/v1/webhooks \
  -H "X-API-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://your-app.com/webhook",
    "events": ["board.created", "element.added"]
  }'

Use Cases:

  • Sync board data to your database
  • Trigger workflows (notifications, analytics)
  • Audit logging

Learn More: Webhooks API

3. WebSocket Events ​

Subscribe to real-time events during an active session:

javascript
const ws = new WebSocket('wss://api.boardapi.io/ws?token=...');

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Event:', data.type, data.payload);
};

Use Cases:

  • Real-time analytics dashboards
  • Live moderation
  • Custom UI overlays

Learn More: WebSocket API

4. AI Agents ​

Automate interactions with AI-powered agents:

bash
curl -X POST https://api.boardapi.io/api/v1/agents \
  -H "X-API-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "preset": "ai-tutor",
    "board_uuid": "abc-123"
  }'

Use Cases:

  • Educational tutoring
  • Automated moderation
  • Timer/facilitator bots

Learn More: AI Agents Integration

Integration Checklist ​

Before going to production, ensure:

  • [ ] API key secured (environment variables, not hardcoded)
  • [ ] Webhook endpoints secured (verify signatures)
  • [ ] CORS configured for your domain
  • [ ] Error handling implemented
  • [ ] Rate limits understood (see Quota & Limits)
  • [ ] Session lifecycle planned (board expiration)
  • [ ] User permissions configured (host vs guest links)

Common Integration Patterns ​

Pattern 1: Per-User Boards ​

Each user gets their own board:

javascript
// Create board when user signs up
const board = await createBoard({
  title: `${user.name}'s Workspace`,
  metadata: { user_id: user.id }
});

// Store board_uuid in your database
await db.users.update(user.id, { board_uuid: board.board_uuid });

Pattern 2: Session-Based Boards ​

Create temporary boards for meetings/lessons:

javascript
// Create board when meeting starts
const board = await createBoard({
  title: `Meeting: ${meeting.title}`,
  expires_in_hours: 24
});

// Share guest link with participants
await sendInvites(meeting.participants, board.access_links.guest);

Pattern 3: Template-Based Boards ​

Reuse board configurations:

javascript
// Create template once
const template = await createTemplate({
  name: 'Lesson Template',
  elements: [/* predefined shapes */]
});

// Create boards from template
const board = await createBoard({
  template_id: template.id,
  title: 'Lesson 5: Math Quiz'
});

Learn More: Templates API

Next Steps ​

Choose Your Path

Beginner Integration:

  1. White-Label Setup - Basic embedding
  2. Session Management - User access

Advanced Integration:

  1. Webhooks - Event-driven workflows
  2. WebSocket Events - Real-time sync
  3. Custom Components - Extend functionality

Need Help? ​