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.
Components are currently in development. This page outlines the planned functionality. Join our developer preview to get early access.

​
Available Components

ComponentDescriptionStatus
Booking WidgetFull booking flow with calendar and time selectionAvailable
Calendar ConnectOAuth flow for connecting Google/Microsoft calendarsComing Soon
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 (Coming Soon)

Let users connect their Google or Microsoft calendar with a single click.

​
Planned Usage

<div id="calendar-connect"></div>

<script>
  Meetergo.CalendarConnect({
    container: '#calendar-connect',
    userId: 'user-id',
    providers: ['google', 'microsoft'],
    onConnect: (connection) => {
      console.log('Calendar connected:', connection.provider);
    },
    onError: (error) => {
      console.error('Connection failed:', error);
    }
  });
</script>

​
Features

  • One-click OAuth - Handles the full OAuth flow
  • Multi-provider - Support for Google Calendar and Microsoft 365
  • Connection status - Shows which calendars are connected
  • Disconnect option - Allow users to remove calendar connections
  • Sync preferences - Configure which calendars to sync

​
API Integration

For custom implementations, use the Calendar Auth API: 
// Get OAuth URL for user to connect calendar
const response = await fetch(
  `https://api.meetergo.com/v4/calendar-auth/url?provider=google`,
  {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'x-meetergo-api-user-id': userId
    }
  }
);

const { authUrl } = await response.json();
// Redirect user to authUrl

​
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