Virtual Meetings & Zoom Integration

The CAFH Platform includes a complete virtual meeting system integrated with Zoom for seamless online community gatherings. Your member dashboard features a prominent Sala Virtual (Virtual Room) widget in the sidebar. When an upcoming virtual event exists:

Event Information

Event title
Date and time with icons
Live status indicator (if currently happening)

Meeting Status Badge

Programada: Scheduled future event
● En vivo: Currently live (animated pulse)
Finalizada: Completed event

Join Button

Large blue button: “Unirse a la sesión” Styled with Zoom blue (#2D8CFF)

When no virtual events are scheduled:

Calendar icon with empty state message
“Sin sesiones virtuales próximas”
Link to view full calendar

const nextEvent = db.events.getAll().find(e => 
  (e.type === 'Online' || e.type === 'Híbrido') && 
  e.meetingUrl
);

The widget shows the first online or hybrid event that has a meetingUrl configured.

Joining a Meeting

When you’re ready to join the virtual session:

Click Join Button

Click “Unirse a la sesión” on the Zoom widget. This opens the Event Detail Sheet.

Review Session Details

The detail modal shows:

Full agenda with time estimates
Session materials and resources
Meeting information
Organizer contact

Check for Blocks

The system checks if you have pending feedback from a previous session. If blocked, you’ll see a warning.

Launch Zoom

Click the “Unirse a Zoom” button. This:

Opens the Zoom URL in a new tab
Redirects you to Zoom (web or app)
Closes the detail modal

Connect to Zoom

Follow Zoom’s prompts to:

Enable camera and microphone
Join waiting room (if configured)
Enter the meeting

The platform opens Zoom in a new browser tab. You may be prompted to launch the Zoom desktop application if installed.

Event Detail Sheet

The detail modal provides comprehensive pre-meeting information:

Left Panel: Session Briefing

Structured Agenda

If the event has structured agenda items:

agendaItems: [
  {
    id: "ai_1",
    order: 1,
    title: "Apertura y meditación",
    description: "Centramiento inicial",
    durationMinutes: 10
  },
  {
    id: "ai_2",
    order: 2,
    title: "Enseñanza del día",
    durationMinutes: 30
  }
]

Display:

Timeline visualization with connecting line
Duration badges for each item
Item descriptions (if provided)
Total duration calculated automatically

Example:

○ Apertura y meditación (10 min)
  Centramiento inicial
  
○ Enseñanza del día (30 min)

○ Preguntas y respuestas (15 min)

Total estimado: 55 min

Use the agenda to plan your time and know what to expect during the session.

Material de Apoyo (Support Materials)

The event can include references to media assets:

Documents: PDFs, guides, worksheets
Audio: Preparatory meditations
Video: Instructional videos
Images: Slides, diagrams

Each material shows:

File type icon (color-coded)
Material title
File type and size
Download/view icon

Read-Only Access

Materials are linked from the Media Library. They cannot be modified through the meeting interface - ensuring consistency across all sessions.

Right Panel: Meeting Actions

Zoom Meeting Information

Platform Badge: “Zoom Meeting”
Official Platform Label: “Plataforma oficial de la comunidad”
Status Indicator: Green dot if room is available

Meeting Details Box

🕐 Time: 19:00 - 20:30
👤 Organiza: [Organizer Name]
🛡️ Sala privada para miembros

Join Button States

Available (No Blocks):

<button className="bg-cafh-indigo hover:bg-blue-800">
  [Zoom Icon] Unirse a Zoom →
</button>

Blocked (Pending Feedback):

<button disabled className="bg-slate-100 cursor-not-allowed">
  🔒 Evaluación pendiente
</button>

If you haven’t submitted feedback for a previous session, you cannot join new meetings until the evaluation is complete.

Copy Meeting Link

Below the join button:

Copy Link Button: “Copiar enlace de invitación”
Copies the Zoom URL to clipboard
Shows “Enlace copiado” confirmation with checkmark

Use cases:

Share with other members
Save for later reference
Add to personal calendar

Zoom Platform Details

The platform supports Zoom exclusively as the virtual meeting provider.

Zoom URL Format

meetingUrl: "https://zoom.us/j/1234567890?pwd=abc123"

Optionally, events can also store:

zoomId: "123 456 7890"        // Meeting ID
zoomPassword: "abc123"         // Meeting password
platform: "Zoom"               // Always Zoom

Zoom Features Supported

Waiting Room: Members enter waiting room until host admits
Password Protection: Secure meetings with password
Screen Sharing: Hosts can share presentations
Chat: In-meeting text communication
Recording: Sessions can be recorded (host permission)

The CAFH Platform handles meeting access, but all in-meeting features are controlled by Zoom’s native interface.

Post-Session Feedback

After joining a meeting, the platform automatically triggers a mandatory feedback wizard.

Feedback Wizard Flow

Trigger Timing

2 seconds after joining the Zoom meeting:

setTimeout(() => {
  setShowFeedback(true);
}, 2000);

Introduction Screen

Explains:

Feedback is mandatory
Number of questions
Helps improve future sessions
Required to join future meetings

Question Types

The wizard supports three question formats:Rating (1-5 stars):

⭐⭐⭐⭐⭐
"¿Cómo evaluarías la calidad general de la sesión?"

Multiple Choice:

○ La temática
○ La dinámica grupal  
○ El material de apoyo
○ La conducción

Text (Optional):

[Text area]
"Comparte algún comentario o sugerencia"

Progress Tracking

Progress bar showing completion percentage
“Pregunta X de Y” counter
Back button to review previous answers

Submission

Click “Enviar evaluación ✓” to submit all responses.

Confirmation & Rewards

Success screen shows:

“¡Gracias por tu evaluación!”
“+10 puntos de participación 🎉”
“Participación registrada” badge

Feedback Data Structure

interface FeedbackResponse {
  id: string;
  eventId: string;          // Which meeting
  userId: string;           // Who submitted
  userName: string;
  submittedAt: string;      // Timestamp
  answers: {
    questionId: string;
    questionText: string;
    value: string | number; // Answer
  }[];
  overallRating: number;    // Average of all ratings
}

What Happens on Submission

Response Saved

Your feedback is stored in cafh_feedback_r_v1.

Participation Recorded

A ParticipationRecord is created:

{
  userId: "u_member",
  eventId: "evt_123",
  eventTitle: "Meditación semanal",
  participatedAt: "2024-03-15T19:00:00",
  feedbackSubmitted: true,
  feedbackBlocksNext: false
}

Badge Awarded

Automatic star badge:

{
  type: "estrella",
  label: "Asistencia registrada",
  reason: "Evaluación completada: [Event Title]"
}

Block Removed

Your block status is cleared, allowing you to join future meetings.

Gamification System

Learn more about the badge and recognition system below.

Feedback Questions Management

Administrators configure feedback questions:

interface FeedbackQuestion {
  id: string;
  order: number;                    // Display sequence
  text: string;                     // Question text
  type: 'rating' | 'multiple_choice' | 'text';
  options?: string[];               // For multiple choice
  isActive: boolean;                // Can be toggled
}

Default Questions

Rating: “¿Cómo evaluarías la calidad general de la sesión?”
Multiple Choice: “¿Qué aspecto te resultó más valioso?”
Text: “Comparte algún comentario o sugerencia (opcional)”

Administrators can add, edit, reorder, and deactivate questions without affecting previously submitted feedback.

Blocking System

The platform enforces feedback completion to maintain data quality:

How Blocking Works

db.feedback.hasBlockingFeedback(userId: string): boolean

This checks if:

You have a ParticipationRecord with feedbackBlocksNext: true
The feedback was not submitted (feedbackSubmitted: false)

Block Scenarios:

First Event - No Block

Join your first meeting
No previous participation records
Full access granted

Skipped Feedback - Blocked

Attended a meeting
Closed feedback wizard without completing
Cannot join next meeting until submitted

Feedback Completed - Unblocked

Submitted feedback after previous event
Block cleared automatically
Can join future meetings

Block UI Indicators

On Zoom Widget:

<span className="bg-red-500/20 text-red-300">
  🔒 Bloqueado
</span>

On Detail Sheet:

<div className="bg-red-50 border-red-100">
  <p>Acceso bloqueado</p>
  <p>Completa tu evaluación pendiente...</p>
  <button>Ir a la evaluación →</button>
</div>

On Join Button:

<button disabled>
  🔒 Evaluación pendiente
</button>

You cannot bypass the blocking system. Complete your pending feedback to regain meeting access.

Badges and Recognition

The platform includes a gamification system to recognize active participation:

Badge Types

⭐ Estrella

Automatic: Awarded for completing feedback

🥉 Bronce

Manual award for consistent participation

🥈 Plata

Manual award for significant contributions

🥇 Oro

Manual award for exceptional community service

🏆 Especial

Manual award for unique achievements

Badge Structure

interface MemberBadge {
  id: string;
  userId: string;
  type: BadgeType;          // estrella, medalla_bronce, etc.
  label: string;            // "Asistencia registrada"
  reason: string;           // Detailed description
  awardedAt: string;        // Timestamp
  awardedBy: string;        // Admin who awarded (or "system")
}

Where Badges Appear

On Zoom Widget Footer:

<div className="border-t border-white/10 pt-4">
  <MemberBadgesRow userId={currentUser.id} maxVisible={4} />
</div>

Shows up to 4 recent badges with:

Badge emoji
Badge type name
Hover tooltip with full reason
“+X más” indicator if more than 4

Badge Display Example:

⭐ Estrella  🥉 Bronce  ⭐ Estrella  +2 más

Badges are visible to you on your dashboard and to administrators in the member management interface.

Meeting History

Your participation in virtual meetings is tracked in two places:

Activity History Tab

In the Historial tab of your dashboard:

Event type: “Event”
Event title
Date attended
Status: “Completado”
Visual timeline with completion indicator

Participation Records

Backend storage of all participations:

db.gamification.getParticipation(userId: string)

Returns array of all your participation records including:

Events attended
Feedback submission status
Timestamps
Points awarded

Platform Status (Zoom)

The Zoom widget shows real-time meeting status:

Status Values

Programada

Color: White/slateMeeting is scheduled for the future. Join button available.

En curso

Color: Emerald green with pulse animationMeeting is happening right now. ”● En vivo” badge displayed.

Finalizada

Color: GrayMeeting has ended. No join button (or grayed out).

Meeting status is manually updated by administrators. Automatic status detection based on time is a planned enhancement.

Getting Started

Features

​Virtual Meetings & Zoom Integration

​The Zoom Widget

​Widget Display

​Widget Data Source

​Joining a Meeting

​Event Detail Sheet

​Left Panel: Session Briefing

​Structured Agenda

​Material de Apoyo (Support Materials)

Read-Only Access

​Right Panel: Meeting Actions

​Zoom Meeting Information

​Meeting Details Box

​Join Button States

​Copy Meeting Link

​Zoom Platform Details

​Zoom URL Format

​Zoom Features Supported

​Post-Session Feedback

​Feedback Wizard Flow

​Feedback Data Structure

​What Happens on Submission

Gamification System

​Feedback Questions Management

​Default Questions

​Blocking System

​How Blocking Works

​Block UI Indicators

​Badges and Recognition

​Badge Types

⭐ Estrella

🥉 Bronce

🥈 Plata

🥇 Oro

🏆 Especial

​Badge Structure

​Where Badges Appear

​Meeting History

​Activity History Tab

​Participation Records

​Platform Status (Zoom)

​Status Values

Build docs developers (and LLMs) love

Virtual Meetings & Zoom Integration

The Zoom Widget

Widget Display

Widget Data Source

Joining a Meeting

Event Detail Sheet

Left Panel: Session Briefing

Structured Agenda

Material de Apoyo (Support Materials)

Right Panel: Meeting Actions

Zoom Meeting Information

Meeting Details Box

Join Button States

Copy Meeting Link

Zoom Platform Details

Zoom URL Format

Zoom Features Supported

Post-Session Feedback

Feedback Wizard Flow

Feedback Data Structure

What Happens on Submission

Feedback Questions Management

Default Questions

Blocking System

How Blocking Works

Block UI Indicators

Badges and Recognition

Badge Types

Badge Structure

Where Badges Appear

Meeting History

Activity History Tab

Participation Records

Platform Status (Zoom)

Status Values