@nuitee/booking-widget 1.0.6 → 1.0.8

package/README.md

@@ -67,7 +67,7 @@ const widget = new BookingWidget({
     primary: '#3b82f6',
     primaryText: '#ffffff'
   },
-  onOpen: () => console.log('Widget opened'),
+  onOpen: () => console.log('widgetOpened'),
   onClose: () => console.log('Widget closed'),
   onComplete: (bookingData) => console.log('Booking completed', bookingData)
 });
@@ -94,15 +94,15 @@ widget.open();
 No bundler: load the script and CSS from the CDN, then create the widget.
 
 ```html
-<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.6/dist/booking-widget.css">
-<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.6/dist/booking-widget-standalone.js"></script>
+<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.8/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.8/dist/booking-widget-standalone.js"></script>
 
 <div id="booking-widget-container"></div>
 
 <script>
   const widget = new BookingWidget({
     containerId: 'booking-widget-container',
-    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.6/dist/booking-widget.css',
+    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.8/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -20,6 +20,11 @@ const DEFAULT_ROOMS = [];
 
 const DEFAULT_RATES = [];
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) has a chance to wrap window.fetch for session recording. PostHog's wrapped
+// fetch drops non-standard request headers such as 'Source', breaking API auth.
+const _fetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 /**
  * Returns date as YYYY-MM-DD using local date (no timezone shift).
  * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
@@ -237,7 +242,7 @@ function createBookingApi(config = {}) {
     if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
     const options = { method, headers };
     if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
-    const res = await fetch(url, options);
+    const res = await _fetch(url, options);
     if (!res.ok) {
       let body;
       try { body = await res.json(); } catch (_) {}
@@ -294,7 +299,7 @@ function createBookingApi(config = {}) {
     try {
       const getOpts = { method: 'GET', headers: { 'Source': 'booking_engine' } };
       if (propFullUrl.includes('ngrok')) getOpts.headers['ngrok-skip-browser-warning'] = 'true';
-      const propRes = await fetch(propFullUrl, getOpts);
+      const propRes = await _fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
         propertyRooms = propData?.rooms ?? {};
@@ -691,7 +696,7 @@ async function decryptPropertyId(options = {}) {
   if (!propertyKey) return null;
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
@@ -718,7 +723,7 @@ async function fetchBookingEnginePref(options = {}) {
   }
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });
@@ -872,8 +877,9 @@ if (typeof window !== 'undefined') {
     var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
     var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
     if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
-    styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
-    styles['--card-solid'] = styles['--card'];
+    var _cardBase = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+    styles['--card'] = c.card ? _cardBase + '40' : _cardBase;
+    styles['--card-solid'] = _cardBase;
     if (bgHsl) {
       styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
       styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
@@ -936,6 +942,8 @@ if (typeof window !== 'undefined') {
         mode: options.mode || null,
         bookingApi: options.bookingApi || null,
         cssUrl: options.cssUrl || null,
+        posthogKey: options.posthogKey || null,
+        posthogHost: options.posthogHost || 'https://us.i.posthog.com',
         // Color customization: CONFIG defaults from load-config, installer colors override
         colors: (function () {
           const dc = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_DEFAULT_COLORS__) ? window.__BOOKING_WIDGET_DEFAULT_COLORS__ : {};
@@ -1046,6 +1054,25 @@ if (typeof window !== 'undefined') {
       return this.STEPS.findIndex(s => s.key === key);
     }
 
+    _capture(eventName, properties) {
+      if (typeof window !== 'undefined' && window.posthog && typeof window.posthog.capture === 'function') {
+        try {
+          const mode = this.options.mode === 'sandbox' ? 'sandbox' : 'live';
+          const propertyKey = this.options.propertyKey != null ? String(this.options.propertyKey) : undefined;
+          const propertyId = this.options.propertyId != null && this.options.propertyId !== '' ? String(this.options.propertyId) : undefined;
+          window.posthog.capture(eventName, { ...(properties || {}), mode, propertyKey, propertyId });
+        } catch (e) { /* noop */ }
+      }
+    }
+
+    _identify() {
+      if (typeof window !== 'undefined' && this.options.propertyKey && window.posthog && typeof window.posthog.identify === 'function') {
+        try {
+          window.posthog.identify(String(this.options.propertyKey).trim());
+        } catch (e) { /* noop */ }
+      }
+    }
+
     open() {
       if (!this.container) this.init();
       if (!this.overlay || !this.widget) return; // container element not found
@@ -1056,6 +1083,7 @@ if (typeof window !== 'undefined') {
         this._fetchRuntimeConfig();
       }
       this.render();
+      this._capture('widgetOpened');
       if (this.options.onOpen) this.options.onOpen();
     }
 
@@ -1112,6 +1140,12 @@ if (typeof window !== 'undefined') {
         this.bookingApi.fetchRooms(params).then((rooms) => {
           this.ROOMS = Array.isArray(rooms) ? rooms : [];
           this.loadingRooms = false;
+          this._capture('search', {
+            checkIn: this.state.checkIn && this.state.checkIn.toISOString ? this.state.checkIn.toISOString() : undefined,
+            checkOut: this.state.checkOut && this.state.checkOut.toISOString ? this.state.checkOut.toISOString() : undefined,
+            rooms: this.state.rooms,
+            occupancies: this.state.occupancies,
+          });
           this.render();
         }).catch((err) => {
           this.apiError = err.message || 'Failed to load rooms';
@@ -1196,10 +1230,12 @@ if (typeof window !== 'undefined') {
       const cacheKey = isSandbox ? key + ':sandbox' : key;
 
       if (__bwConfigCache[cacheKey]) {
-        this._applyApiColors(__bwConfigCache[cacheKey]);
+        const cached = __bwConfigCache[cacheKey];
+        this._applyApiColors(cached);
         this._configState = 'loaded';
         this.applyColors();
-        return Promise.resolve(__bwConfigCache[cacheKey]);
+        this._initPosthog(cached._posthogKey || '');
+        return Promise.resolve(cached);
       }
 
       this._configState = 'loading';
@@ -1218,10 +1254,12 @@ if (typeof window !== 'undefined') {
           if (data.primaryColor)     apiColors.primary     = data.primaryColor;
           if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
           if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+          apiColors._posthogKey = ((data.posthogKey || data.POSTHOG_KEY) ?? '').trim();
           __bwConfigCache[cacheKey] = apiColors;
           self._applyApiColors(apiColors);
           self._configState = 'loaded';
           self.applyColors();
+          self._initPosthog(apiColors._posthogKey);
           self.render();
           return apiColors;
         })
@@ -1234,6 +1272,26 @@ if (typeof window !== 'undefined') {
       return this._configPromise;
     }
 
+    _initPosthog(configKey) {
+      const key = this.options.posthogKey || configKey || '';
+      if (!key || typeof window === 'undefined' || typeof document === 'undefined') return;
+      if (this._posthogInited) return;
+      try {
+        // Inject the posthog loader snippet if posthog has not been loaded yet.
+        // This makes the standalone bundle self-sufficient — no CDN <script> needed from the host.
+        if (!window.posthog || !window.posthog.__SV) {
+          !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split('.');2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement('script')).type='text/javascript',p.async=!0,p.src=s.api_host.replace('.i.posthog.com','-assets.i.posthog.com')+'/static/array.js',(r=t.getElementsByTagName('script')[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a='posthog',u.people=u.people||[],u.toString=function(t){var e='posthog';return'posthog'!==a&&(e+='.'+a),t||(e+=' (stub)'),e},u.people.toString=function(){return u.toString(1)+' (stub)'},o='capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId setPersonPropertiesForFlags'.split(' '),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+        }
+        window.posthog.init(key, { api_host: this.options.posthogHost || 'https://us.i.posthog.com' });
+        this._posthogInited = true;
+        this._identify();
+        this._capture('widgetLoaded');
+        if (this.overlay && this.overlay.classList.contains('active')) {
+          this._capture('widgetOpened');
+        }
+      } catch (e) { /* noop */ }
+    }
+
     _retryConfigFetch() {
       this._configState = 'idle';
       this._configError = null;
@@ -1683,7 +1741,9 @@ if (typeof window !== 'undefined') {
       const grid = this.widget.querySelector('.room-grid');
       const scrollLeft = grid ? grid.scrollLeft : 0;
       if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
-      this.state.selectedRoom = this.ROOMS.find(r => r.id == id || String(r.id) === String(id)) || null;
+      const room = this.ROOMS.find(r => r.id == id || String(r.id) === String(id)) || null;
+      this.state.selectedRoom = room;
+      this._capture('selectedRoom', { roomId: id, roomName: room && room.name });
       this.render();
       const restoreScroll = () => {
         const newGrid = this.widget.querySelector('.room-grid');
@@ -1743,6 +1803,7 @@ if (typeof window !== 'undefined') {
 
     selectRate(id) {
       this.state.selectedRate = this.RATES.find(r => r.id == id || String(r.id) === String(id)) || null;
+      this._capture('selectedRate', { rateId: id });
       this.render();
     }
 
@@ -1975,6 +2036,16 @@ if (typeof window !== 'undefined') {
           .then((res) => {
             this.confirmationCode = (res && (res.confirmationCode != null ? res.confirmationCode : res.confirmation_code)) || ('LX' + Date.now().toString(36).toUpperCase().slice(-6));
             this.state.step = 'confirmation';
+            this._capture('booked', {
+              confirmationCode: this.confirmationCode,
+              guest: this.state.guest,
+              checkIn: this.state.checkIn && this.state.checkIn.toISOString ? this.state.checkIn.toISOString() : undefined,
+              checkOut: this.state.checkOut && this.state.checkOut.toISOString ? this.state.checkOut.toISOString() : undefined,
+              roomName: this.state.selectedRoom && this.state.selectedRoom.name,
+              roomId: this.state.selectedRoom && this.state.selectedRoom.id,
+              rateId: this.state.selectedRate && this.state.selectedRate.id,
+              currency: this.state.selectedRoom && this.state.selectedRoom.currency,
+            });
             this.render();
           })
           .catch((err) => {
@@ -2018,6 +2089,18 @@ if (typeof window !== 'undefined') {
             self.confirmationStatus = status || self.confirmationStatus || 'pending';
             if (status === 'confirmed') {
               self.confirmationDetails = data;
+              self._capture('booked', {
+                confirmationCode: data && (data.confirmationCode ?? data.confirmation_code ?? data.bookingId ?? data.booking_id),
+                bookingId: data && (data.bookingId ?? data.booking_id),
+                guest: self.state.guest,
+                checkIn: self.state.checkIn && self.state.checkIn.toISOString ? self.state.checkIn.toISOString() : undefined,
+                checkOut: self.state.checkOut && self.state.checkOut.toISOString ? self.state.checkOut.toISOString() : undefined,
+                roomName: self.state.selectedRoom && self.state.selectedRoom.name,
+                roomId: self.state.selectedRoom && self.state.selectedRoom.id,
+                rateId: self.state.selectedRate && self.state.selectedRate.id,
+                totalAmount: data && (data.totalAmount ?? data.total_amount),
+                currency: (data && data.currency) || (self.state.selectedRoom && self.state.selectedRoom.currency),
+              });
               self.confirmationPolling = false;
               self.render();
               return;

package/dist/booking-widget.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/booking-widget.js

@@ -83,8 +83,9 @@ function deriveWidgetStyles(c) {
   var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
   var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
   if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
-  styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
-  styles['--card-solid'] = styles['--card'];
+  var _cardBase = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+  styles['--card'] = c.card ? _cardBase + '40' : _cardBase;
+  styles['--card-solid'] = _cardBase;
   if (bgHsl) {
     styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
     styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
@@ -160,6 +161,10 @@ class BookingWidget {
       s3BaseUrl: options.s3BaseUrl || null,
       /** Base URL for confirmation status polling (same as API_BASE_URL). Default https://ai.thehotelplanet.com */
       confirmationBaseUrl: options.confirmationBaseUrl || 'https://ai.thehotelplanet.com',
+      /** PostHog: project API key (host page must load posthog-js and set window.posthog). */
+      posthogKey: options.posthogKey || null,
+      /** PostHog: API host (e.g. https://us.i.posthog.com). */
+      posthogHost: options.posthogHost || 'https://us.i.posthog.com',
       // Color customization: CONFIG defaults from load-config, installer colors override
       colors: (function () {
         const dc = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_DEFAULT_COLORS__) ? window.__BOOKING_WIDGET_DEFAULT_COLORS__ : {};
@@ -242,6 +247,25 @@ class BookingWidget {
     this.widget = null;
   }
 
+  _capture(eventName, properties) {
+    if (typeof window !== 'undefined' && window.posthog && typeof window.posthog.capture === 'function') {
+      try {
+        const mode = this.options.mode === 'sandbox' ? 'sandbox' : 'live';
+        const propertyKey = this.options.propertyKey != null ? String(this.options.propertyKey) : undefined;
+        const propertyId = this.options.propertyId != null && this.options.propertyId !== '' ? String(this.options.propertyId) : undefined;
+        window.posthog.capture(eventName, { ...(properties || {}), mode, propertyKey, propertyId });
+      } catch (e) { /* noop */ }
+    }
+  }
+
+  _identify() {
+    if (typeof window !== 'undefined' && this.options.propertyKey && window.posthog && typeof window.posthog.identify === 'function') {
+      try {
+        window.posthog.identify(String(this.options.propertyKey).trim());
+      } catch (e) { /* noop */ }
+    }
+  }
+
   // ===== Helpers =====
   getNights() {
     if (!this.state.checkIn || !this.state.checkOut) return 0;
@@ -305,6 +329,7 @@ class BookingWidget {
       this._fetchRuntimeConfig();
     }
     this.render();
+    this._capture('widgetOpened');
     if (this.options.onOpen) this.options.onOpen();
   }
 
@@ -374,6 +399,12 @@ class BookingWidget {
         this.bookingApi.fetchRooms(params).then((rooms) => {
           this.ROOMS = Array.isArray(rooms) ? rooms : [];
           this.loadingRooms = false;
+          this._capture('search', {
+            checkIn: this.state.checkIn && this.state.checkIn.toISOString ? this.state.checkIn.toISOString() : undefined,
+            checkOut: this.state.checkOut && this.state.checkOut.toISOString ? this.state.checkOut.toISOString() : undefined,
+            rooms: this.state.rooms,
+            occupancies: this.state.occupancies,
+          });
           this.render();
         }).catch((err) => {
           this.apiError = err.message || 'Failed to load rooms';
@@ -473,10 +504,12 @@ class BookingWidget {
     const cacheKey = isSandbox ? key + ':sandbox' : key;
 
     if (__bwConfigCache[cacheKey]) {
-      this._applyApiColors(__bwConfigCache[cacheKey]);
+      const cached = __bwConfigCache[cacheKey];
+      this._applyApiColors(cached);
       this._configState = 'loaded';
       this.applyColors();
-      return Promise.resolve(__bwConfigCache[cacheKey]);
+      this._initPosthog(cached._posthogKey || '');
+      return Promise.resolve(cached);
     }
 
     this._configState = 'loading';
@@ -495,10 +528,12 @@ class BookingWidget {
         if (data.primaryColor)     apiColors.primary     = data.primaryColor;
         if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
         if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+        apiColors._posthogKey = ((data.posthogKey || data.POSTHOG_KEY) ?? '').trim();
         __bwConfigCache[cacheKey] = apiColors;
         self._applyApiColors(apiColors);
         self._configState = 'loaded';
         self.applyColors();
+        self._initPosthog(apiColors._posthogKey);
         self.render();
         return apiColors;
       })
@@ -511,6 +546,28 @@ class BookingWidget {
     return this._configPromise;
   }
 
+  _initPosthog(configKey) {
+    const key = this.options.posthogKey || configKey || '';
+    if (!key || typeof window === 'undefined' || typeof document === 'undefined') return;
+    if (this._posthogInited) return;
+    try {
+      // Inject the posthog loader snippet if posthog has not been loaded yet.
+      // This makes the standalone version self-sufficient — no CDN <script> needed from the host.
+      if (!window.posthog || !window.posthog.__SV) {
+        /* eslint-disable */
+        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split('.');2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement('script')).type='text/javascript',p.async=!0,p.src=s.api_host.replace('.i.posthog.com','-assets.i.posthog.com')+'/static/array.js',(r=t.getElementsByTagName('script')[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a='posthog',u.people=u.people||[],u.toString=function(t){var e='posthog';return'posthog'!==a&&(e+='.'+a),t||(e+=' (stub)'),e},u.people.toString=function(){return u.toString(1)+' (stub)'},o='capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId setPersonPropertiesForFlags'.split(' '),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+        /* eslint-enable */
+      }
+      window.posthog.init(key, { api_host: this.options.posthogHost || 'https://us.i.posthog.com' });
+      this._posthogInited = true;
+      this._identify();
+      this._capture('widgetLoaded');
+      if (this.overlay && this.overlay.classList.contains('active')) {
+        this._capture('widgetOpened');
+      }
+    } catch (e) { /* noop */ }
+  }
+
   injectCSS() {
     if (!document.getElementById('booking-widget-styles')) {
       const link = document.createElement('link');
@@ -955,7 +1012,9 @@ class BookingWidget {
     const grid = this.widget.querySelector('.room-grid');
     const scrollLeft = grid ? grid.scrollLeft : 0;
     if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
-    this.state.selectedRoom = this.ROOMS.find(r => r.id == id || String(r.id) === String(id)) || null;
+    const room = this.ROOMS.find(r => r.id == id || String(r.id) === String(id)) || null;
+    this.state.selectedRoom = room;
+    this._capture('selectedRoom', { roomId: id, roomName: room && room.name });
     this.render();
     const restoreScroll = () => {
       const newGrid = this.widget.querySelector('.room-grid');
@@ -1049,6 +1108,7 @@ class BookingWidget {
 
   selectRate(id) {
     this.state.selectedRate = this.RATES.find(r => r.id == id || String(r.id) === String(id)) || null;
+    this._capture('selectedRate', { rateId: id });
     this.render();
   }
 
@@ -1306,6 +1366,16 @@ class BookingWidget {
           const code = res && (res.confirmationCode != null ? res.confirmationCode : res.confirmation_code);
           this.confirmationCode = code || ('LX' + Date.now().toString(36).toUpperCase().slice(-6));
           this.state.step = 'confirmation';
+          this._capture('booked', {
+            confirmationCode: this.confirmationCode,
+            guest: this.state.guest,
+            checkIn: this.state.checkIn && this.state.checkIn.toISOString ? this.state.checkIn.toISOString() : undefined,
+            checkOut: this.state.checkOut && this.state.checkOut.toISOString ? this.state.checkOut.toISOString() : undefined,
+            roomName: this.state.selectedRoom && this.state.selectedRoom.name,
+            roomId: this.state.selectedRoom && this.state.selectedRoom.id,
+            rateId: this.state.selectedRate && this.state.selectedRate.id,
+            currency: this.state.selectedRoom && this.state.selectedRoom.currency,
+          });
           this.render();
         })
         .catch((err) => {
@@ -1431,6 +1501,18 @@ class BookingWidget {
         this.confirmationStatus = status || this.confirmationStatus || 'pending';
         if (status === 'confirmed') {
           this.confirmationDetails = data;
+          this._capture('booked', {
+            confirmationCode: data?.confirmationCode ?? data?.confirmation_code ?? data?.bookingId ?? data?.booking_id,
+            bookingId: data?.bookingId ?? data?.booking_id,
+            guest: this.state.guest,
+            checkIn: this.state.checkIn && this.state.checkIn.toISOString ? this.state.checkIn.toISOString() : undefined,
+            checkOut: this.state.checkOut && this.state.checkOut.toISOString ? this.state.checkOut.toISOString() : undefined,
+            roomName: this.state.selectedRoom && this.state.selectedRoom.name,
+            roomId: this.state.selectedRoom && this.state.selectedRoom.id,
+            rateId: this.state.selectedRate && this.state.selectedRate.id,
+            totalAmount: data?.totalAmount ?? data?.total_amount,
+            currency: data?.currency || (this.state.selectedRoom && this.state.selectedRoom.currency),
+          });
           this.confirmationPolling = false;
           this.render();
           return;

package/dist/core/booking-api.js

@@ -19,6 +19,11 @@ const DEFAULT_ROOMS = [];
 
 const DEFAULT_RATES = [];
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) has a chance to wrap window.fetch for session recording. PostHog's wrapped
+// fetch drops non-standard request headers such as 'Source', breaking API auth.
+const _fetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 /**
  * Returns date as YYYY-MM-DD using local date (no timezone shift).
  * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
@@ -236,7 +241,7 @@ function createBookingApi(config = {}) {
     if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
     const options = { method, headers };
     if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
-    const res = await fetch(url, options);
+    const res = await _fetch(url, options);
     if (!res.ok) {
       let body;
       try { body = await res.json(); } catch (_) {}
@@ -293,7 +298,7 @@ function createBookingApi(config = {}) {
     try {
       const getOpts = { method: 'GET', headers: { 'Source': 'booking_engine' } };
       if (propFullUrl.includes('ngrok')) getOpts.headers['ngrok-skip-browser-warning'] = 'true';
-      const propRes = await fetch(propFullUrl, getOpts);
+      const propRes = await _fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
         propertyRooms = propData?.rooms ?? {};
@@ -690,7 +695,7 @@ async function decryptPropertyId(options = {}) {
   if (!propertyKey) return null;
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
@@ -717,7 +722,7 @@ async function fetchBookingEnginePref(options = {}) {
   }
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });

package/dist/core/color-utils.js

@@ -73,7 +73,7 @@ export function deriveWidgetStyles(c) {
   if (primaryRgb) styles['--primary-rgb'] = `${primaryRgb[0]}, ${primaryRgb[1]}, ${primaryRgb[2]}`;
 
   if (cardExplicit) {
-    styles['--card'] = cardExplicit + "40";
+    styles['--card'] = cardExplicit + '40';
     styles['--card-solid'] = cardExplicit;
   } else if (bgHsl) {
     const cardVal = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 2)}%)`;

