Cm Booking Calendar

---
name: cm-booking-calendar
description: |
  Booking & Calendar CRO Engine — Packages all booking, scheduling, .ics download, and Google Calendar integration into a revenue-boosting system.
  Auto-detect industry → select matching pattern → generate calendar engine + booking UI + export logic.
  Integrates with cm-google-form (form → sheet) and cm-ads-tracker (conversion events).
  
  ALWAYS trigger for: booking, appointment, calendar, reminder,
  download ics, google calendar, add to calendar, book appointment, schedule,
  "create booking", "add scheduling", "appointment reminder system", "calendar CRO", "reduce no-show"
allowed-tools: Read, Write, Edit, Glob, Grep, Browser
version: 1.0
priority: HIGH
skills:
  - cm-google-form
  - cm-ads-tracker
---

# Booking Calendar CRO Engine

> **Booking + Calendar Reminders = Replace expensive SMS/notification costs.**
> Auto-detect industry → Ready-made patterns → Generate code → Increase revenue.
> Zero dependencies, works on any static site.

---

## 💰 WHY This Increases Revenue

| Metric | Impact | Mechanism |
|--------|--------|-----------|
| **No-show reduced 30-60%** | Directly increases revenue | Calendar reminder replaces SMS, free |
| **Conversion Rate +15-25%** | "Add to Calendar" CTA = micro-commitment | User commits via action, not just form |
| **LTV increases 2-3x** | Appointments = continuous touchpoints | Brand exposure every time calendar opens |
| **SMS/notification cost = 0** | Saves $0.05-0.10/message | Calendar notification is free forever |
| **Organic referrals** | Calendar events can be shared | "Invite a friend" via calendar |

---

## 🎯 When to Use

| Trigger | Action |
|---------|--------|
| User says "booking", "appointment", "schedule" | Activate — start Phase 1 |
| User says "reminder", "calendar" | Activate — focus calendar export |
| User says "reduce no-show", "increase conversion" | Activate — focus ROI explanation |
| User says "download calendar", "download ics" | Jump to Phase 4 (calendar-export.js) |
| Detected booking form on website | Suggest this skill proactively |

---

## 📋 7-Phase Workflow

```
Phase 1: DISCOVER → Auto-detect industry, scan existing forms/booking
Phase 2: SOCRATIC GATE → Ask 5-7 strategic questions
Phase 3: CONFIGURE → Select industry pattern + customize
Phase 4: BUILD → Generate calendar engine + UI + export
Phase 5: INTEGRATE → Wire to site + cm-google-form + cro-tracking
Phase 6: VERIFY → Test ICS, GCal, form submit, tracking events
Phase 7: REVENUE REPORT → Explain ROI to user per feature
```

> 🔴 **Rule:** NEVER skip Phase 1 & 2. Always scan first, ask second.

---

## Phase 1: DISCOVER (Auto-Detect Industry & Scan)

**Goal:** Understand the website's industry and existing booking/form infrastructure.

### 1A. Industry Auto-Detection

Scan the website to classify industry:

```
grep -ri "keywords\|description\|og:title" --include="*.html" --include="*.astro" .
grep -ri "service\|booking\|appointment" --include="*.html" --include="*.astro" .
```

**Detection signals:**

| Signal | Where to Find | Example |
|--------|---------------|---------|
| Meta keywords | `<meta name="keywords">` | "obstetrics, ultrasound" → Healthcare:OB/GYN |
| Page titles | `<title>`, `<h1>` | "Dental Clinic" → Healthcare:Dental |
| Service lists | Service section content | "Haircut, coloring, perming" → Salon |
| Form fields | `<select>` options | "Prenatal exam, 5D ultrasound" → OB/GYN |
| Address/Maps | Google Maps embed | Location-based business |

### 1B. Scan Existing Forms

```
grep -r "data-form-type\|onsubmit\|<form\|booking" --include="*.html" --include="*.astro" .
```

For each form found, extract:

