@magicfeedback/popup-sdk 1.3.0 → 1.4.0

package/README.md

@@ -128,6 +128,11 @@ Config fields:
 - `platform?: 'web' | 'android' | 'ios'` — defaults to `'web'`
 - `device?: DeviceInfo` — device context override, for hosts where the SDK cannot detect it
 - `contactAttributes?: Record<string, string | number | boolean>`
+- `renderChrome?: boolean` — React Native only. Defaults to `true`. When `false`, the survey
+  WebView HTML is delivered transparent and edge-to-edge, without the SDK's own card, backdrop,
+  or positioning, so the host mounts its own `Modal`/container and controls the styling. This
+  avoids a "double modal" when the host already wraps the WebView. The survey stays fully
+  functional (message bridge, form, nav buttons, close). No effect on the web DOM popup.
 - `language?: string` — BCP-47 tag (`'en'`, `'en-US'`, …) used for popup language
   segmentation (`segments.lang`) and for the analytics context. If omitted it is
   auto-detected from `navigator.language`, falling back to the `Intl` locale (which is
@@ -196,6 +201,7 @@ session start/end and unhandled errors are automatic. The rest is instrumented b
 | `trackSearch(query, resultsCount, params?)` | Searches, with `has_results` derived |
 | `trackFunnelStep(funnel, step, taskId, params?)` | A funnel step, correlated by `taskId` |
 | `trackFindabilityFriction(topic, params?)` | Friction signal |
+| `trackMeaningfulInteraction(interactionType, params?)` | A meaningful interaction, grouped by `interaction_type` |
 | `enterMiniService(name, entryPointType?)` / `exitMiniService(name)` | Mini-service, with duration |
 | `setUserAttributes(map)` / `setMetric(key, value)` | Breakdown dimensions / measurable values |
 | `setUserId(userId?)` | Login, logout or account switch |

package/dist/index.d.mts

@@ -256,6 +256,15 @@ interface DeepdotsInitParams {
      * `setContactAttributes` after init (sends only when values changed from the last sync).
      */
     contactAttributes?: Record<string, string | number | boolean>;
+    /**
+     * Whether the SDK renders the popup "modal" (card + backdrop + positioning) around the survey.
+     * Default `true`. Only affects React Native (the survey WebView HTML); the web DOM popup is
+     * unaffected. With `false` the survey is delivered transparent and edge-to-edge so the host
+     * mounts its own Modal/container and controls the styling — avoids the "double modal" when the
+     * host already wraps the WebView. The survey stays fully functional (bridge, form, nav buttons,
+     * close). Ver `ReactNativePopupRenderer`.
+     */
+    renderChrome?: boolean;
 }
 interface DeepdotsConfig {
     /** API key for authentication */
@@ -388,7 +397,7 @@ interface PopupRenderer {
     /** Preparar recursos si aplica */
     init?(): void;
     /** Mostrar popup */
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string, renderChrome?: boolean): void;
     /** Ocultar popup */
     hide(): void;
 }
@@ -402,7 +411,7 @@ declare class BrowserPopupRenderer implements PopupRenderer {
     private container;
     private visible;
     init(): void;
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string, _renderChrome?: boolean): void;
     hide(): void;
 }
 /** Factoría para obtener renderer por defecto */
@@ -602,6 +611,8 @@ declare class DeepdotsPopups {
     private deferredExitTimers;
     private baseUrl;
     private env;
+    /** Si el SDK pinta el "modal" del popup (RN). Default true; false = el host lo envuelve. */
+    private renderChrome;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     private tracking;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -673,6 +684,15 @@ declare class DeepdotsPopups {
     trackFindabilityFriction(frictionTopic: string, params?: Record<string, unknown>): void;
     /** Funnel: un paso del embudo, correlacionado por `taskId`. El backend reconstruye conversión/drop-off/tiempo. */
     trackFunnelStep(funnel: string, step: string, taskId: string, params?: Record<string, unknown>): void;
+    /**
+     * Product Effectiveness: una interacción significativa del usuario (`interaction_type` es la
+     * dimensión de agrupación, p. ej. `get_help`, `homepage`, `contact_support`).
+     *
+     * Existe como evento RESERVADO para que la convención no la invente cada host: un `track()`
+     * custom acaba como `deepdots_event_…` y no lo cuenta la analítica de effectiveness.
+     * Un `interactionType` vacío se descarta con warning (no aporta dato agrupable).
+     */
+    trackMeaningfulInteraction(interactionType: string, params?: Record<string, unknown>): void;
     /**
      * Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app).
      * No-op si tracking off. El evento se descarta (con warning) si el `channel` no es válido,
@@ -847,7 +867,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string, renderChrome?: boolean): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a
@@ -880,6 +900,13 @@ interface BuildSurveyHtmlOptions {
     theme?: 'light' | 'dark';
     position?: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
     actions?: PopupActions;
+    /**
+     * Renderiza el "modal" del popup (tarjeta con fondo/sombra/bordes + overlay + posicionamiento).
+     * Default `true`. Con `false` el HTML es transparente y llena el contenedor: el host monta su
+     * propio Modal/tarjeta y controla el estilo. El survey sigue siendo funcional (bridge, form,
+     * botones y botón de cerrar). Pensado para React Native cuando el host gestiona el contenedor.
+     */
+    chrome?: boolean;
 }
 declare function buildSurveyHtml(opts: BuildSurveyHtmlOptions): string;
 

package/dist/index.d.ts

@@ -256,6 +256,15 @@ interface DeepdotsInitParams {
      * `setContactAttributes` after init (sends only when values changed from the last sync).
      */
     contactAttributes?: Record<string, string | number | boolean>;
+    /**
+     * Whether the SDK renders the popup "modal" (card + backdrop + positioning) around the survey.
+     * Default `true`. Only affects React Native (the survey WebView HTML); the web DOM popup is
+     * unaffected. With `false` the survey is delivered transparent and edge-to-edge so the host
+     * mounts its own Modal/container and controls the styling — avoids the "double modal" when the
+     * host already wraps the WebView. The survey stays fully functional (bridge, form, nav buttons,
+     * close). Ver `ReactNativePopupRenderer`.
+     */
+    renderChrome?: boolean;
 }
 interface DeepdotsConfig {
     /** API key for authentication */
@@ -388,7 +397,7 @@ interface PopupRenderer {
     /** Preparar recursos si aplica */
     init?(): void;
     /** Mostrar popup */
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string, renderChrome?: boolean): void;
     /** Ocultar popup */
     hide(): void;
 }
@@ -402,7 +411,7 @@ declare class BrowserPopupRenderer implements PopupRenderer {
     private container;
     private visible;
     init(): void;
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string, _renderChrome?: boolean): void;
     hide(): void;
 }
 /** Factoría para obtener renderer por defecto */
