📧 Lead Capture Widget

// Create a Lead Capture Widget
const widgetConfig = {
  type: 'lead',
  name: 'Contact Us Form',
  
  // Branding - Match your website
  branding: {
    primaryColor: '#52c41a',     // Your brand green
    secondaryColor: '#1890ff',   // Your brand blue
    fontFamily: 'Inter, sans-serif',
    logo: 'https://yoursite.com/logo.png'
  },
  
  // Lead Form Fields
  leadSettings: {
    title: 'Get a Free Quote Today!',
    subtitle: 'Tell us about your project and we\'ll get back to you within 24 hours',
    
    // Standard fields are always included
    // Add custom questions here
    questions: [
      {
        id: 'project_type',
        question: 'What type of project?',
        type: 'select',
        required: true,
        options: [
          'Kitchen Remodel',
          'Bathroom Renovation', 
          'Addition/ADU',
          'Garage/Carport',
          'Other'
        ],
        showAt: 'with-form'  // Show with main form
      },
      {
        id: 'timeline',
        question: 'When would you like to start?',
        type: 'radio',
        required: true,
        options: [
          'ASAP (within 1 month)',
          'Within 3 months',
          'Within 6 months',
          'Just planning/quotes'
        ],
        showAt: 'with-form'
      },
      {
        id: 'budget',
        question: 'What is your approximate budget?',
        type: 'select',
        required: false,
        options: [
          'Under $10,000',
          '$10,000 - $25,000',
          '$25,000 - $50,000',
          '$50,000 - $100,000',
          'Over $100,000'
        ],
        showAt: 'post-form'  // Show after main form
      }
    ],
    
    // Success message shown after submission
    successMessage: 'Thanks! We\'ll contact you within 24 hours.',
    
    // Redirect after submission (optional)
    redirectUrl: 'https://yoursite.com/thank-you',
    redirectDelay: 3000  // Wait 3 seconds before redirect
  },
  
  // Notification Settings
  integration: {
    // Email notifications
    notifyEmails: [
      'sales@yourcompany.com',
      'owner@yourcompany.com'
    ],
    
    // Webhook for CRM integration
    webhookUrl: 'https://yourapi.com/webhooks/leads',
    
    // Which domains can embed this widget
    allowedOrigins: ['https://yourwebsite.com']
  },
  
  // Analytics
  analytics: {
    enabled: true,
    trackingId: 'GA-XXXXXXXXX',
    customEvents: ['form_viewed', 'form_submitted']
  }
};

<!-- ServiceFlow Lead Capture Widget -->
<div id="lead-widget-container"></div>

<script src="https://widgets.serviceflow-pro.com/sdk/v1/widget.js"></script>
<script>
  ServiceFlowWidget.create('lead-widget-container', {
    widgetId: 'YOUR-WIDGET-ID',
    type: 'lead'
  });
</script>

<!-- Trigger Button -->
<button id="show-lead-form" class="btn-contact">
  Get Free Quote 📧
</button>

<!-- Modal Container -->
<div id="lead-modal" class="modal">
  <div class="modal-content">
    <span class="close-modal">×</span>
    <div id="lead-widget-container"></div>
  </div>
</div>

<script>
  // Load widget when button clicked
  document.getElementById('show-lead-form').addEventListener('click', function() {
    document.getElementById('lead-modal').style.display = 'block';
    
    // Initialize widget if not already loaded
    if (!window.leadWidgetLoaded) {
      ServiceFlowWidget.create('lead-widget-container', {
        widgetId: 'YOUR-WIDGET-ID',
        type: 'lead',
        onSubmit: function(data) {
          console.log('Lead submitted:', data);
          // Close modal after submission
          setTimeout(() => {
            document.getElementById('lead-modal').style.display = 'none';
          }, 2000);
        }
      });
      window.leadWidgetLoaded = true;
    }
  });
  
  // Close modal when X clicked
  document.querySelector('.close-modal').addEventListener('click', function() {
    document.getElementById('lead-modal').style.display = 'none';
  });
</script>

<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    position: relative;
  }
  
  .close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
  }
  
  .close-modal:hover {
    color: #333;
  }
</style>