| Info | How to Find |
|------|-------------|
| Form type | `data-form-type` or form class/id |
| Fields | `<input name="...">`, `<select name="...">` |
| Calendar integration | `google.com/calendar`, `.ics`, `VCALENDAR` |
| Submit handler | `onsubmit` attribute or JS handler |

### 1C. Scan Existing Calendar Code

```
grep -r "VCALENDAR\|google.com/calendar\|\.ics\|VEVENT\|VALARM" --include="*.js" --include="*.html" .
```

### Output: Discovery Report

```markdown
## Discovery Report

**Industry detected:** [industry name] (confidence: HIGH/MEDIUM/LOW)
**Detection signals:** [list signals found]
**Existing forms:** [count] forms found
**Existing calendar:** [YES/NO] — [details if yes]
**Recommended pattern:** [industry-pattern key]
```

---

## Phase 2: SOCRATIC GATE (Strategic Questions)

> 🔴 **MANDATORY.** Ask ALL in ONE message. Max 7 questions.

Ask user these questions, adapting language to their industry:

### Core Questions (Always Ask)

1. **Industry confirmation** — I detected your website is [industry]. Is that correct? Any unique specifics?
2. **Appointment frequency** — How often do customers need appointments? (one-time / weekly / monthly / treatment course of X sessions / milestone-based)
3. **Information to collect** — Besides phone + name, what else do you need? (email, ID, address, specific service, notes)
4. **Reminder content** — What should customers prepare before arriving? (fasting required, bring documents, arrive 15 minutes early...)
5. **Reminder timing** — How far in advance to remind? (1 day + 2 hours before is default, need additional 1 week before?)

### Extended Questions (Ask if Relevant)

6. **Google Maps** — Want to embed a Google Maps link in the calendar event? Provide the link or location name.
7. **Follow-up** — After the appointment, do you want to automatically suggest booking the next one? (re-booking prompt)

### User WOW Information

After receiving answers, explain back to user **WHY** each feature increases revenue. This is the "exceeding expectations" moment:

```markdown
## 💡 Why Each Feature Drives Revenue:

1. **Calendar Reminder replaces SMS** → Saves ~$0.05-0.10/message.
   If 100 appointments/month = saves $5-10/month, $60-120/year.

2. **"Add to Calendar" CTA** → Increases commitment 40%.
   Research shows: users who add calendar events have 2.5x higher
   show-up rate compared to form-only submissions.

3. **Google Maps in event** → Reduces "got lost" cancellations 25%.
   Calendar event with location → 1 tap opens navigation → no drop-off.

4. **Preparation reminders** → Reduces cancellations/postponements 35%.
   "Remember to fast for 8 hours" in reminder → patient prepares correctly
   → no rescheduling needed → no lost revenue.

5. **Re-booking prompt** → Increases LTV 2x.
   After 6 months auto-reminds "Time for your next check-up" → recurring revenue.
```

---

## Phase 3: CONFIGURE (Select Pattern & Customize)

**Goal:** Load industry pattern + apply user customizations.

### 3A. Load Industry Pattern

Read `references/industry-patterns.md` → find matching industry → load defaults.

### 3B. Override with User Answers

Merge user answers from Phase 2 onto the industry defaults:

```javascript
const config = {
  ...INDUSTRY_PATTERNS[detectedIndustry],  // defaults
  ...userOverrides,                         // from Phase 2
  // Computed fields
  googleMapsUrl: userGoogleMapsUrl || buildMapsSearchUrl(clinicName, clinicAddress),
  reminderAlarms: buildAlarmConfig(userReminderTiming),
  calendarTitle: `${userServiceName} — ${clinicName}`,
};
```

### 3C. Customization Points

