@pocketping/widget 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -123,6 +123,24 @@ interface CustomEvent {
123
123
  }
124
124
  /** Handler for custom events */
125
125
  type CustomEventHandler = (data: Record<string, unknown> | undefined, event: CustomEvent) => void;
126
+ /** Options for trigger() method */
127
+ interface TriggerOptions {
128
+ /** If provided, opens the widget and shows this message */
129
+ widgetMessage?: string;
130
+ }
131
+ /** Tracked element configuration (for SaaS auto-tracking) */
132
+ interface TrackedElement {
133
+ /** CSS selector for the element(s) to track */
134
+ selector: string;
135
+ /** DOM event to listen for (default: 'click') */
136
+ event?: 'click' | 'submit' | 'focus' | 'change' | 'mouseenter';
137
+ /** Event name sent to backend */
138
+ name: string;
139
+ /** If provided, opens widget with this message when triggered */
140
+ widgetMessage?: string;
141
+ /** Additional data to send with the event */
142
+ data?: Record<string, unknown>;
143
+ }
126
144
  /**
127
145
  * User identity data for identifying visitors
128
146
  * @example
@@ -159,6 +177,13 @@ declare class PocketPingClient {
159
177
  private reconnectAttempts;
160
178
  private maxReconnectAttempts;
161
179
  private reconnectTimeout;
180
+ private pollingTimeout;
181
+ private pollingFailures;
182
+ private maxPollingFailures;
183
+ private trackedElementCleanups;
184
+ private currentTrackedElements;
185
+ private inspectorMode;
186
+ private inspectorCleanup;
162
187
  constructor(config: ResolvedPocketPingConfig);
163
188
  connect(): Promise<Session>;
164
189
  disconnect(): void;
@@ -206,10 +231,15 @@ declare class PocketPingClient {
206
231
  * Trigger a custom event to the backend
207
232
  * @param eventName - The name of the event (e.g., 'clicked_pricing', 'viewed_demo')
208
233
  * @param data - Optional payload to send with the event
234
+ * @param options - Optional trigger options (widgetMessage to open chat)
209
235
  * @example
210
- * PocketPing.trigger('clicked_cta', { button: 'signup', page: '/pricing' })
236
+ * // Silent event (just notify bridges)
237
+ * PocketPing.trigger('clicked_cta', { button: 'signup' })
238
+ *
239
+ * // Open widget with message
240
+ * PocketPing.trigger('clicked_pricing', { plan: 'pro' }, { widgetMessage: 'Need help choosing a plan?' })
211
241
  */
212
- trigger(eventName: string, data?: Record<string, unknown>): void;
242
+ trigger(eventName: string, data?: Record<string, unknown>, options?: TriggerOptions): void;
213
243
  /**
214
244
  * Subscribe to custom events from the backend
215
245
  * @param eventName - The name of the event to listen for (e.g., 'show_offer', 'open_chat')
@@ -228,11 +258,38 @@ declare class PocketPingClient {
228
258
  */
229
259
  offEvent(eventName: string, handler: CustomEventHandler): void;
230
260
  private emitCustomEvent;
261
+ /**
262
+ * Setup tracked elements from config (used by SaaS dashboard)
263
+ * @param elements - Array of tracked element configurations
264
+ */
265
+ setupTrackedElements(elements: TrackedElement[]): void;
266
+ /**
267
+ * Cleanup all tracked element listeners
268
+ */
269
+ private cleanupTrackedElements;
270
+ /**
271
+ * Get current tracked elements configuration
272
+ */
273
+ getTrackedElements(): TrackedElement[];
274
+ /**
275
+ * Enable inspector mode for visual element selection
276
+ * This shows an overlay that allows clicking on elements to get their CSS selector
277
+ */
278
+ private enableInspectorMode;
279
+ /**
280
+ * Disable inspector mode
281
+ */
282
+ private disableInspectorMode;
283
+ /**
284
+ * Check if inspector mode is active
285
+ */
286
+ isInspectorModeActive(): boolean;
231
287
  private connectWebSocket;
232
288
  private handleWebSocketEvent;
233
289
  private handleVersionWarning;
234
290
  private scheduleReconnect;
235
291
  private startPolling;
292
+ private stopPolling;
236
293
  private fetch;
237
294
  private checkVersionHeaders;
238
295
  private getOrCreateVisitorId;
@@ -254,10 +311,29 @@ declare function sendMessage(content: string): Promise<Message>;
254
311
  * Trigger a custom event to the backend
255
312
  * @param eventName - The name of the event (e.g., 'clicked_pricing', 'viewed_demo')
256
313
  * @param data - Optional payload to send with the event
314
+ * @param options - Optional trigger options (widgetMessage to open chat)
257
315
  * @example
