> ## Documentation Index
> Fetch the complete documentation index at: https://developer.meetergo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeddable Components

> Pre-built UI components for scheduling functionality

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

| Component               | Description                                          | Status        |
| ----------------------- | ---------------------------------------------------- | ------------- |
| **Booking Widget**      | Full booking flow with calendar and time selection   | Available     |
| **Calendar Connect**    | OAuth flow for connecting Google/Microsoft calendars | **Available** |
| **Availability Picker** | Interactive weekly availability editor               | Coming Soon   |
| **Time Slot Selector**  | Standalone date/time picker for bookings             | Coming Soon   |
| **Booking Manager**     | List and manage upcoming appointments                | Coming Soon   |

## Booking Widget

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

### Iframe Embed

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

### JavaScript Embed

```html theme={null}
<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>
```

See [Embed Booking Widget](/developer-docs/recipes/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

```javascript theme={null}
// 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

<Card title="Full Documentation" icon="book" href="/developer-docs/components/calendar-connect">
  See complete implementation guide with React examples, popup flow, and error handling
</Card>

## Availability Picker (Coming Soon)

Interactive component for users to set their weekly availability.

### Planned Usage

```html theme={null}
<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

```html theme={null}
<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

```html theme={null}
<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:

```jsx theme={null}
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:

```javascript theme={null}
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:

```css theme={null}
.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:

```javascript theme={null}
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();
```

## Get Early Access

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

<Card title="Join Developer Preview" icon="flask" href="mailto:api-support@meetergo.com?subject=Component%20Preview%20Access">
  Email us to get early access to new components
</Card>

## Next Steps

<CardGroup cols={2}>
  <Card title="Embed Booking Widget" icon="window" href="/developer-docs/recipes/embed-booking-widget">
    Get started with the booking widget
  </Card>

  <Card title="Custom Booking Flow" icon="code" href="/developer-docs/recipes/build-custom-booking-flow">
    Build a fully custom experience with APIs
  </Card>
</CardGroup>