| Setting | Source | Default |
|---------|--------|---------|
| Industry pattern | Auto-detect + user confirm | From detection |
| Clinic/business name | User input | From `<title>` tag |
| Address | User input | From Google Maps embed or contact section |
| Google Maps link | User provides or auto-build | Search URL |
| Reminder content | Industry default + user override | From pattern |
| Reminder timing | User choice | 1 day + 2 hours before |
| Working hours | User input | Mon-Sat 8:00-17:00 |
| Services list | Scan existing `<select>` or user input | From form |
| Follow-up interval | Industry default + user override | From pattern |
| Form fields | Industry default + user additions | phone + name + date + service |

---

## Phase 4: BUILD (Generate Code)

### 4A. Calendar Engine (`templates/calendar-engine.js`)

> See `templates/calendar-engine.js` for the full template.

Core `BookingCalendarEngine` class:

| Method | Purpose |
|--------|---------|
| `constructor(config)` | Init with industry config |
| `generateSchedule(startDate, preferences)` | Build appointment list from milestones/frequency |
| `getSmartDateChips()` | Return next 5 smart date options (Today, Tomorrow, next available slots) |
| `getTimeSlots(date)` | Return available time slots for a given date |
| `filterPastAppointments(appointments)` | Remove past dates |
| `getNextAppointment()` | Get the soonest upcoming appointment |

### 4B. Calendar Export (`templates/calendar-export.js`)

> See `templates/calendar-export.js` for the full template.

| Function | Purpose |
|----------|---------|
| `buildGoogleCalUrl(event, config)` | Generate Google Calendar deep link |
| `buildICSContent(events, config)` | Generate RFC 5545 .ics content with VALARM |
| `triggerICSDownload(content, filename)` | Trigger browser download |
| `addToGoogleCal(event)` | Open GCal in new tab |
| `addAllToGoogleCal(events)` | Batch add with confirmation |
| `downloadICS(event)` | Download single event .ics |
| `downloadAllICS(events)` | Download all events as single .ics |
| `detectDevice()` | iOS → ICS, Android → GCal deep link |
| `buildCalendarCTA(event, config)` | Generate post-submit calendar buttons HTML |

### 4C. Booking Form UI (`templates/booking-form.html`)

> See `templates/booking-form.html` for markup templates.

**3 form variants:**

| Variant | Use Case |
|---------|----------|
| `bottom-sheet` | Mobile-first popup (like existing BookingBottomSheet) |
| `inline` | Embedded in page content |
| `standalone` | Full-page booking form |

**Required attributes:**
```html
<form data-form-type="booking" 
      data-industry="[INDUSTRY_KEY]"
      onsubmit="window.submitBooking(event)">
  <input type="hidden" name="url" value="">
  <input type="hidden" name="industry" value="[INDUSTRY_KEY]">
  <!-- form fields per industry config -->
  <button type="submit">Confirm Booking</button>
</form>

<!-- Post-submit Calendar CTA (shown after successful submit) -->
<div class="booking-calendar-cta" id="booking-calendar-cta" hidden>
  <p class="cta-title">📅 Add to your calendar so you don't forget!</p>
  <div class="cta-buttons">
    <button onclick="addToGoogleCal()" class="btn-gcal">
      <img src="gcal-icon" alt=""> Google Calendar
    </button>
    <button onclick="downloadICS()" class="btn-ics">
      📥 Download calendar file (.ics)
    </button>
  </div>
  <p class="cta-benefit">💡 Your calendar will automatically remind you 1 day before — completely free</p>
</div>
```

### 4D. Booking Form CSS (`templates/booking-form.css`)

> See `templates/booking-form.css` for full styles.

Key components:
- Bottom sheet with handle
- Date chips grid (3-column, touch targets ≥ 44px)
- Time slot chips
- Calendar CTA section (post-submit — green accent, celebration feel)
- Toast notifications (success/error/retrying)
- Mobile-first responsive

### 4E. Reminder Configuration (`templates/reminder-config.js`)

> See `templates/reminder-config.js` for the full config object.