258
- * PocketPing.trigger('clicked_cta', { button: 'signup', page: '/pricing' })
316
+ * // Silent event (just notify bridges)
317
+ * PocketPing.trigger('clicked_cta', { button: 'signup' })
318
+ *
319
+ * // Open widget with message
320
+ * PocketPing.trigger('clicked_pricing', { plan: 'pro' }, { widgetMessage: 'Need help choosing?' })
321
+ */
322
+ declare function trigger(eventName: string, data?: Record<string, unknown>, options?: TriggerOptions): void;
323
+ /**
324
+ * Setup tracked elements for auto-tracking (typically called by SaaS backend)
325
+ * @param elements - Array of tracked element configurations
326
+ * @example
327
+ * PocketPing.setupTrackedElements([
328
+ * { selector: '#search-btn', event: 'click', name: 'clicked_search' },
329
+ * { selector: '.pricing-card', event: 'click', name: 'viewed_pricing', widgetMessage: 'Need help?' }
330
+ * ])
331
+ */
332
+ declare function setupTrackedElements(elements: TrackedElement[]): void;
333
+ /**
334
+ * Get current tracked elements configuration
259
335
  */
260
- declare function trigger(eventName: string, data?: Record<string, unknown>): void;
336
+ declare function getTrackedElements(): TrackedElement[];
261
337
  /**
262
338
  * Subscribe to custom events from the backend
263
339
  * @param eventName - The name of the event to listen for
@@ -335,6 +411,8 @@ declare const _default: {
335
411
  identify: typeof identify;
336
412
  reset: typeof reset;
337
413
  getIdentity: typeof getIdentity;
414
+ setupTrackedElements: typeof setupTrackedElements;
415
+ getTrackedElements: typeof getTrackedElements;
338
416
  };
339
417
 
340
- export { type CustomEvent, type CustomEventHandler, type Message, type PocketPingConfig, type UserIdentity, type VersionWarning, close, _default as default, destroy, getIdentity, identify, init, offEvent, on, onEvent, open, reset, sendMessage, toggle, trigger };
418
+ export { type CustomEvent, type CustomEventHandler, type Message, type PocketPingConfig, type TrackedElement, type TriggerOptions, type UserIdentity, type VersionWarning, close, _default as default, destroy, getIdentity, getTrackedElements, identify, init, offEvent, on, onEvent, open, reset, sendMessage, setupTrackedElements, toggle, trigger };
package/dist/index.d.ts CHANGED
@@ -123,6 +123,24 @@ interface CustomEvent {
123
123
  }
124
124
  /** Handler for custom events */
125
125
  type CustomEventHandler = (data: Record<string, unknown> | undefined, event: CustomEvent) => void;
126
+ /** Options for trigger() method */
127
+ interface TriggerOptions {
128
+ /** If provided, opens the widget and shows this message */
129
+ widgetMessage?: string;
130
+ }
131
+ /** Tracked element configuration (for SaaS auto-tracking) */
132
+ interface TrackedElement {
133
+ /** CSS selector for the element(s) to track */
134
+ selector: string;
135
+ /** DOM event to listen for (default: 'click') */
136
+ event?: 'click' | 'submit' | 'focus' | 'change' | 'mouseenter';
137
+ /** Event name sent to backend */
138
+ name: string;
139
+ /** If provided, opens widget with this message when triggered */
140
+ widgetMessage?: string;
141
+ /** Additional data to send with the event */
142
+ data?: Record<string, unknown>;
143
+ }
126
144
  /**
127
145
  * User identity data for identifying visitors
128
146
  * @example
@@ -159,6 +177,13 @@ declare class PocketPingClient {
159
177
  private reconnectAttempts;
160
178
  private maxReconnectAttempts;
161
179
  private reconnectTimeout;
180
+ private pollingTimeout;
181
+ private pollingFailures;
182
+ private maxPollingFailures;
183
+ private trackedElementCleanups;
184
+ private currentTrackedElements;
185
+ private inspectorMode;
186
+ private inspectorCleanup;
162
187
  constructor(config: ResolvedPocketPingConfig);
163
188
  connect(): Promise<Session>;
164
189
  disconnect(): void;
@@ -206,10 +231,15 @@ declare class PocketPingClient {
206
231
  * Trigger a custom event to the backend
207
232
  * @param eventName - The name of the event (e.g., 'clicked_pricing', 'viewed_demo')
208
233
  * @param data - Optional payload to send with the event
234
+ * @param options - Optional trigger options (widgetMessage to open chat)
209
235
  * @example
210
- * PocketPing.trigger('clicked_cta', { button: 'signup', page: '/pricing' })
236
+ * // Silent event (just notify bridges)
237
+ * PocketPing.trigger('clicked_cta', { button: 'signup' })
238
+ *
239
+ * // Open widget with message
240
+ * PocketPing.trigger('clicked_pricing', { plan: 'pro' }, { widgetMessage: 'Need help choosing a plan?' })
211
241
  */
