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

🎯 When to Use

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

<meta name="keywords">

<title>

<h1>

<select>

1B. Scan Existing Forms

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

For each form found, extract:

data-form-type

<input name="...">

<select name="...">

google.com/calendar

.ics

VCALENDAR

onsubmit

1C. Scan Existing Calendar Code

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

Output: Discovery Report

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

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

3B. Override with User Answers

Merge user answers from Phase 2 onto the industry defaults:

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

<title>

<select>

Phase 4: BUILD (Generate Code)

4A. Calendar Engine (

templates/calendar-engine.js

)

See

templates/calendar-engine.js

for the full template.

Core

BookingCalendarEngine

constructor(config)

generateSchedule(startDate, preferences)

getSmartDateChips()

getTimeSlots(date)

filterPastAppointments(appointments)

getNextAppointment()

4B. Calendar Export (

templates/calendar-export.js

)

See

templates/calendar-export.js

for the full template.

buildGoogleCalUrl(event, config)

buildICSContent(events, config)

triggerICSDownload(content, filename)

addToGoogleCal(event)

addAllToGoogleCal(events)

downloadICS(event)

downloadAllICS(events)

detectDevice()

buildCalendarCTA(event, config)

4C. Booking Form UI (

templates/booking-form.html

)

See

templates/booking-form.html

for markup templates.

3 form variants:

bottom-sheet

inline

standalone

Required attributes:

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

{
  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()

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

url

5C. Integrate with

cm-ads-tracker

New dataLayer events for booking:

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

Phase 6: VERIFY (Test & Report)

Test Checklist

Verification Commands

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

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

📑 Templates

templates/calendar-engine.js

templates/calendar-export.js

templates/booking-form.html

templates/booking-form.css

templates/reminder-config.js

📚 References

references/industry-patterns.md

🔗 Related Skills

@[skills/cm-google-form]

@[skills/cm-ads-tracker]

@[skills/cm-ux-master]

@[skills/cm-dockit]

@[skills/cm-ux-master]