Each industry config:
```javascript
{
  key: 'obgyn',
  name: 'OB/GYN',
  icon: '🏥',
  frequency: 'milestone',
  milestones: [...],
  reminderAlarms: [
    { trigger: '-P1D', description: 'Appointment reminder for tomorrow' },
    { trigger: '-PT2H', description: 'Your appointment today at {time}' }
  ],
  reminderContent: {
    preparation: 'Bring your pregnancy record, latest test results',
    arriveEarly: '15 minutes',
    fasting: false,
    bringDocuments: ['Pregnancy record', 'ID card', 'Insurance card'],
  },
  calendarTitleTemplate: '{service} — {clinicName}',
  calendarDescTemplate: '{desc}\n\n📍 {clinicName}\n📌 {address}\n📞 {phone}\n🗺️ {mapsUrl}',
  workingHours: { start: '08:00', end: '17:00', days: [1,2,3,4,5,6] },
  bookingFields: ['phone', 'name', 'date', 'timeSlot', 'service', 'note'],
  conversionValue: 50,
  followUp: { interval: 'per-milestone', promptText: 'Time for your next check-up' }
}
```

---

## Phase 5: INTEGRATE (Wire Everything)

### 5A. Wire to Website

1. **Add CSS** → Append booking-form.css to main stylesheet
2. **Add JS** → Add calendar-engine.js + calendar-export.js + reminder-config.js
3. **Add HTML** → Insert booking form component (bottom-sheet or inline)
4. **Configure** → Set industry config, clinic info, Google Maps link
5. **Wire triggers** → Connect CTA buttons to open booking sheet

### 5B. Integrate with `cm-google-form`

The booking form uses the SAME `submitToGoogleSheet()` from cm-google-form skill, with extra fields:

```javascript
// After cm-google-form success callback:
window.submitToGoogleSheet = function(event) {
  // ... existing cm-google-form logic ...
  
  // ADDITION: After success, show calendar CTA
  .then(() => {
    showCalendarCTA(formData);  // from cm-booking-calendar skill
    
    // Track calendar availability
    dataLayer.push({
      event: 'cro_booking_submit',
      event_id: generateUUID(),
      content_name: formData.service,
      value: INDUSTRY_CONFIG.conversionValue,
      currency: 'USD'
    });
  });
};
```

**Google Sheet extra columns:**

| Column | Value | Purpose |
|--------|-------|---------|
| Timestamp | auto | Timestamp |
| (form fields) | from form | Core data |
| Page Source | `url` field | Attribution |
| Calendar Added | YES/NO | Track calendar adoption |
| Calendar Type | gcal/ics/none | Which calendar used |

### 5C. Integrate with `cm-ads-tracker`

New dataLayer events for booking:

```javascript
// Event 1: Booking form submitted
dataLayer.push({
  event: 'cro_booking_submit',
  event_id: '[UUID]',
  content_name: '[service_name]',
  value: [conversion_value],
  currency: 'USD',
  booking_date: '[selected_date]',
  booking_time: '[selected_time]',
  industry: '[industry_key]'
});

// Event 2: Calendar added (Google Cal or ICS)
dataLayer.push({
  event: 'cro_calendar_add',
  event_id: '[UUID]',
  content_name: '[service_name]',
  calendar_type: 'gcal' | 'ics',
  appointments_count: [number],
  industry: '[industry_key]'
});
```

**GTM Tags to create:**

| Tag | Trigger | Platform |
|-----|---------|----------|
| FB Lead | cro_booking_submit | Facebook Pixel |
| TikTok SubmitForm | cro_booking_submit | TikTok Pixel |
| Google Ads Lead | cro_booking_submit | Google Ads |
| GA4 booking_submit | cro_booking_submit | GA4 |
| GA4 calendar_add | cro_calendar_add | GA4 |

---

## Phase 6: VERIFY (Test & Report)

### Test Checklist

