Skip to main content
Embed meetergo’s scheduling functionality directly into your application using our pre-built components. These components handle complex UI interactions while you maintain full control over the booking flow.

​
Available Components

ComponentDescriptionStatus
Booking WidgetFull booking flow with calendar and time selectionAvailable
Calendar ConnectOAuth flow for connecting Google/Microsoft calendarsAvailable
Availability PickerInteractive weekly availability editorComing Soon
Time Slot SelectorStandalone date/time picker for bookingsComing Soon
Booking ManagerList and manage upcoming appointmentsComing Soon

​
Booking Widget

Embed the complete booking experience with a single line of code.

​
Iframe Embed

<iframe
  src="https://cal.meetergo.com/{companySlug}/{userSlug}/{meetingTypeSlug}"
  width="100%"
  height="700"
  frameborder="0"
  title="Book an appointment"
></iframe>

​
JavaScript Embed

<div id="meetergo-booking"></div>

<script src="https://cdn.meetergo.com/embed.js"></script>
<script>
  Meetergo.init({
    container: '#meetergo-booking',
    meetingTypeId: 'your-meeting-type-id',
    theme: {
      primaryColor: '#2563eb',
      borderRadius: '8px'
    },
    prefill: {
      name: 'John Doe',
      email: '[email protected]'
    },
    onBookingComplete: (booking) => {
      console.log('Booking created:', booking);
    }
  });
</script>
See Embed Booking Widget for full documentation.

​
Calendar Connect

Let users connect their Google or Microsoft calendar via OAuth. The API is fully available - you can build your own UI or use our code examples.

​
Quick Implementation

// 1. Get OAuth URL from your backend
const response = await fetch(
  `https://api.meetergo.com/v4/calendar-connections/auth/google/url?` +
  new URLSearchParams({
    redirectUrl: 'https://yourapp.com/calendar/callback',
    setAsCalendarSync: 'true'
  }),
  {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'x-meetergo-api-user-id': userId
    }
  }
);

const { authUrl } = await response.json();

// 2. Redirect user to OAuth
window.location.href = authUrl;

// 3. Handle callback at your redirectUrl
// User returns with ?success=true&connection_id=xxx or ?error=access_denied

​
Features

  • One-click OAuth - Handles the full OAuth flow
  • Multi-provider - Google Calendar, Microsoft 365, iCloud, CalDAV, Exchange
  • Connection management - List, update, delete connections via API
  • Sync preferences - Set primary calendar, select which calendars to sync

Full Documentation

See complete implementation guide with React examples, popup flow, and error handling

​
Availability Picker (Coming Soon)

Interactive component for users to set their weekly availability.

​
Planned Usage

<div id="availability-picker"></div>

<script>
  Meetergo.AvailabilityPicker({
    container: '#availability-picker',
    userId: 'user-id',
    availabilityId: 'availability-id',
    timezone: 'Europe/Berlin',
    format: '24h', // or '12h'
    minInterval: 30, // minutes
    onChange: (schedule) => {
      console.log('Availability updated:', schedule);
    },
    onSave: (availability) => {
      console.log('Saved:', availability);
    }
  });
</script>

​
Features

  • Drag-to-select - Click and drag to set available hours
  • Copy days - Duplicate one day’s schedule to others
  • Timezone aware - Display in user’s local timezone
  • Presets - Common schedules (9-5, morning only, etc.)
  • Exceptions - Add date-specific overrides

​
Visual Preview

┌─────────────────────────────────────────────────────┐
│  Weekly Availability                    [Save]      │
├─────────────────────────────────────────────────────┤
│         Mon    Tue    Wed    Thu    Fri    Sat  Sun │
│  8:00   ████   ████   ████   ████   ████            │
│  9:00   ████   ████   ████   ████   ████            │
│ 10:00   ████   ████   ████   ████   ████            │
│ 11:00   ████   ████   ████   ████   ████            │
│ 12:00                                               │
│ 13:00   ████   ████   ████   ████   ████            │
│ 14:00   ████   ████   ████   ████   ████            │
│ 15:00   ████   ████   ████   ████   ████            │
│ 16:00   ████   ████   ████   ████   ████            │
│ 17:00   ████   ████   ████   ████                   │
└─────────────────────────────────────────────────────┘

​
Time Slot Selector (Coming Soon)

