@nuitee/booking-widget 1.0.6 → 1.0.7

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.7/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.7/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.7/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -936,6 +936,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 +1048,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 +1077,7 @@ if (typeof window !== 'undefined') {
         this._fetchRuntimeConfig();
       }
       this.render();
+      this._capture('widgetOpened');
       if (this.options.onOpen) this.options.onOpen();
     }
 
@@ -1112,6 +1134,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 +1224,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 +1248,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 +1266,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 +1735,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 +1797,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 +2030,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 +2083,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.js

@@ -160,6 +160,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 +246,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 +328,7 @@ class BookingWidget {
       this._fetchRuntimeConfig();
     }
     this.render();
+    this._capture('widgetOpened');
     if (this.options.onOpen) this.options.onOpen();
   }
 
@@ -374,6 +398,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 +503,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 +527,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 +545,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 +1011,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 +1107,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 +1365,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 +1500,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/react/BookingWidget.jsx

@@ -5,6 +5,7 @@ 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';
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -45,6 +46,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 : {};
@@ -134,9 +139,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(() => {
@@ -211,7 +233,22 @@ const BookingWidget = ({
         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 +278,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 +358,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 +489,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 +551,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/utils/config-service.js

@@ -12,7 +12,7 @@ import { deriveWidgetStyles } from '../core/color-utils.js';
 
 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,9 +83,9 @@ 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' : ''}`;
@@ -96,8 +96,9 @@ export async function fetchRuntimeConfig(propertyKey, installerColors = null, mo
 
   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,7 @@ 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';
 
 
 const BASE_STEPS = [
@@ -525,6 +526,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() {
@@ -722,6 +727,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 +755,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 +769,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 +806,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) {
@@ -812,6 +838,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 +919,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 +1018,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 +1181,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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",
@@ -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"
   }
 }