How to build a virtual classroom in Bubble

A virtual classroom in Bubble is built by combining three real parts: a video call provider (Bubble does not do live video natively), a database structure for Classes, Users, and Messages, and workflows that handle joining a class, sending chat, and tracking attendance. The simplest stable approach is: embed a third‑party video room (like Daily.co, Jitsi, or Zoom Web SDK), build a class page that loads the correct room URL, and add a real‑time chat using Bubble’s repeating groups with auto-refresh or a plugin.

Core Structure in Bubble

Create three data types:

• User (Bubble already has this). Add fields like “role” (text: teacher or student).
• Class with fields: title (text), room_url (text), teacher (User), students (list of Users), start_time (date), end\_time (date).
• Message with fields: text (text), sender (User), class_link (Class), created_date (date).

This lets you link chat messages and participants to each class.

Embedding the Live Video Room

• Use an HTML element on the Class page.
• Generate a room URL from a provider (Daily, Jitsi, Zoom SDK). These services give you a URL that loads the video UI inside an iframe.

Your HTML element might look like:

<iframe src="https://your-video-provider.com/room123" width="100%" height="600" allow="camera; microphone"></iframe>

Joining a Class

• Create a workflow: When user clicks “Join Class”, navigate to the Class page and send the Class’s unique id.
• On page load, set the iframe’s source to Class’s room\_url.

Real-Time Chat

• Use a repeating group of Messages filtered by class\_link = Current Class.
• Add an input + button workflow that creates a new Message.
• Enable “auto-binding” only if privacy rules allow it; otherwise use a normal create workflow.
• Turn on “Do every 1 second” workflow to refresh the repeating group, or use a real-time plugin for smoother chat.

Privacy Rules (Important)

• In Privacy tab: allow access to Class only if “This Class’s students contains Current User OR This Class’s teacher is Current User”.
• For Messages: allow view only if the parent Class is visible to the user.

Attendance Tracking

• On page load: create a “Class Attendance” entry or add user to a list inside the Class.
• On page unload: run a backend workflow via “Schedule API workflow” to mark exit time (because unload isn’t reliable client-side).

Optional Features

• Screen sharing: supported by the video provider, not Bubble; use their iframe or SDK options.
• File sharing: create a File data type and upload files in the Class view.
• Whiteboard: embed a whiteboard iframe just like video (e.g., Excalidraw or tldraw share links).