Tadreeb LMS – Whiteboard Integration
white board
Interactive Whiteboard Module (v1.0.0 )
Overview
This module enables an interactive whiteboard experience within the LMS, allowing instructors and learners to collaborate visually in real-time.
It provides:
- Live drawing and annotation
- Multi-user collaboration
- Real-time synchronization
⚠️ Note: This version is a demo preview and will be fully integrated with live class workflows in future updates.
Module Information
| Item | Value |
|---|---|
| Module Slug | whiteboard |
| Integration Type | Real-time Collaboration |
| Backend Service | Pusher / WebSocket |
| Config Fields | PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET, PUSHER_APP_CLUSTER |
Installation & Setup
Step 1: Download Whiteboard Module
Download the Interactive Whiteboard Module (v1.0.0 – Demo Preview) package.
Step 2: Upload Module
- Login to the Admin Panel
- Navigate to Settings → External App
- Upload the module
.zipfile - Enable the module
🔐 Step 3: Create Pusher App
Create Account
- Go to https://dashboard.pusher.com
- Sign up / Login
Create App
- Click Create App
- Enter:
- App Name (e.g., LMS Whiteboard)
- Cluster (choose closest region)
- Click Create App
🔑 Step 4: Get Pusher Credentials
Go to App Keys section and copy:
| Field | Use |
|---|---|
| App ID | PUSHER_APP_ID |
| Key | PUSHER_APP_KEY |
| Secret | PUSHER_APP_SECRET |
| Cluster | PUSHER_APP_CLUSTER |
⚙️ Step 5: Configure in Application
Go to:
Settings → External App → Whiteboard
Fill:
| Field | Value |
|---|---|
| PUSHER_APP_ID | From Pusher |
| PUSHER_APP_KEY | From Pusher |
| PUSHER_APP_SECRET | From Pusher |
| PUSHER_APP_CLUSTER | From Pusher |
Click Save
Functionality
When the module is enabled:
- Real-time collaborative whiteboard is activated
- Multiple users can draw simultaneously
- Supports tools like:
- Pen
- Shapes
- Text
- Eraser
- Whiteboard content can be exported
- Works on desktop and touch devices
Features & Capabilities
| Feature | Description |
|---|---|
| Live Collaboration | Multi-user real-time interaction |
| Drawing Tools | Pen, highlighter, shapes, text |
| Export Options | Save as PNG/JPG |
| Responsive UI | Supports tablets & touch |
| Demo Mode | Limited LMS integration |
Environment Synchronization
Automatically updates .env:
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
Notes
- Requires a real-time broadcasting service (Pusher/WebSockets)
- This is a demo preview version
- Not fully integrated with Live Classes yet
- Recommended for testing and evaluation