package/dist/core/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/react/BookingWidget.jsx

@@ -5,6 +5,12 @@ import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
 import { fetchRuntimeConfig } from '../utils/config-service.js';
+import { init as initAnalytics, capture as captureEvent, identify as identifyAnalytics } from '../utils/analytics.js';
+
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) wraps window.fetch for session recording. The wrapped version drops
+// non-standard request headers such as 'Source'.
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -45,6 +51,10 @@ const BookingWidget = ({
   createPaymentIntent: createPaymentIntentProp = null,
   /** Stripe: deprecated (booking completion is fetched from confirmation endpoint instead). */
   onBookingComplete: onBookingCompleteProp = null,
+  /** PostHog: optional override for analytics key (defaults to VITE_POSTHOG_KEY). */
+  posthogKey = '',
+  /** PostHog: optional override for API host (defaults to VITE_POSTHOG_HOST). */
+  posthogHost = '',
 }) => {
   const stripePublishableKey = stripePublishableKeyProp || STRIPE_PUBLISHABLE_KEY;
   const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
@@ -59,7 +69,7 @@ const BookingWidget = ({
       const url = effectivePaymentIntentUrl + (isSandbox ? '?sandbox=true' : '');
       const headers = { 'Content-Type': 'application/json', 'Source': 'booking_engine' };
       if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-      const res = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
+      const res = await _nativeFetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
       if (!res.ok) throw new Error(await res.text());
       const data = await res.json();
       const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -134,9 +144,26 @@ const BookingWidget = ({
     return null;
   }, [bookingApiProp, effectiveApiBaseUrl, effectiveAvailabilityBaseUrl, effectivePropertyBaseUrl, effectiveS3BaseUrl, apiSecret, propertyId, propertyKey, mode]);
 
+
+  const analyticsMode = isSandbox ? 'sandbox' : 'live';
+  const analyticsContext = {
+    mode: analyticsMode,
+    propertyKey: propertyKey || undefined,
+    propertyId: propertyId != null && propertyId !== '' ? String(propertyId) : undefined,
+  };
+
+  // Track widgetLoaded when config has loaded (widget is ready). Identify by propertyKey.
+  useEffect(() => {
+    if (hasPropertyKey && configLoaded) {
+      identifyAnalytics(propertyKey);
+      captureEvent('widgetLoaded', analyticsContext);
+    }
+  }, [hasPropertyKey, configLoaded, propertyKey, propertyId, analyticsMode]);
+
   useEffect(() => {
     if (isOpen && onOpen) onOpen();
-  }, [isOpen, onOpen]);
+    if (isOpen) captureEvent('widgetOpened', analyticsContext);
+  }, [isOpen, onOpen, analyticsMode]);
 
   // Delay adding 'active' by one frame so the browser can paint the initial state and animate open
   useEffect(() => {
@@ -205,13 +232,28 @@ const BookingWidget = ({
       if (cancelled) return;
       try {
         const url = `${effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(String(confirmationToken).trim())}${isSandbox ? '?sandbox=true' : ''}`;
-        const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
+        const res = await _nativeFetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const status = data?.status != null ? String(data.status) : '';
         if (!cancelled) setConfirmationStatus(status || 'pending');
         if (status === 'confirmed') {
-          if (!cancelled) setConfirmationDetails(data);
+          if (!cancelled) {
+            setConfirmationDetails(data);
+            captureEvent('booked', {
+              ...analyticsContext,
+              confirmationCode: data?.confirmationCode ?? data?.confirmation_code ?? data?.bookingId ?? data?.booking_id,
+              bookingId: data?.bookingId ?? data?.booking_id,
+              guest: state.guest,
+              checkIn: state.checkIn?.toISOString?.(),
+              checkOut: state.checkOut?.toISOString?.(),
+              roomName: state.selectedRoom?.name,
+              roomId: state.selectedRoom?.id,
+              rateId: state.selectedRate?.id,
+              totalAmount: data?.totalAmount ?? data?.total_amount,
+              currency: data?.currency ?? state.selectedRoom?.currency,
+            });
+          }
           return;
         }
       } catch (err) {
@@ -241,8 +283,10 @@ const BookingWidget = ({
     setConfigError(null);
     setConfigLoaded(false);
     fetchRuntimeConfig(propertyKey, colors, mode)
-      .then(({ widgetStyles }) => {
+      .then(({ widgetStyles, posthogKey: configPosthogKey }) => {
         if (cancelled) return;
+        const analyticsKey = posthogKey || configPosthogKey || '';
+        initAnalytics(analyticsKey || posthogHost ? { key: analyticsKey || undefined, host: posthogHost || undefined } : {});
         setRuntimeWidgetStyles(widgetStyles);
         setConfigLoaded(true);
         setConfigLoading(false);
@@ -319,6 +363,13 @@ const BookingWidget = ({
       api.fetchRooms(params).then((rooms) => {
         setRoomsList(Array.isArray(rooms) ? rooms : []);
         setLoadingRooms(false);
+        captureEvent('search', {
+          ...analyticsContext,
+          checkIn: state.checkIn?.toISOString?.(),
+          checkOut: state.checkOut?.toISOString?.(),
+          rooms: state.rooms,
+          occupancies: state.occupancies,
+        });
       }).catch((err) => {
         setApiError(err.message || 'Failed to load rooms');
         setLoadingRooms(false);
@@ -443,11 +494,14 @@ const BookingWidget = ({
   };
 
   const selectRoom = (id) => {
-    setState(prev => ({ ...prev, selectedRoom: roomsList.find(r => r.id === id) }));
+    const room = roomsList.find(r => r.id === id);
+    setState(prev => ({ ...prev, selectedRoom: room }));
+    captureEvent('selectedRoom', { ...analyticsContext, roomId: id, roomName: room?.name });
   };
 
   const selectRate = (id) => {
     setState(prev => ({ ...prev, selectedRate: ratesList.find(r => r.id === id) }));
+    captureEvent('selectedRate', { ...analyticsContext, rateId: id });
   };
 
   const updateGuest = (field, value) => {
@@ -502,6 +556,17 @@ const BookingWidget = ({
           const code = res && (res.confirmationCode ?? res.confirmation_code);
           setConfirmationCode(code || ('LX' + Date.now().toString(36).toUpperCase().slice(-6)));
           setState(prev => ({ ...prev, step: 'confirmation' }));
+          captureEvent('booked', {
+            ...analyticsContext,
+            confirmationCode: code || ('LX' + Date.now().toString(36).toUpperCase().slice(-6)),
+            guest: state.guest,
+            checkIn: state.checkIn?.toISOString?.(),
+            checkOut: state.checkOut?.toISOString?.(),
+            roomName: state.selectedRoom?.name,
+            roomId: state.selectedRoom?.id,
+            rateId: state.selectedRate?.id,
+            currency: state.selectedRoom?.currency,
+          });
         })
         .catch((err) => {
           setApiError(err?.message || err || 'Booking failed');

package/dist/react/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/utils/analytics.js

@@ -0,0 +1,88 @@
+/**
+ * PostHog analytics for the booking widget.
+ * The key is sourced from /load-config at runtime; VITE_POSTHOG_KEY/.env or prop overrides are
+ * also supported but the config-fetched key is preferred so no hardcoded key is needed.
+ * Used by React and Vue; core/standalone use window.posthog when host provides it.
+ */
+import posthog from 'posthog-js';
+
+let initialized = false;
+
+function getConfig(overrides = {}) {
+  if (overrides.key != null || overrides.host != null) {
+    return {
+      key: (overrides.key && String(overrides.key).trim()) || '',
+      host: overrides.host || 'https://us.i.posthog.com',
+    };
+  }
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    const key = import.meta.env.VITE_POSTHOG_KEY || import.meta.env.POSTHOG_KEY || '';
+    const host = import.meta.env.VITE_POSTHOG_HOST || import.meta.env.POSTHOG_HOST || 'https://us.i.posthog.com';
+    return { key: (key && String(key).trim()) || '', host };
+  }
+  if (typeof window !== 'undefined') {
+    const key = (window.__BOOKING_WIDGET_POSTHOG_KEY__ || '').trim();
+    const host = window.__BOOKING_WIDGET_POSTHOG_HOST__ || 'https://us.i.posthog.com';
+    return { key, host };
+  }
+  return { key: '', host: 'https://us.i.posthog.com' };
+}
+
+/**
+ * Initialize PostHog when key is available. Call once at app/widget load.
+ * @param {object} [overrides] - Optional { key, host } to override env.
+ */
+export function init(overrides = {}) {
+  if (initialized) return posthog;
+  const { key, host } = getConfig(overrides);
+  if (!key) return null;
+  try {
+    // Snapshot the native fetch/XHR before posthog.init() wraps them for session recording.
+    // PostHog's wrapped fetch drops non-standard headers (e.g. 'Source'), so we restore the
+    // originals immediately after init so all subsequent widget API calls are unaffected.
+    const _savedFetch = typeof window !== 'undefined' ? window.fetch : undefined;
+    const _savedXHROpen = typeof window !== 'undefined' && window.XMLHttpRequest
+      ? window.XMLHttpRequest.prototype.open
+      : undefined;
+
+    posthog.init(key, { api_host: host });
+
+    if (_savedFetch && typeof window !== 'undefined') window.fetch = _savedFetch;
+    if (_savedXHROpen && typeof window !== 'undefined') window.XMLHttpRequest.prototype.open = _savedXHROpen;
+
+    initialized = true;
+    return posthog;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Identify the current context (e.g. property/tenant) so events are associated with it.
+ * Call with propertyKey when the widget has a known property.
+ * @param {string} id - Distinct ID (e.g. propertyKey).
+ */
+export function identify(id) {
+  try {
+    if (initialized && id != null && String(id).trim() && typeof posthog.identify === 'function') {
+      posthog.identify(String(id).trim());
+    }
+  } catch (e) {
+    // ignore
+  }
+}
+
+/**
+ * Capture an event. No-op if PostHog is not initialized.
+ * @param {string} eventName - Event name (e.g. 'widgetLoaded', 'search').
+ * @param {object} [properties] - Optional event properties.
+ */
+export function capture(eventName, properties = {}) {
+  try {
+    if (initialized && typeof posthog.capture === 'function') {
+      posthog.capture(eventName, properties);
+    }
+  } catch (e) {
+    // ignore
+  }
+}

package/dist/utils/config-service.js

@@ -10,9 +10,13 @@
 import { DEFAULT_COLORS } from '../core/stripe-config.js';
 import { deriveWidgetStyles } from '../core/color-utils.js';
 
+// Capture native fetch before PostHog can wrap it (PostHog session recording
+// wraps window.fetch and may strip non-standard headers such as 'Source').
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 const CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/load-config';
 
-/** In-memory cache: propertyKey → raw API color object */
+/** In-memory cache: propertyKey → { apiColors, posthogKey } */
 const _configCache = new Map();
 
 /**
@@ -83,21 +87,22 @@ export async function fetchRuntimeConfig(propertyKey, installerColors = null, mo
   const cacheKey = isSandbox ? `${key}:sandbox` : key;
 
   if (_configCache.has(cacheKey)) {
-    const apiColors = _configCache.get(cacheKey);
+    const { apiColors, posthogKey } = _configCache.get(cacheKey);
     const colors = mergeColors(apiColors, installerColors);
-    return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };
+    return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors), posthogKey };
   }
 
   const url = `${CONFIG_BASE_URL}?apikey=${encodeURIComponent(key)}${isSandbox ? '&mode=sandbox' : ''}`;
-  const res = await fetch(url, { headers: { 'Source': 'booking_engine' } });
+  const res = await _nativeFetch(url, { headers: { 'Source': 'booking_engine' } });
   if (!res.ok) {
     throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
   }
 
   const data = await res.json();
   const apiColors = mapApiColors(data);
-  _configCache.set(cacheKey, apiColors);
+  const posthogKey = ((data.posthogKey || data.POSTHOG_KEY) ?? '').trim();
+  _configCache.set(cacheKey, { apiColors, posthogKey });
 
   const colors = mergeColors(apiColors, installerColors);
-  return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };
+  return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors), posthogKey };
 }

package/dist/vue/BookingWidget.vue

@@ -482,6 +482,12 @@ import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
 import { fetchRuntimeConfig } from '../utils/config-service.js';
+import { init as initAnalytics, capture as captureEvent, identify as identifyAnalytics } from '../utils/analytics.js';
+
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) wraps window.fetch for session recording. The wrapped version drops
+// non-standard request headers such as 'Source'.
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
 
 
 const BASE_STEPS = [
@@ -525,6 +531,10 @@ export default {
     createPaymentIntent: { type: Function, default: null },
     /** Stripe: deprecated (booking completion is fetched from confirmation endpoint instead). */
     onBookingComplete: { type: Function, default: null },
+    /** PostHog: optional override for analytics key (defaults to VITE_POSTHOG_KEY). */
+    posthogKey: { type: String, default: '' },
+    /** PostHog: optional override for API host (defaults to VITE_POSTHOG_HOST). */
+    posthogHost: { type: String, default: '' },
   },
   emits: ['close', 'complete', 'open'],
   data() {
@@ -606,7 +616,7 @@ export default {
         const requestUrl = url + (this.isSandbox ? '?sandbox=true' : '');
         const headers = { 'Content-Type': 'application/json', 'Source': 'booking_engine' };
         if (requestUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-        const res = await fetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
+        const res = await _nativeFetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -722,6 +732,16 @@ export default {
     isVisible() {
       return this.isOpen && !this.isClosing && this.isReadyForOpen;
     },
+    analyticsMode() {
+      return this.isSandbox ? 'sandbox' : 'live';
+    },
+    analyticsContext() {
+      return {
+        mode: this.analyticsMode,
+        propertyKey: this.propertyKey || undefined,
+        propertyId: this.propertyId != null && this.propertyId !== '' ? String(this.propertyId) : undefined,
+      };
+    },
   },
   created() {
     this._initRuntimeConfig();
@@ -740,6 +760,7 @@ export default {
     isOpen: {
       handler(open) {
         if (open && this.onOpen) this.onOpen();
+        if (open) captureEvent('widgetOpened', this.analyticsContext);
         if (!open || this.isClosing) {
           this.isReadyForOpen = false;
           return;
@@ -753,6 +774,14 @@ export default {
       },
       immediate: true,
     },
+    configLoaded: {
+      handler(loaded) {
+        if (loaded && this.hasPropertyKey) {
+          identifyAnalytics(this.propertyKey);
+          captureEvent('widgetLoaded', this.analyticsContext);
+        }
+      },
+    },
     'state.step': function(step) {
       if (step !== 'summary' && step !== 'payment') {
         this.checkoutShowPaymentForm = false;
@@ -782,7 +811,9 @@ export default {
       this.configError = null;
       this.configLoaded = false;
       try {
-        const { widgetStyles } = await fetchRuntimeConfig(this.propertyKey, this.colors, this.mode);
+        const { widgetStyles, posthogKey: configPosthogKey } = await fetchRuntimeConfig(this.propertyKey, this.colors, this.mode);
+        const analyticsKey = this.posthogKey || configPosthogKey || '';
+        initAnalytics(analyticsKey || this.posthogHost ? { key: analyticsKey || undefined, host: this.posthogHost || undefined } : {});
         this.runtimeWidgetStyles = widgetStyles;
         this.configLoaded = true;
       } catch (err) {
@@ -795,7 +826,7 @@ export default {
       const t = String(token || '').trim();
       if (!t) throw new Error('Missing confirmation token');
       const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}${this.isSandbox ? '?sandbox=true' : ''}`;
-      const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
+      const res = await _nativeFetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
     },
@@ -812,6 +843,19 @@ export default {
           this.confirmationStatus = status || this.confirmationStatus || 'pending';
           if (status === 'confirmed') {
             this.confirmationDetails = data;
+            captureEvent('booked', {
+              ...this.analyticsContext,
+              confirmationCode: data?.confirmationCode ?? data?.confirmation_code ?? data?.bookingId ?? data?.booking_id,
+              bookingId: data?.bookingId ?? data?.booking_id,
+              guest: this.state.guest,
+              checkIn: this.state.checkIn?.toISOString?.(),
+              checkOut: this.state.checkOut?.toISOString?.(),
+              roomName: this.state.selectedRoom?.name,
+              roomId: this.state.selectedRoom?.id,
+              rateId: this.state.selectedRate?.id,
+              totalAmount: data?.totalAmount ?? data?.total_amount,
+              currency: data?.currency ?? this.state.selectedRoom?.currency,
+            });
             return;
           }
         } catch (err) {
@@ -880,6 +924,13 @@ export default {
         api.fetchRooms(params).then((rooms) => {
           this.roomsList = Array.isArray(rooms) ? rooms : [];
           this.loadingRooms = false;
+          captureEvent('search', {
+            ...this.analyticsContext,
+            checkIn: this.state.checkIn?.toISOString?.(),
+            checkOut: this.state.checkOut?.toISOString?.(),
+            rooms: this.state.rooms,
+            occupancies: this.state.occupancies,
+          });
         }).catch((err) => {
           this.apiError = err.message || 'Failed to load rooms';
           this.loadingRooms = false;
@@ -972,6 +1023,17 @@ export default {
             const code = res && (res.confirmationCode != null ? res.confirmationCode : res.confirmation_code);
             this.confirmationCode = code || ('LX' + Date.now().toString(36).toUpperCase().slice(-6));
             this.state.step = 'confirmation';
+            captureEvent('booked', {
+              ...this.analyticsContext,
+              confirmationCode: this.confirmationCode,
+              guest: this.state.guest,
+              checkIn: this.state.checkIn?.toISOString?.(),
+              checkOut: this.state.checkOut?.toISOString?.(),
+              roomName: this.state.selectedRoom?.name,
+              roomId: this.state.selectedRoom?.id,
+              rateId: this.state.selectedRate?.id,
+              currency: this.state.selectedRoom?.currency,
+            });
           })
           .catch((err) => {
             this.apiError = (err && err.message) || err || 'Booking failed';
@@ -1124,10 +1186,13 @@ export default {
       }
     },
     selectRoom(id) {
-      this.updateState({ selectedRoom: this.roomsList.find(r => r.id === id) });
+      const room = this.roomsList.find(r => r.id === id);
+      this.updateState({ selectedRoom: room });
+      captureEvent('selectedRoom', { ...this.analyticsContext, roomId: id, roomName: room?.name });
     },
     selectRate(id) {
       this.updateState({ selectedRate: this.ratesList.find(r => r.id === id) });
+      captureEvent('selectedRate', { ...this.analyticsContext, rateId: id });
     },
     updateGuest(field, value) {
       this.updateState({ guest: { ...this.state.guest, [field]: value } });

package/dist/vue/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A beautiful, customizable booking widget modal that can be embedded in any website. Supports vanilla JavaScript, React, and Vue.js.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -34,7 +34,7 @@
     "build": "node scripts/generate-stripe-config.js && npm run build:css && npm run build:js && npm run build:react && npm run build:vue && npm run build:types",
     "build:stripe-config": "node scripts/generate-stripe-config.js",
     "build:css": "mkdir -p dist dist/core && cp src/core/styles.css dist/booking-widget.css && cp src/core/styles.css dist/core/styles.css",
-    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
+    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && cp src/utils/analytics.js dist/utils/analytics.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
     "build:react": "mkdir -p dist/react && cp src/react/BookingWidget.jsx dist/react/BookingWidget.jsx && cp src/core/styles.css dist/react/styles.css",
     "build:vue": "mkdir -p dist/vue && cp src/vue/BookingWidget.vue dist/vue/BookingWidget.vue && cp src/core/styles.css dist/vue/styles.css",
     "build:types": "npm run build:types:main && npm run build:types:react && npm run build:types:vue",
@@ -93,6 +93,7 @@
   },
   "dependencies": {
     "@stripe/stripe-js": "^4.8.0",
-    "lucide-react": "^0.263.1"
+    "lucide-react": "^0.263.1",
+    "posthog-js": "^1.360.1"
   }
 }