Embeddable Components

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

<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: 'john@example.com'
    },
    onBookingComplete: (booking) => {
      console.log('Booking created:', booking);
    }
  });
</script>

// 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

<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>

┌─────────────────────────────────────────────────────┐
│  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   ████   ████   ████   ████                   │
└─────────────────────────────────────────────────────┘

<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>

<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>

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>
  );
}

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
  }
});

.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;
}

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: 'john@example.com' });
widget.destroy();