Доска, видео и чат — внутри вашей платформы. Попробуйте прямо сейчас
Здесь подключены все четыре способа встроить урок Whiteboard Studio. Откройте любой, позовите второго человека — хоть со своего телефона — и посмотрите, как это выглядит у ведущего и у участника и какие данные получает платформа.
Четыре способа — выберите свой
Везде одна и та же доска: бесконечная, с формулами, графиками функций, линейкой, циркулем и 3D-фигурами, презентациями из PDF и PPTX, видеозвонком и чатом. Разница — в том, кто и как её подключает.
API и JavaScript SDK
Ваш сервер создаёт урок и выдаёт личные ссылки, страница показывает урок во фрейме. События, команды, вебхуки, выгрузка доски. Есть режим «только доска».
Открыть вживую → Для React-приложенийReact-компонент
Тот же урок одним компонентом <WhiteboardLesson />: события через пропсы, команды через ref. Страница ниже сделана на настоящем React.
Код для вставки
Для сайтов на Tilda, GetCourse, WordPress: код из кабинета преподавателя вставляется в HTML-блок. Участник вводит имя и сразу на доске.
Открыть вживую → Для LMSLTI 1.3 (Moodle и др.)
Доска — внешний инструмент курса. Здесь работает маленькая LMS: настоящий вход по LTI 1.3 с подписью, ролями и именами из курса.
Открыть вживую →Что получает ваша платформа
На каждой странице демо справа — «панель интегратора»: всё, что видит ваш код, появляется там в реальном времени.
События на странице
Урок сообщает странице о себе через postMessage — только на ваши домены.
wb:ready { role: "teacher", mode: "full", lessonId } wb:joined { call: true } // вошёл в видеозвонок wb:leave // нажал «Выйти» wb:error { code: "link_expired" }
Команды уроку
Ваша кнопка — и доска уже у вас: картинкой или PDF со всеми страницами.
const png = await lesson.command('exportPng') const pdf = await lesson.command('exportPdf') // Blob await lesson.command('fitToScreen')
Вебхуки на сервер
Подписанные HMAC-SHA256: кто вошёл, когда урок начался и закончился, сколько минут ушло.
POST /webhooks X-Whiteboard-Signature: t=…,v1=… { "type": "lesson.ended", "data": { "lesson_id": …, "minutes": 45 } }
Данные по API
Урок, содержимое доски в JSON, миниатюра, расход минут по дням и урокам.
GET /lessons/{id} // урок GET /lessons/{id}/snapshot // доска: элементы и страницы GET /lessons/{id}/preview // миниатюра PNG GET /usage // минуты
Как это устроено
Ключ API хранится только на сервере платформы. Человек входит по личной ссылке — без регистрации и паролей у нас. Cookie во фрейме не нужны: работает в Safari и в режиме инкогнито.