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)

Industry confirmation — I detected your website is [industry]. Is that correct? Any unique specifics?
Appointment frequency — How often do customers need appointments? (one-time / weekly / monthly / treatment course of X sessions / milestone-based)
Information to collect — Besides phone + name, what else do you need? (email, ID, address, specific service, notes)
Reminder content — What should customers prepare before arriving? (fasting required, bring documents, arrive 15 minutes early...)
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)

Google Maps — Want to embed a Google Maps link in the calendar event? Provide the link or location name.
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

Add CSS → Append booking-form.css to main stylesheet
Add JS → Add calendar-engine.js + calendar-export.js + reminder-config.js
Add HTML → Insert booking form component (bottom-sheet or inline)
Configure → Set industry config, clinic info, Google Maps link
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
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

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

Booking Calendar CRO Engine ​

💰 WHY This Increases Revenue ​

🎯 When to Use ​

📋 7-Phase Workflow ​

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

1A. Industry Auto-Detection ​

1B. Scan Existing Forms ​

1C. Scan Existing Calendar Code ​

Output: Discovery Report ​

Phase 2: SOCRATIC GATE (Strategic Questions) ​

Core Questions (Always Ask) ​

Extended Questions (Ask if Relevant) ​

User WOW Information ​

Phase 3: CONFIGURE (Select Pattern & Customize) ​

3A. Load Industry Pattern ​

3B. Override with User Answers ​

3C. Customization Points ​

Phase 4: BUILD (Generate Code) ​

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

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

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

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

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

Phase 5: INTEGRATE (Wire Everything) ​

5A. Wire to Website ​

5B. Integrate with cm-google-form ​

5C. Integrate with cm-ads-tracker ​

Phase 6: VERIFY (Test & Report) ​

Test Checklist ​

Verification Commands ​

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

❌ Anti-Patterns ​

📑 Templates ​

📚 References ​

🔗 Related Skills ​

Booking Calendar CRO Engine

💰 WHY This Increases Revenue

🎯 When to Use

📋 7-Phase Workflow

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

1A. Industry Auto-Detection

1B. Scan Existing Forms

1C. Scan Existing Calendar Code

Output: Discovery Report

Phase 2: SOCRATIC GATE (Strategic Questions)

Core Questions (Always Ask)

Extended Questions (Ask if Relevant)

User WOW Information

Phase 3: CONFIGURE (Select Pattern & Customize)

3A. Load Industry Pattern

3B. Override with User Answers

3C. Customization Points

Phase 4: BUILD (Generate Code)

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

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

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

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

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

Phase 5: INTEGRATE (Wire Everything)

5A. Wire to Website

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

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

Phase 6: VERIFY (Test & Report)

Test Checklist

Verification Commands

Phase 7: REVENUE REPORT (Explain ROI to User)

❌ Anti-Patterns

📑 Templates

📚 References

🔗 Related Skills