@@ -602,6 +611,8 @@ declare class DeepdotsPopups {
     private deferredExitTimers;
     private baseUrl;
     private env;
+    /** Si el SDK pinta el "modal" del popup (RN). Default true; false = el host lo envuelve. */
+    private renderChrome;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     private tracking;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -673,6 +684,15 @@ declare class DeepdotsPopups {
     trackFindabilityFriction(frictionTopic: string, params?: Record<string, unknown>): void;
     /** Funnel: un paso del embudo, correlacionado por `taskId`. El backend reconstruye conversión/drop-off/tiempo. */
     trackFunnelStep(funnel: string, step: string, taskId: string, params?: Record<string, unknown>): void;
+    /**
+     * Product Effectiveness: una interacción significativa del usuario (`interaction_type` es la
+     * dimensión de agrupación, p. ej. `get_help`, `homepage`, `contact_support`).
+     *
+     * Existe como evento RESERVADO para que la convención no la invente cada host: un `track()`
+     * custom acaba como `deepdots_event_…` y no lo cuenta la analítica de effectiveness.
+     * Un `interactionType` vacío se descarta con warning (no aporta dato agrupable).
+     */
+    trackMeaningfulInteraction(interactionType: string, params?: Record<string, unknown>): void;
     /**
      * Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app).
      * No-op si tracking off. El evento se descarta (con warning) si el `channel` no es válido,
@@ -847,7 +867,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string, renderChrome?: boolean): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a
@@ -880,6 +900,13 @@ interface BuildSurveyHtmlOptions {
     theme?: 'light' | 'dark';
     position?: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
     actions?: PopupActions;
+    /**
+     * Renderiza el "modal" del popup (tarjeta con fondo/sombra/bordes + overlay + posicionamiento).
+     * Default `true`. Con `false` el HTML es transparente y llena el contenedor: el host monta su
+     * propio Modal/tarjeta y controla el estilo. El survey sigue siendo funcional (bridge, form,
+     * botones y botón de cerrar). Pensado para React Native cuando el host gestiona el contenedor.
+     */
+    chrome?: boolean;
 }
 declare function buildSurveyHtml(opts: BuildSurveyHtmlOptions): string;
 

package/dist/index.js

@@ -2542,7 +2542,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     };
     generateOptions.onLoadedEvent = ({ formData }) => {
       try {
-      } catch (e) {
+      } catch {
       }
       const s = formData?.style;
       if (s && !stylesInjected) {
@@ -2720,6 +2720,10 @@ var POPUP_TRIGGER_CONDITION_STATUSES = [
 ];
 
 // src/triggers/index.ts
+function toNumericValue(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
 function setupTrigger(popups, trigger) {
   switch (trigger.type) {
     case "time":
@@ -2740,14 +2744,14 @@ function setupTrigger(popups, trigger) {
   }
 }
 function setupTimeTrigger(popups, trigger) {
-  const delay = trigger.value || 5e3;
+  const delay = toNumericValue(trigger.value, 5e3);
   setTimeout(() => {
     popups.triggerSurvey(trigger.surveyId, trigger.popupId);
   }, delay);
   popups.debug(`Time trigger set for ${delay}ms`);
 }
 function setupScrollTrigger(popups, trigger) {
-  const threshold = trigger.value || 50;
+  const threshold = toNumericValue(trigger.value, 50);
   const handler = () => {
     const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100;
     if (scrollPercentage >= threshold) {
@@ -2927,6 +2931,16 @@ function buildSurveyHtml(opts) {
   const colorScheme = isDark ? "dark" : "light";
   const textPrimary = isDark ? "#f0f0f0" : "#111";
   const pos = POSITION_MAP[opts.position ?? "center"] ?? POSITION_MAP.center;
+  const chrome = opts.chrome !== false;
+  const bodyBg = chrome ? pos.background : "transparent";
+  const bodyPadding = chrome ? pos.padding : "0";
+  const bodyDisplay = chrome ? "flex" : "block";
+  const cardBg = chrome ? popupBg : "transparent";
+  const cardShadow = chrome ? "0 4px 6px rgba(0,0,0,0.1)" : "none";
+  const cardRadius = chrome ? "8px" : "0";
+  const cardMaxWidth = chrome ? "600px" : "none";
+  const cardWidth = chrome ? "90%" : "100%";
+  const cardMinHeight = chrome ? "200px" : "0";
   const backLabel = JSON.stringify(opts.actions?.back?.label ?? "Back");
   const startLabel = JSON.stringify(opts.actions?.start?.label ?? "Start survey");
   const completeLabel = JSON.stringify(opts.actions?.complete?.label ?? "Complete survey");
@@ -2938,8 +2952,8 @@ function buildSurveyHtml(opts) {
 ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
-body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${pos.background};padding:${pos.padding};box-sizing:border-box}
-.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${popupBg};color-scheme:${colorScheme};border-radius:8px;padding:24px;box-shadow:0 4px 6px rgba(0,0,0,0.1);max-width:600px;width:90%;min-height:200px;box-sizing:border-box}
+body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
+.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};box-sizing:border-box}
 .deepdots-popup-header{display:flex;justify-content:flex-end;align-items:center;width:100%}
 #dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px}
 .deepdots-popup-container-content{display:flex;flex-direction:column;padding:0 20px 12px 20px;max-height:80vh;overflow:hidden;box-sizing:border-box}
@@ -2997,6 +3011,7 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
   function emit(s){ try{ if(window.ReactNativeWebView){ window.ReactNativeWebView.postMessage(s); } }catch(e){} }
   function emitJSON(n,p){ try{ emit(JSON.stringify({name:n,payload:p||{}})); }catch(e){} }
   window.DeepdotsClose = function(){ emitJSON('popup_close'); };
+  var chromeOn=${chrome ? "true" : "false"};
 
   var popup=document.getElementById('dd-popup');
   var main=document.getElementById('dd-main');
@@ -3072,7 +3087,7 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
-            if(s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
+            if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
             if(s.buttonPrimaryColor){
               submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
@@ -3162,7 +3177,7 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, renderChrome) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
@@ -3177,7 +3192,9 @@ var ReactNativePopupRenderer = class {
       font: style?.font,
       theme: style?.theme,
       position: style?.position,
-      actions
+      actions,
+      // renderChrome:false (init) → HTML sin tarjeta/overlay: el host lo envuelve en su Modal.
+      chrome: renderChrome
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -3268,7 +3285,7 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
     if (!this.container) return;
@@ -4129,6 +4146,8 @@ var DeepdotsPopups = class {
     this.deferredExitTimers = [];
     this.baseUrl = "";
     this.env = "production";
+    /** Si el SDK pinta el "modal" del popup (RN). Default true; false = el host lo envuelve. */
+    this.renderChrome = true;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -4179,6 +4198,7 @@ var DeepdotsPopups = class {
     const env = resolveEnvironment(config.nodeEnv);
     this.baseUrl = env.apiBaseUrl;
     this.env = config.nodeEnv || "production";
+    this.renderChrome = config.renderChrome ?? true;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -4364,6 +4384,22 @@ var DeepdotsPopups = class {
   trackFunnelStep(funnel, step, taskId, params) {
     this.track("deepdots_funnel_step", { funnel, step, task_id: taskId, ...params ?? {} });
   }
+  /**
+   * Product Effectiveness: una interacción significativa del usuario (`interaction_type` es la
+   * dimensión de agrupación, p. ej. `get_help`, `homepage`, `contact_support`).
+   *
+   * Existe como evento RESERVADO para que la convención no la invente cada host: un `track()`
+   * custom acaba como `deepdots_event_…` y no lo cuenta la analítica de effectiveness.
+   * Un `interactionType` vacío se descarta con warning (no aporta dato agrupable).
+   */
+  trackMeaningfulInteraction(interactionType, params) {
+    const type = typeof interactionType === "string" ? interactionType.trim() : "";
+    if (!type) {
+      console.warn("[DeepdotsPopups] trackMeaningfulInteraction discarded: empty interaction_type");
+      return;
+    }
+    this.track("deepdots_meaningful_interaction", { interaction_type: type, ...params ?? {} });
+  }
   /**
    * Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app).
    * No-op si tracking off. El evento se descarta (con warning) si el `channel` no es válido,
@@ -4964,7 +5000,8 @@ var DeepdotsPopups = class {
         style,
         sessionId,
         miniService,
-        analyticsFeedbackSessionId
+        analyticsFeedbackSessionId,
+        this.renderChrome
       );
       return;
     }