# Meetings Component

The Meetings component embeds a HubSpot meeting scheduling widget via iframe. It is a client-side Island component that renders the meeting embed when a meeting URL is provided, and renders nothing when no meeting URL is set.

## Import path

```tsx
import Meetings from '@hubspot/cms-component-library/Meetings';
```

## Purpose

The Meetings component allows module authors to embed a HubSpot meeting scheduler into a CMS page. It renders an iframe pointing to `${meetingUrl}?embed=true`. The component renders nothing (`null`) when no meeting URL is provided.

## Component Structure

```
Meetings/
├── index.tsx                          # Main component — renders iframe Island or null
├── index.module.scss                  # CSS module for iframe container
├── types.ts                           # TypeScript type definitions
├── ContentFields.tsx                  # HubSpot field definitions for content (MeetingField)
└── islands/
    └── MeetingsIsland.tsx             # Client Island: renders the meeting iframe embed
```

## Props

```tsx
{
  meetingUrl?: string;               // Meeting link URL (from MeetingField value); renders null when absent
  className?: string;                // Additional CSS class for the wrapper
  style?: React.CSSProperties;       // Inline styles for the wrapper
}
```

## Usage Examples

### Island Usage

The Meetings component internally uses `<Island>`, so it can be used directly in any module without wrapping it in another Island.

```tsx
import Meetings from '@hubspot/cms-component-library/Meetings';

<Meetings meetingUrl={meetingUrl} />
```

### With meeting URL

```tsx
<Meetings meetingUrl="https://meetings.hubspot.com/example/book-a-call" />
```

### With custom class and style

```tsx
<Meetings
  meetingUrl="https://meetings.hubspot.com/example/book-a-call"
  className="custom-meetings-wrapper"
  style={{ maxWidth: '800px', margin: '0 auto' }}
/>
```

## HubSpot CMS Integration

### Field Definitions

#### ContentFields.tsx

Renders a single `MeetingField` that lets the page editor select a meeting link.

```tsx
<Meetings.ContentFields />
```

With customized field props:

```tsx
<Meetings.ContentFields
  meetingLabel="Book a call"
  meetingName="meeting"
/>
```

**Fields:**
- `meeting`: MeetingField for selecting a HubSpot meeting link (embeddable)

### Module Usage Example

```tsx
import Meetings from '@hubspot/cms-component-library/Meetings';
import { ModuleMeta } from '../types/modules.js';

type ComponentProps = {
  meeting?: string;
};

export const Component = ({ meeting }: ComponentProps) => {
  return <Meetings meetingUrl={meeting} />;
};

export const meta: ModuleMeta = {
  label: 'Meetings',
  content_types: ['SITE_PAGE', 'LANDING_PAGE', 'BLOG_POST', 'CASE_STUDY'],
  icon: '',
  categories: ['commerce'],
  editor_version: '2.0',
};
```

## Styling

The iframe has a default `min-height` of 690px to accommodate the standard meetings embed height. You can override this with the `style` prop or CSS variables.

### CSS Variables

No CSS custom properties are currently defined. Use the `style` prop or a wrapping element for custom dimensions.

### Custom width example

```tsx
<Meetings
  meetingUrl="https://meetings.hubspot.com/example/book-a-call"
  style={{ maxWidth: '600px' }}
/>
```

## Accessibility

- **iframe title**: The embedded iframe has `title="Meeting scheduler"` for screen reader context.

## Best Practices

- **Meeting URL**: The `meetingUrl` prop should be the raw meeting link URL without query parameters — the component appends `?embed=true` automatically.
- **Null rendering**: When `meetingUrl` is empty the component renders `null`. Ensure this is acceptable in your module's layout.
- **Iframe height**: The default `min-height: 686px` matches the typical HubSpot meetings embed. Adjust via the `style` prop if your meeting type is shorter or taller.

## Related Components

- **Form**: Similar embed pattern for HubSpot forms — renders a placeholder in the editor and the actual embed on live pages.
