@pocketping/widget 1.6.0 → 1.8.0

package/dist/index.d.cts

@@ -1,3 +1,11 @@
+/**
+ * Theme-aware color value
+ * Allows setting different colors for light and dark themes
+ */
+interface ThemeColor {
+    light: string;
+    dark: string;
+}
 interface PocketPingConfig {
     /** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
     endpoint?: string;
@@ -23,6 +31,33 @@ interface PocketPingConfig {
     primaryColor?: string;
     /** Text color on primary background (defaults to white) */
     primaryTextColor?: string;
+    /**
+     * Header background color
+     * Can be a string (same for both themes) or object with light/dark values
+     * @example "#008069" or { light: "#008069", dark: "#202c33" }
+     */
+    headerColor?: string | ThemeColor;
+    /**
+     * Footer/input area background color
+     * Can be a string (same for both themes) or object with light/dark values
+     * @example "#f0f2f5" or { light: "#f0f2f5", dark: "#202c33" }
+     */
+    footerColor?: string | ThemeColor;
+    /**
+     * Chat background style:
+     * - 'whatsapp' (default) - WhatsApp-style pattern
+     * - 'dots' - Subtle dot pattern
+     * - 'plain' - Solid color only
+     * - URL string - Custom image URL
+     * Can also be theme-aware with { light: '...', dark: '...' }
+     */
+    chatBackground?: 'whatsapp' | 'dots' | 'plain' | string | ThemeColor;
+    /**
+     * Toggle button background color
+     * Can be a string (same for both themes) or object with light/dark values
+     * @example "#25d366" or { light: "#25d366", dark: "#00a884" }
+     */
+    toggleColor?: string | ThemeColor;
     /** Widget position */
     position?: 'bottom-right' | 'bottom-left';
     /** Distance from edge in pixels (default: 20) */
@@ -45,6 +80,8 @@ interface PocketPingConfig {
     showDelay?: number;
     /** Auto-open chat after delay in ms (0 = disabled) */
     autoOpenDelay?: number;
+    /** Auto-open chat when operator sends a message (default: true) */
+    autoOpenOnMessage?: boolean;
     /** Play sound on new message */
     soundEnabled?: boolean;
     /** Show unread badge on toggle button */
@@ -109,6 +146,27 @@ interface Session {
     messages: Message[];
     /** User identity if identified via PocketPing.identify() */
     identity?: UserIdentity;
+    /** Pre-chat form configuration */
+    preChatForm?: PreChatFormConfig;
+}
+/** Pre-chat form configuration */
+interface PreChatFormConfig {
+    /** Whether the form is enabled */
+    enabled: boolean;
+    /** Whether the form is required (can't skip) */
+    required: boolean;
+    /** When to show the form: 'before-first-message' | 'after-first-message' */
+    timing: 'before-first-message' | 'after-first-message';
+    /** What fields to collect: 'email-only' | 'phone-only' | 'email-or-phone' | 'email-and-phone' */
+    fields: 'email-only' | 'phone-only' | 'email-or-phone' | 'email-and-phone';
+    /** Whether the form was already completed for this session */
+    completed: boolean;
+}
+/** Pre-chat form submission data */
+interface PreChatFormData {
+    email?: string;
+    phone?: string;
+    phoneCountry?: string;
 }
 interface PresenceResponse {
     online: boolean;
@@ -269,6 +327,11 @@ declare class PocketPingClient {
      * })
      */
     identify(identity: UserIdentity): Promise<void>;
+    /**
+     * Submit pre-chat form data (email and/or phone)
+     * @param data - Form data containing email and/or phone
+     */
+    submitPreChat(data: PreChatFormData): Promise<void>;
     /**
      * Reset the user identity and optionally start a new session
      * Call on user logout to clear user data

package/dist/index.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Theme-aware color value
+ * Allows setting different colors for light and dark themes
+ */
+interface ThemeColor {
+    light: string;
+    dark: string;
+}
 interface PocketPingConfig {
     /** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
     endpoint?: string;
@@ -23,6 +31,33 @@ interface PocketPingConfig {
     primaryColor?: string;
     /** Text color on primary background (defaults to white) */
     primaryTextColor?: string;
+    /**
+     * Header background color
+     * Can be a string (same for both themes) or object with light/dark values
+     * @example "#008069" or { light: "#008069", dark: "#202c33" }
+     */
+    headerColor?: string | ThemeColor;
+    /**
+     * Footer/input area background color
+     * Can be a string (same for both themes) or object with light/dark values
+     * @example "#f0f2f5" or { light: "#f0f2f5", dark: "#202c33" }
+     */
+    footerColor?: string | ThemeColor;
+    /**
+     * Chat background style:
+     * - 'whatsapp' (default) - WhatsApp-style pattern
+     * - 'dots' - Subtle dot pattern
+     * - 'plain' - Solid color only
+     * - URL string - Custom image URL
+     * Can also be theme-aware with { light: '...', dark: '...' }
+     */
+    chatBackground?: 'whatsapp' | 'dots' | 'plain' | string | ThemeColor;
+    /**
+     * Toggle button background color
+     * Can be a string (same for both themes) or object with light/dark values
+     * @example "#25d366" or { light: "#25d366", dark: "#00a884" }
+     */
+    toggleColor?: string | ThemeColor;
     /** Widget position */
     position?: 'bottom-right' | 'bottom-left';
     /** Distance from edge in pixels (default: 20) */
@@ -45,6 +80,8 @@ interface PocketPingConfig {
     showDelay?: number;
     /** Auto-open chat after delay in ms (0 = disabled) */
     autoOpenDelay?: number;
+    /** Auto-open chat when operator sends a message (default: true) */
+    autoOpenOnMessage?: boolean;
     /** Play sound on new message */
     soundEnabled?: boolean;
     /** Show unread badge on toggle button */
@@ -109,6 +146,27 @@ interface Session {
     messages: Message[];
     /** User identity if identified via PocketPing.identify() */
     identity?: UserIdentity;
+    /** Pre-chat form configuration */
+    preChatForm?: PreChatFormConfig;
+}
+/** Pre-chat form configuration */
+interface PreChatFormConfig {
+    /** Whether the form is enabled */
+    enabled: boolean;
+    /** Whether the form is required (can't skip) */
+    required: boolean;
+    /** When to show the form: 'before-first-message' | 'after-first-message' */
+    timing: 'before-first-message' | 'after-first-message';
+    /** What fields to collect: 'email-only' | 'phone-only' | 'email-or-phone' | 'email-and-phone' */
+    fields: 'email-only' | 'phone-only' | 'email-or-phone' | 'email-and-phone';
+    /** Whether the form was already completed for this session */
+    completed: boolean;
+}
+/** Pre-chat form submission data */
+interface PreChatFormData {
+    email?: string;
+    phone?: string;
+    phoneCountry?: string;
 }
 interface PresenceResponse {
     online: boolean;
@@ -269,6 +327,11 @@ declare class PocketPingClient {
      * })
      */
     identify(identity: UserIdentity): Promise<void>;
+    /**
+     * Submit pre-chat form data (email and/or phone)
+     * @param data - Form data containing email and/or phone
+     */
+    submitPreChat(data: PreChatFormData): Promise<void>;
     /**
      * Reset the user identity and optionally start a new session
      * Call on user logout to clear user data