212
- trigger(eventName: string, data?: Record<string, unknown>): void;
242
+ trigger(eventName: string, data?: Record<string, unknown>, options?: TriggerOptions): void;
213
243
  /**
214
244
  * Subscribe to custom events from the backend
215
245
  * @param eventName - The name of the event to listen for (e.g., 'show_offer', 'open_chat')
@@ -228,11 +258,38 @@ declare class PocketPingClient {
228
258
  */
229
259
  offEvent(eventName: string, handler: CustomEventHandler): void;
230
260
  private emitCustomEvent;
261
+ /**
262
+ * Setup tracked elements from config (used by SaaS dashboard)
263
+ * @param elements - Array of tracked element configurations
264
+ */
265
+ setupTrackedElements(elements: TrackedElement[]): void;
266
+ /**
267
+ * Cleanup all tracked element listeners
268
+ */
269
+ private cleanupTrackedElements;
270
+ /**
271
+ * Get current tracked elements configuration
272
+ */
273
+ getTrackedElements(): TrackedElement[];
274
+ /**
275
+ * Enable inspector mode for visual element selection
276
+ * This shows an overlay that allows clicking on elements to get their CSS selector
277
+ */
278
+ private enableInspectorMode;
279
+ /**
280
+ * Disable inspector mode
281
+ */
282
+ private disableInspectorMode;
283
+ /**
284
+ * Check if inspector mode is active
285
+ */
286
+ isInspectorModeActive(): boolean;
231
287
  private connectWebSocket;
232
288
  private handleWebSocketEvent;
233
289
  private handleVersionWarning;
234
290
  private scheduleReconnect;
235
291
  private startPolling;
292
+ private stopPolling;
236
293
  private fetch;
237
294
  private checkVersionHeaders;
238
295
  private getOrCreateVisitorId;
@@ -254,10 +311,29 @@ declare function sendMessage(content: string): Promise<Message>;
254
311
  * Trigger a custom event to the backend
255
312
  * @param eventName - The name of the event (e.g., 'clicked_pricing', 'viewed_demo')
256
313
  * @param data - Optional payload to send with the event
314
+ * @param options - Optional trigger options (widgetMessage to open chat)
257
315
  * @example
258
- * PocketPing.trigger('clicked_cta', { button: 'signup', page: '/pricing' })
316
+ * // Silent event (just notify bridges)
317
+ * PocketPing.trigger('clicked_cta', { button: 'signup' })
318
+ *
319
+ * // Open widget with message
320
+ * PocketPing.trigger('clicked_pricing', { plan: 'pro' }, { widgetMessage: 'Need help choosing?' })
321
+ */
322
+ declare function trigger(eventName: string, data?: Record<string, unknown>, options?: TriggerOptions): void;
323
+ /**
324
+ * Setup tracked elements for auto-tracking (typically called by SaaS backend)
325
+ * @param elements - Array of tracked element configurations
326
+ * @example
327
+ * PocketPing.setupTrackedElements([
328
+ * { selector: '#search-btn', event: 'click', name: 'clicked_search' },
329
+ * { selector: '.pricing-card', event: 'click', name: 'viewed_pricing', widgetMessage: 'Need help?' }
330
+ * ])
331
+ */
332
+ declare function setupTrackedElements(elements: TrackedElement[]): void;
333
+ /**
334
+ * Get current tracked elements configuration
259
335
  */
260
- declare function trigger(eventName: string, data?: Record<string, unknown>): void;
336
+ declare function getTrackedElements(): TrackedElement[];
261
337
  /**
262
338
  * Subscribe to custom events from the backend
263
339
  * @param eventName - The name of the event to listen for
@@ -335,6 +411,8 @@ declare const _default: {
335
411
  identify: typeof identify;
336
412
  reset: typeof reset;
337
413
  getIdentity: typeof getIdentity;
414
+ setupTrackedElements: typeof setupTrackedElements;
415
+ getTrackedElements: typeof getTrackedElements;
338
416
  };
339
417
 
340
- export { type CustomEvent, type CustomEventHandler, type Message, type PocketPingConfig, type UserIdentity, type VersionWarning, close, _default as default, destroy, getIdentity, identify, init, offEvent, on, onEvent, open, reset, sendMessage, toggle, trigger };
418
+ export { type CustomEvent, type CustomEventHandler, type Message, type PocketPingConfig, type TrackedElement, type TriggerOptions, type UserIdentity, type VersionWarning, close, _default as default, destroy, getIdentity, getTrackedElements, identify, init, offEvent, on, onEvent, open, reset, sendMessage, setupTrackedElements, toggle, trigger };