Standalone component for selecting available time slots.

​
Planned Usage

<div id="time-selector"></div>

<script>
  Meetergo.TimeSlotSelector({
    container: '#time-selector',
    meetingTypeId: 'meeting-type-id',
    duration: 30,
    daysToShow: 7,
    timezone: 'Europe/Berlin',
    onSelect: (slot) => {
      console.log('Selected:', slot.start, slot.end);
      // Proceed with your custom booking flow
    }
  });
</script>

​
Features

  • Calendar view - Month view with available dates highlighted
  • Time slots - List of available times for selected date
  • Duration aware - Shows slots based on meeting duration
  • Real-time - Updates when slots are booked
  • Customizable - Style to match your brand

​
Use Cases

  • Custom booking forms - Use the selector with your own attendee form
  • Rescheduling - Let users pick a new time
  • Multi-step flows - Embed in a larger wizard

​
Booking Manager (Coming Soon)

Display and manage upcoming appointments.

​
Planned Usage

<div id="booking-manager"></div>

<script>
  Meetergo.BookingManager({
    container: '#booking-manager',
    userId: 'user-id',
    view: 'list', // or 'calendar'
    showPast: false,
    allowCancel: true,
    allowReschedule: true,
    onCancel: (booking) => {
      console.log('Cancelled:', booking.id);
    },
    onReschedule: (booking, newTime) => {
      console.log('Rescheduled:', booking.id, 'to', newTime);
    }
  });
</script>

​
Features

  • List or calendar view - Choose display format
  • Filtering - By date range, meeting type, status
  • Actions - Cancel, reschedule, add notes
  • Details - Show attendee info, meeting links
  • Responsive - Works on mobile and desktop

​
React Components (Coming Soon)

For React applications, we’ll provide native components: 
import {
  BookingWidget,
  CalendarConnect,
  AvailabilityPicker,
  TimeSlotSelector,
  BookingManager
} from '@meetergo/react';

function App() {
  return (
    <div>
      <CalendarConnect
        userId={userId}
        providers={['google', 'microsoft']}
        onConnect={(connection) => {
          console.log('Connected:', connection);
        }}
      />

      <AvailabilityPicker
        userId={userId}
        onChange={(schedule) => {
          console.log('Updated:', schedule);
        }}
      />

      <BookingWidget
        meetingTypeId={meetingTypeId}
        onComplete={(booking) => {
          console.log('Booked:', booking);
        }}
      />
    </div>
  );
}

​
Styling & Theming

All components support custom theming: 
Meetergo.init({
  theme: {
    // Colors
    primaryColor: '#2563eb',
    backgroundColor: '#ffffff',
    textColor: '#1f2937',
    borderColor: '#e5e7eb',

    // Typography
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSize: '14px',

    // Shape
    borderRadius: '8px',
    padding: '16px',

    // Dark mode
    darkMode: false // or 'auto' to follow system
  }
});

​
CSS Custom Properties

For fine-grained control, override CSS variables: 
.meetergo-widget {
  --mg-primary: #2563eb;
  --mg-primary-hover: #1d4ed8;
  --mg-background: #ffffff;
  --mg-text: #1f2937;
  --mg-text-muted: #6b7280;
  --mg-border: #e5e7eb;
  --mg-radius: 8px;
  --mg-font-family: 'Inter', sans-serif;
}

​
Events & Callbacks

All components emit events you can listen to: 
const widget = Meetergo.BookingWidget({
  container: '#booking',
  meetingTypeId: 'mt-id'
});

// Listen to events
widget.on('dateSelected', (date) => {
  console.log('Date selected:', date);
});

widget.on('slotSelected', (slot) => {
  console.log('Slot selected:', slot);
});

widget.on('bookingStarted', (data) => {
  console.log('Booking in progress:', data);
});

widget.on('bookingComplete', (booking) => {
  console.log('Booking created:', booking);
});

widget.on('error', (error) => {
  console.error('Error:', error);
});

// Programmatic control
widget.setDate('2024-01-15');
widget.prefill({ name: 'John', email: '[email protected]' });
widget.destroy();

​
Get Early Access

Want to try the new components before they’re publicly available?

Join Developer Preview

Email us to get early access to new components

​
Next Steps

Embed Booking Widget

Get started with the booking widget

Custom Booking Flow

Build a fully custom experience with APIs