Skip to main content

🎯 Zoom + Calendly ExecModules Integration Guide

Overview​

This document describes the complete integration of Zoom Meeting and Calendly Scheduling modules into the Workflow Studio.

Backend Implementation (Java)​

ZoomMeetingModule​

Location: com.valkyrlabs.workflow.modules.social.ZoomMeetingModule

Supported Actions:

  • create - Create a new Zoom meeting
  • get - Retrieve meeting details
  • list - List all meetings
  • update - Update meeting settings
  • delete - Delete a meeting

Features:

  • Reactive streams (Project Reactor)
  • Full RBAC support
  • Comprehensive exception handling
  • Support for recurring meetings, PAC, instant meetings
  • Meeting settings (host video, participant video, auto recording, etc.)

CalendlySchedulingModule​

Location: com.valkyrlabs.workflow.modules.social.CalendlySchedulingModule

Supported Actions:

  • get_user - Get user profile information
  • get_events - List calendar events
  • schedule_event - Create new appointment
  • cancel_event - Cancel an appointment

Features:

  • Non-blocking I/O
  • Bidirectional integration
  • Full calendar management
  • Timezone support
  • Event filtering

Frontend Implementation (TypeScript/React)​

1. Module Catalog Registration​

File: execModuleCatalog.ts

// Zoom module
{
  className: "com.valkyrlabs.workflow.modules.social.ZoomMeetingModule",
  moduleType: "social.zoom.meeting",
  title: "Zoom Meeting",
  category: "Meetings",
  icon: "📹",
  accentColor: "#2D8CFF",
  // ...
}

// Calendly module
{
  className: "com.valkyrlabs.workflow.modules.social.CalendlySchedulingModule",
  moduleType: "social.calendly.scheduling",
  title: "Calendly Scheduling",
  category: "Meetings",
  icon: "📅",
  accentColor: "#2D8CFF",
  // ...
}

2. Connection Management​

Files:

  • ZoomCalendlyConnectionDialog.tsx - Beautiful floating dialog for API credential management
  • ZoomCalendlyConnectionDialog.css - Animated overlay styling

Features:

  • Service-specific forms (Zoom vs Calendly)
  • Input validation with helpful error messages
  • Success notifications
  • Links to API documentation
  • Persistent credential storage via IntegrationAccountMutation

3. Module Configuration Designers​

ZoomModuleDesigner.tsx​

<ZoomModuleDesigner
  module={selectedModule}
  onConfigChange={(config) => updateModule(config)}
/>

Provides:

  • Action selector (create, get, list, update, delete)
  • Meeting configuration (topic, type, duration, timezone)
  • Settings (video, recording, join-before-host, mute-upon-entry)
  • Real-time config preview

CalendlyModuleDesigner.tsx​

<CalendlyModuleDesigner
  module={selectedModule}
  onConfigChange={(config) => updateModule(config)}
/>

Provides:

  • Action selector (get_user, get_events, schedule_event, cancel_event)
  • Email and timezone configuration
  • Event type and guest management
  • Time slot selection
  • Real-time config preview

4. Floating Dialog System (SageChat-style)​

Execution Modules Palette:

  • 📦 Right-positioned panel (320px × 70vh)
  • Draggable with persistent positioning
  • Smooth animations

Module Configuration Dialog:

  • ⚙️ Centered dialog (480px × 80vh)
  • Draggable configuration interface
  • No modal conflicts

Connection Credentials Dialog:

  • 🔗 Floating overlay with backdrop blur
  • Service-specific forms
  • Input validation & error handling
  • API documentation links

Usage Examples​

Example 1: Zoom Meeting Scheduler​

Workflow: zoom-meeting-scheduler.json

Flow:

  1. Trigger: Manual trigger
  2. Create Zoom Meeting: Configure meeting details
  3. Send Email: Share meeting link via SendGrid
  4. Success: Complete
{
  "id": "zoom-meeting-scheduler-example",
  "name": "📹 Zoom Meeting Scheduler",
  "description": "Create a Zoom meeting and automatically share the link via email"
}

Example 2: Calendly Appointment Sync​

Workflow: calendly-appointment-sync.json

Flow:

  1. Trigger: Scheduled (every 30 minutes)
  2. Fetch Calendly Events: List all confirmed events
  3. Filter: Keep only confirmed appointments
  4. Loop: Process each event
  5. Notify Team: Send Slack notification
  6. Success: Complete
{
  "id": "calendly-appointment-sync-example",
  "name": "📅 Calendly Appointment Sync",
  "description": "Sync Calendly appointments and notify team"
}

Mobile Optimization​

Mushroom Handles (Touch-Friendly)​

TaskModuleChain.css:

  • Drag handle: 48px (was 32px)
  • Action buttons: 44×44px (iOS standard)

LooperNode.css:

  • Connection handles: 24×24px (was 12×12px)
  • Loop body port: 28×28px (GIANT!)
  • Enhanced shadows & glow for visibility

Integration Checklist​

  • Zoom module registered in execModuleCatalog
  • Calendly module registered in execModuleCatalog
  • Connection dialog implemented
  • Zoom designer component created
  • Calendly designer component created
  • Example workflows included
  • Mobile handles optimized
  • Floating dialogs styled
  • Module designers exported via index.ts

File Structure​

WorkflowStudio/
├── execModuleCatalog.ts                 (module definitions)
├── ZoomCalendlyConnectionDialog.tsx      (connection UI)
├── ZoomCalendlyConnectionDialog.css      (connection styling)
├── ZOOM_CALENDLY_INTEGRATION.md         (this file)
├── ModuleDesigner/
│   ├── ZoomModuleDesigner.tsx           (Zoom config UI)
│   ├── CalendlyModuleDesigner.tsx       (Calendly config UI)
│   └── index.ts                         (designer exports)
├── exampleWorkflows/
│   ├── zoom-meeting-scheduler.json      (example 1)
│   └── calendly-appointment-sync.json   (example 2)
├── TaskModuleChain.css                  (mobile handles)
└── nodes/
    └── LooperNode.css                   (mobile handles)

Next Steps​

  1. Test Workflows: Load example workflows into the studio
  2. Configure Accounts: Use connection dialog to add Zoom & Calendly credentials
  3. Create Custom Workflows: Use designers to build meeting automation
  4. Deploy: Push to staging for QA testing

Support​

For API documentation:

For issues or questions, refer to the Architecture Documentation.