| # | Test Case | Expected | Status |
|---|-----------|----------|--------|
| 1 | Open booking form | Bottom sheet slides up | |
| 2 | Select date chip | Chip active + time slots appear | |
| 3 | Select time slot | Chip active + hidden input updated | |
| 4 | Submit valid form | Toast success → Calendar CTA appears | |
| 5 | Click "Google Calendar" | New tab with pre-filled GCal event | |
| 6 | Click "Download calendar file" | .ics file downloads | |
| 7 | Open .ics on iOS | Apple Calendar shows event with reminders | |
| 8 | Open .ics on Android | Calendar app shows event | |
| 9 | Check Google Sheet | New row with calendarAdded column | |
| 10 | Check GTM Preview | cro_booking_submit fires | |
| 11 | Check GTM Preview | cro_calendar_add fires on calendar click | |
| 12 | Submit invalid phone | Validation error toast | |
| 13 | Network offline | 3 retries → error toast with fallback | |
| 14 | Verify reminder alarms | Calendar shows reminder 1d + 2h before | |
| 15 | Verify Google Maps in event | Location link opens Maps correctly | |

### Verification Commands

```bash
# Check calendar export works
node -e "const c = require('./calendar-export.js'); console.log(c.buildICSContent([{...}], config))"

# Validate ICS format
grep -c "BEGIN:VEVENT" test-output.ics
grep -c "VALARM" test-output.ics
```

---

## Phase 7: REVENUE REPORT (Explain ROI to User)

> 🔴 **This phase is what makes the skill exceed expectations.**

After implementation, generate a revenue impact report for the user:

```markdown
## 📊 Revenue Impact Report

### Features Implemented:

| Feature | Impact | Mechanism |
|---------|--------|-----------|
| Calendar Reminder | Reduces no-show 30-60% | Auto-reminder, no cost |
| Google Maps in calendar | Reduces "got lost" cancellations 25% | One-tap navigation |
| Preparation reminder content | Reduces cancellations/postponements 35% | Patient prepares correctly |
| Post-submit CTA | Increases adoption 40% | Micro-commitment |
| Re-booking prompt | Increases LTV 2x | Recurring revenue |

### Estimated Monthly ROI:

Assuming [X] appointments/month, average service price $[Y]:

- **SMS/notification savings:** [X] × $0.05 = $[total]/month
- **No-show reduction:** [X] × 40% no-show × 50% reduction × $[Y] = $[total]/month
- **Re-booking increase:** [X] × 15% re-book × $[Y] = $[total]/month
- **Estimated total revenue increase:** $[grand total]/month
```

---

## ❌ Anti-Patterns

| ❌ Don't | ✅ Do |
|----------|------|
| Hardcode clinic info | Use config object |
| Skip calendar CTA after form success | ALWAYS show calendar CTA |
| Only offer Google Calendar | Offer BOTH GCal + ICS download |
| Generic reminder "You have an appointment" | Industry-specific "Remember to fast..." |
| Same reminder timing all industries | Customize per industry needs |
| Skip Google Maps in event | ALWAYS include location |
| No tracking on calendar actions | Track cro_calendar_add event |
| Build from scratch | Use industry pattern as base |
| Skip Socratic Gate questions | ALWAYS ask Phase 2 questions |
| Forget mobile device detection | iOS → ICS, Android → GCal |

---

## 📑 Templates

| File | Purpose |
|------|---------|
| `templates/calendar-engine.js` | Core booking/scheduling engine |
| `templates/calendar-export.js` | ICS + Google Calendar export |
| `templates/booking-form.html` | HTML form markup (3 variants) |
| `templates/booking-form.css` | Booking form styles |
| `templates/reminder-config.js` | 20 industry configurations |

## 📚 References

| File | Purpose |
|------|---------|
| `references/industry-patterns.md` | Complete 20-industry pattern library |

---

## 🔗 Related Skills

| Need | Skill |
|------|-------|
| Form → Google Sheet | `@[skills/cm-google-form]` |
| Conversion tracking | `@[skills/cm-ads-tracker]` |
| Form UI/UX design | `@[skills/cm-ux-master]` |
| SEO for booking pages | `@[skills/cm-dockit]` |
| Mobile booking UX | `@[skills/cm-ux-master]` |