{"_id":"@elerahealth/booking-sdk","_rev":"2-eecf0d0b335137b38d10a274372a7512","name":"@elerahealth/booking-sdk","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.0":{"name":"@elerahealth/booking-sdk","version":"1.1.0","keywords":["elera","healthcare","booking","scheduling","appointments"],"author":{"name":"Elera Health"},"license":"MIT","_id":"@elerahealth/booking-sdk@1.1.0","maintainers":[{"name":"elerahealth","email":"aaron@elera.health"}],"homepage":"https://github.com/elerahealth/booking-sdk#readme","bugs":{"url":"https://github.com/elerahealth/booking-sdk/issues"},"dist":{"shasum":"2a9783862d52e3cdd7379d1167062ca394a88520","tarball":"https://registry.npmjs.org/@elerahealth/booking-sdk/-/booking-sdk-1.1.0.tgz","fileCount":14,"integrity":"sha512-6e7+ty00Oy2tj4hGuLNhZ22HerB6Z/cam55AI/VmJkxhKk8vjn2FHYfFUIcfkSUuxhF8Hqs6bhEqx3YFR/zz3g==","signatures":[{"sig":"MEUCICBNUA3HYIlfCZhHesbSe1AsMc6ezZ+09Z2VagAKzpDBAiEA4Pghy/NvWyYSAlHz3DnmVK0fI+k+FX9H5s692EGZig8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":127635},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./pixel":{"types":"./dist/pixel.d.ts","import":"./dist/pixel.mjs","require":"./dist/pixel.js"}},"gitHead":"a105d3eefc64830a8be4b9816911f1dd1baf3c9b","scripts":{"dev":"tsup src/index.ts src/pixel.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts src/pixel.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"elerahealth","email":"aaron@elera.health"},"repository":{"url":"git+https://github.com/elerahealth/booking-sdk.git","type":"git"},"_npmVersion":"11.6.0","description":"Official SDK for integrating Elera Health booking into provider websites with built-in Meta Pixel tracking","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/booking-sdk_1.1.0_1768522135959_0.3930619474152375","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@elerahealth/booking-sdk","version":"1.2.0","description":"Official SDK for integrating Elera Health booking into provider websites with centralized flow control and theming","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./pixel":{"types":"./dist/pixel.d.ts","import":"./dist/pixel.mjs","require":"./dist/pixel.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.mjs","require":"./dist/react.js"},"./widget":{"types":"./dist/widget.d.ts","import":"./dist/widget.mjs","require":"./dist/widget.js"}},"scripts":{"build":"tsup src/index.ts src/pixel.ts src/react.tsx src/widget.ts --format cjs,esm --dts --external react && npm run build:cdn && npm run build:widget-cdn","build:cdn":"tsup src/index.ts --format iife --globalName EleraSDK --outDir dist --minify --no-dts && npm run build:compat","build:widget-cdn":"tsup src/widget.ts --format iife --globalName EleraBookingWidget --outDir dist --minify --no-dts && mv dist/widget.global.js dist/elera-booking-widget.min.js","build:compat":"echo 'window.EleraBooking=EleraSDK.EleraBooking;window.EleraPixel=EleraSDK.EleraPixel;' >> dist/index.global.js && cp dist/index.global.js dist/elera-booking.min.js","dev":"tsup src/index.ts src/pixel.ts src/react.tsx src/widget.ts --format cjs,esm --dts --external react --watch","prepublishOnly":"npm run build"},"keywords":["elera","healthcare","booking","scheduling","appointments","widget","sdk"],"author":{"name":"Elera Health"},"license":"MIT","peerDependencies":{"react":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@types/react":"^18.0.0","react":"^18.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"repository":{"type":"git","url":"git+https://github.com/elerahealth/booking-sdk.git"},"_id":"@elerahealth/booking-sdk@1.2.0","gitHead":"d54cfd350f011ec73009909007e1bc6358ee13e3","bugs":{"url":"https://github.com/elerahealth/booking-sdk/issues"},"homepage":"https://github.com/elerahealth/booking-sdk#readme","_nodeVersion":"22.14.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-CMCJ8U7sMTLLIRCcoBUqD1Eiek6uLgqVQ50WABasBpu8azL+eQh52OVFa/Adhqh3pXc5dvbYf2GCOnWneAwxMg==","shasum":"2a11fc2bde6be72b5696a6bc7a04a16150dd3e63","tarball":"https://registry.npmjs.org/@elerahealth/booking-sdk/-/booking-sdk-1.2.0.tgz","fileCount":29,"unpackedSize":456952,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCWXaundTTB00y0mVLi30R6D9EJa+KSvRBTeqs7JaPPPAIgGR01EwhOU+T92VDwn8cDQNrzX2YygrRFQdExrn3mzJk="}]},"_npmUser":{"name":"elerahealth","email":"aaron@elera.health"},"directories":{},"maintainers":[{"name":"elerahealth","email":"aaron@elera.health"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/booking-sdk_1.2.0_1768598840740_0.5786146245855575"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-16T00:08:55.884Z","modified":"2026-01-16T21:27:21.069Z","1.1.0":"2026-01-16T00:08:56.093Z","1.2.0":"2026-01-16T21:27:20.958Z"},"bugs":{"url":"https://github.com/elerahealth/booking-sdk/issues"},"author":{"name":"Elera Health"},"license":"MIT","homepage":"https://github.com/elerahealth/booking-sdk#readme","keywords":["elera","healthcare","booking","scheduling","appointments","widget","sdk"],"repository":{"type":"git","url":"git+https://github.com/elerahealth/booking-sdk.git"},"description":"Official SDK for integrating Elera Health booking into provider websites with centralized flow control and theming","maintainers":[{"name":"elerahealth","email":"aaron@elera.health"}],"readme":"# @elera/booking-sdk\n\nOfficial SDK for integrating Elera Health scheduling into provider websites.\n\n## What's New in v1.2.0\n\n- **Centralized Flow Control**: Elera now controls the booking steps, days shown, and flow behavior\n- **Theming Support**: Provider websites control colors, fonts, and visual design via CSS variables\n- **React Integration**: `useEleraBooking` hook for React/Next.js apps\n- **Drop-in Widget**: Pre-built widget that works with any website\n\n## Installation\n\n```bash\nnpm install @elera/booking-sdk\n# or\nyarn add @elera/booking-sdk\n# or\npnpm add @elera/booking-sdk\n```\n\n## Quick Start\n\n### Option 1: Drop-in Widget (Easiest - 5 minutes)\n\nJust add the widget to your page and customize with CSS variables:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <style>\n    /* Customize to match your brand */\n    :root {\n      --elera-primary: #FF6B35;           /* Your brand color */\n      --elera-font-family: 'Poppins', sans-serif;\n      --elera-border-radius: 16px;\n    }\n  </style>\n</head>\n<body>\n  <div id=\"booking\"></div>\n  \n  <script src=\"https://cdn.elera.com/elera-booking-widget.min.js\"></script>\n  <script>\n    EleraBookingWidget.mount('#booking', {\n      apiKey: 'elera_your_api_key',\n      onComplete: (booking) => {\n        console.log('Booked!', booking.booking.confirmationId);\n      }\n    });\n  </script>\n</body>\n</html>\n```\n\n### Option 2: React Integration\n\n```tsx\nimport { EleraBookingProvider, useEleraBooking } from '@elera/booking-sdk/react';\n\nfunction App() {\n  return (\n    <EleraBookingProvider \n      apiKey=\"elera_your_api_key\"\n      onComplete={(booking) => console.log('Booked!', booking)}\n    >\n      <BookingFlow />\n    </EleraBookingProvider>\n  );\n}\n\nfunction BookingFlow() {\n  const { \n    steps,           // Steps controlled by Elera\n    currentStep,     // Current step in the flow\n    config,          // Flow configuration\n    theme,           // Theme values for styling\n    nextStep,\n    prevStep,\n    selectDate,\n    selectTime,\n    bookAppointment,\n    getCopyText,     // Get customizable text\n  } = useEleraBooking();\n\n  return (\n    <div style={{ fontFamily: theme.fontFamily }}>\n      {/* Your custom UI using Elera's flow */}\n      <StepIndicator steps={steps} current={currentStep} />\n      \n      {currentStep?.id === 'date' && (\n        <YourDatePicker \n          daysToShow={config?.days_to_show} \n          onSelect={selectDate}\n        />\n      )}\n      \n      {/* ... other steps */}\n      \n      <button onClick={nextStep}>\n        {getCopyText('nextButtonText', 'Continue')}\n      </button>\n    </div>\n  );\n}\n```\n\n### Option 3: Headless SDK (Full Control)\n\n```typescript\nimport { EleraBooking } from '@elera/booking-sdk';\n\nconst booking = new EleraBooking('elera_your_api_key', {\n  theme: {\n    primaryColor: '#FF6B35',\n    fontFamily: 'Poppins, sans-serif'\n  }\n});\n\n// Initialize and get configuration\nawait booking.initialize();\n\n// Get centrally-controlled flow configuration\nconst config = booking.getBookingFlowConfig();\nconsole.log('Steps:', config.steps);\nconsole.log('Days to show:', config.days_to_show);\nconsole.log('Insurance enabled:', config.insurance_step_enabled);\n\n// Get enabled steps in order\nconst steps = booking.getEnabledSteps();\n// Returns: [{id: 'date', ...}, {id: 'time', ...}, ...]\n\n// Get customizable copy text\nconst ctaText = booking.getCopyText('ctaText', 'Book Now');\n\n// Check feature flags\nif (booking.isFeatureEnabled('showPricing')) {\n  // Show pricing\n}\n\n// Get availability\nconst availability = await booking.getAvailability({\n  startDate: '2026-01-15',\n  endDate: '2026-01-30'\n});\n\n// Book appointment\nconst result = await booking.bookAppointment({\n  date: '2026-01-20',\n  time: '10:00',\n  patient: {\n    firstName: 'John',\n    lastName: 'Doe',\n    email: 'john@example.com',\n    phone: '555-123-4567'\n  }\n});\n```\n\n## How It Works\n\n### Who Controls What\n\n| Aspect | Controlled By | How |\n|--------|---------------|-----|\n| Steps in flow | **Elera** (central) | `config.steps` |\n| Days to show | **Elera** (central) | `config.days_to_show` |\n| Insurance step | **Elera** (central) | `config.insurance_step_enabled` |\n| Button text | **Elera** (central) | `config.copy.ctaText` |\n| Colors | **Provider** (local) | CSS variables or theme config |\n| Fonts | **Provider** (local) | CSS variables or theme config |\n| Visual design | **Provider** (local) | Your own CSS/components |\n\n### Benefits\n\n- **Elera updates flow** → All provider sites get new behavior automatically\n- **Add insurance step** → Flip a switch, appears on all sites\n- **Change copy/text** → Updates everywhere instantly\n- **Provider keeps brand** → Their colors, fonts, design stay intact\n\n## CSS Variables Reference\n\nOverride these to match your brand:\n\n```css\n:root {\n  /* Colors */\n  --elera-primary: #10b981;           /* Main brand color */\n  --elera-primary-hover: #059669;     /* Hover state */\n  --elera-text: #1f2937;              /* Text color */\n  --elera-text-muted: #6b7280;        /* Secondary text */\n  --elera-background: #ffffff;         /* Background */\n  --elera-surface: #f9fafb;           /* Card/surface background */\n  --elera-border: #e5e7eb;            /* Borders */\n  --elera-error: #ef4444;             /* Error states */\n  --elera-success: #22c55e;           /* Success states */\n  \n  /* Typography */\n  --elera-font-family: system-ui, sans-serif;\n  \n  /* Shapes */\n  --elera-border-radius: 12px;        /* Cards, containers */\n  --elera-button-radius: 8px;         /* Buttons */\n  --elera-input-radius: 8px;          /* Inputs */\n}\n```\n\n## API Reference\n\n### EleraBooking Class\n\n#### Constructor\n\n```typescript\nnew EleraBooking(apiKey: string, config?: EleraBookingConfig)\n```\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `apiKey` | `string` | Your provider API key (starts with `elera_`) |\n| `config.baseUrl` | `string` | Override API URL (for testing) |\n| `config.timeout` | `number` | Request timeout in ms (default: 30000) |\n| `config.theme` | `EleraTheme \\| 'inherit' \\| 'none'` | Theme configuration |\n| `config.enablePixel` | `boolean` | Enable Meta Pixel tracking (default: true) |\n| `config.onEvent` | `function` | Event callback for analytics |\n\n#### Methods\n\n##### `initialize(): Promise<ProviderContext>`\nInitialize the SDK and fetch provider/flow configuration.\n\n##### `getBookingFlowConfig(): BookingFlowConfig | undefined`\nGet the centrally-controlled flow configuration.\n\n##### `getEnabledSteps(): BookingFlowStep[]`\nGet enabled steps sorted by order.\n\n##### `getCopyText(key: string, defaultValue?: string): string`\nGet customizable copy text with fallback.\n\n##### `isFeatureEnabled(feature: string): boolean`\nCheck if a feature flag is enabled.\n\n##### `getTheme(): EleraTheme`\nGet resolved theme (merged with defaults).\n\n##### `applyThemeToElement(element: HTMLElement): void`\nApply theme as CSS variables to an element.\n\n##### `getThemeCSS(): string`\nGenerate CSS string with all theme variables.\n\n##### `getAvailability(options?): Promise<AvailabilityResponse>`\nGet available time slots.\n\n##### `bookAppointment(options): Promise<BookingResponse>`\nBook an appointment.\n\n##### `trackSlotSelected(date: string, time: string): string`\nTrack when a slot is selected.\n\n### BookingFlowConfig\n\n```typescript\ninterface BookingFlowConfig {\n  steps: BookingFlowStep[];           // Flow steps\n  days_to_show: number;               // Days in calendar (default: 14)\n  max_days_out: number;               // Max booking horizon (default: 60)\n  time_slot_interval_minutes: number; // Slot interval (default: 30)\n  insurance_step_enabled: boolean;    // Show insurance step\n  insurance_step_required: boolean;   // Require insurance\n  intake_form_enabled: boolean;       // Show intake form\n  copy: BookingFlowCopy;              // Customizable text\n  features: BookingFlowFeatures;      // Feature flags\n}\n```\n\n### BookingFlowStep\n\n```typescript\ninterface BookingFlowStep {\n  id: string;           // 'date' | 'time' | 'insurance' | 'contact' | 'confirm'\n  title: string;        // Display title\n  description?: string; // Optional description\n  enabled: boolean;     // Is step enabled\n  order: number;        // Order in flow (1-based)\n  required?: boolean;   // Is step required\n}\n```\n\n### EleraTheme\n\n```typescript\ninterface EleraTheme {\n  primaryColor?: string;\n  primaryHoverColor?: string;\n  textColor?: string;\n  textMutedColor?: string;\n  backgroundColor?: string;\n  surfaceColor?: string;\n  borderColor?: string;\n  errorColor?: string;\n  successColor?: string;\n  fontFamily?: string;\n  borderRadius?: string;\n  buttonRadius?: string;\n  inputRadius?: string;\n}\n```\n\n## React Hooks\n\n### useEleraBooking\n\nMain hook for booking state and actions:\n\n```tsx\nconst {\n  // State\n  sdk,                // SDK instance\n  providerContext,    // Provider metadata\n  config,             // Flow configuration\n  steps,              // Enabled steps\n  currentStep,        // Current step\n  currentStepIndex,   // Current step index\n  theme,              // Resolved theme\n  isLoading,          // Loading state\n  error,              // Error if any\n  isInitialized,      // SDK initialized\n  availability,       // Available slots\n  selectedDate,       // Selected date\n  selectedTime,       // Selected time\n  patientInfo,        // Patient info collected\n  bookingResult,      // Booking result\n  isBooking,          // Booking in progress\n  \n  // Actions\n  goToStep,           // Go to step by id\n  nextStep,           // Next step\n  prevStep,           // Previous step\n  canProceed,         // Can proceed to next\n  selectDate,         // Select date and fetch availability\n  selectTime,         // Select time slot\n  updatePatientInfo,  // Update patient info\n  bookAppointment,    // Complete booking\n  reset,              // Reset flow\n  getCopyText,        // Get copy text\n  isFeatureEnabled,   // Check feature flag\n  fetchAvailability,  // Fetch availability\n} = useEleraBooking();\n```\n\n### Helper Hooks\n\n```tsx\n// Get just the theme\nconst theme = useEleraTheme();\n\n// Get booking flow config\nconst config = useBookingFlowConfig();\n\n// Get step navigation\nconst { currentStep, nextStep, prevStep, isLastStep } = useStepNavigation();\n```\n\n## Widget Options\n\n```typescript\ninterface WidgetOptions {\n  apiKey: string;                                    // Required\n  config?: EleraBookingConfig;                       // SDK config\n  onComplete?: (booking: BookingResponse) => void;  // Success callback\n  onError?: (error: Error) => void;                 // Error callback\n  onStepChange?: (step: BookingFlowStep) => void;   // Step change callback\n  className?: string;                               // Custom CSS class\n}\n```\n\n## Analytics & Tracking\n\nThe SDK includes built-in Meta Pixel tracking:\n\n| Event | When Fired | Data Included |\n|-------|------------|---------------|\n| `PageView` | After `initialize()` | Provider context |\n| `ViewContent` | After `initialize()` | Provider, specialty, state |\n| `Schedule` | When slot selected | Date, time, provider |\n| `Lead` | When booking completes | Appointment value, confirmation |\n\nEvents are automatically deduplicated between client-side Pixel and server-side Conversions API.\n\n## Getting Your API Key\n\n1. Log in to your Elera Health provider dashboard\n2. Go to Settings → API Keys\n3. Click \"Generate New Key\"\n4. Copy the key (starts with `elera_`)\n\n## Support\n\n- Documentation: https://docs.elera.com/sdk\n- Issues: https://github.com/elerahealth/booking-sdk/issues\n- Email: support@elera.com\n","readmeFilename":"README.md"}