🛠️ Service Catalog Widget

// Service Catalog Widget Configuration
const catalogConfig = {
  type: 'pricebook',
  name: 'Our Services',
  description: 'Browse services and book online',
  
  // Branding
  branding: {
    primaryColor: '#1890ff',
    secondaryColor: '#52c41a',
    fontFamily: 'Inter, sans-serif',
    logo: 'https://yoursite.com/logo.png'
  },
  
  // Display Settings
  priceBookSettings: {
    showImages: true,           // Show service photos
    showDescription: true,       // Show full descriptions
    showPricing: true,          // Display prices
    enableSearch: true,         // Add search bar
    enableFiltering: true,      // Category filters
    
    // Which categories to show
    categoriesFilter: [
      'Installation',
      'Repair', 
      'Maintenance',
      'Consultation',
      'Emergency Service'
    ],
    
    // Booking Questions - Shown during checkout
    bookingQuestions: [
      {
        id: 'property_access',
        question: 'How should we access your property?',
        type: 'select',
        required: true,
        options: [
          'I will be home',
          'Key under mat',
          'Garage code (provide in notes)',
          'Gate code required'
        ],
        showAt: 'pre-appointment'  // Ask before selecting time
      },
      {
        id: 'pets',
        question: 'Do you have pets?',
        type: 'radio',
        required: false,
        options: ['Yes', 'No'],
        showAt: 'with-form'  // Ask with contact info
      },
      {
        id: 'special_requests',
        question: 'Any special requests or concerns?',
        type: 'textarea',
        required: false,
        placeholder: 'Let us know if there\'s anything special we should know...',
        showAt: 'post-appointment'  // Ask after time selected
      }
    ],
    
    // Booking Settings
    jobScheduling: {
      enabled: true,
      requirePhone: true,
      requireAddress: true,
      
      // Calendar Integration
      timeSlotSelection: true,
      defaultDuration: 120,  // 2 hours
      
      // Business Hours (used if no specific tech availability)
      businessHours: {
        monday: { isOpen: true, start: '08:00', end: '17:00' },
        tuesday: { isOpen: true, start: '08:00', end: '17:00' },
        wednesday: { isOpen: true, start: '08:00', end: '17:00' },
        thursday: { isOpen: true, start: '08:00', end: '17:00' },
        friday: { isOpen: true, start: '08:00', end: '17:00' },
        saturday: { isOpen: true, start: '09:00', end: '15:00' },
        sunday: { isOpen: false, start: '10:00', end: '14:00' }
      }
    }
  },
  
  // Integration Settings
  integration: {
    domain: 'https://yourwebsite.com',
    allowedOrigins: ['https://yourwebsite.com'],
    
    // Webhook called when booking made
    webhookUrl: 'https://yourapi.com/webhooks/bookings',
    
    // Email notifications
    notifyEmails: ['bookings@yourcompany.com']
  },
  
  // Analytics
  analytics: {
    enabled: true,
    trackingId: 'GA-XXXXXXXXX',
    customEvents: [
      'service_viewed',
      'booking_started',
      'booking_completed'
    ]
  }
};

<!-- Full Page Service Catalog -->
<div id="service-catalog"></div>

<script src="https://widgets.serviceflow-pro.com/sdk/v1/widget.js"></script>
<script>
  ServiceFlowWidget.create('service-catalog', {
    widgetId: 'YOUR-WIDGET-ID',
    type: 'pricebook',
    
    // Event handlers
    onBookingComplete: function(booking) {
      console.log('Booking confirmed:', booking);
      
      // Optional: redirect to thank you page
      window.location.href = '/thank-you?booking=' + booking.id;
    },
    
    onServiceViewed: function(service) {
      // Track which services get the most views
      console.log('Service viewed:', service.name);
    }
  });
</script>

<style>
  #service-catalog {
    width: 100%;
    min-height: 800px;
  }
</style>