@magicfeedback/popup-sdk 1.3.0 → 1.4.0

package/dist/react-native.d.mts

@@ -162,6 +162,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;
 }
 /**
  * Options for configuring survey triggers
@@ -243,7 +252,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;
 }
@@ -323,6 +332,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(). */
@@ -394,6 +405,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,
@@ -612,7 +632,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

package/dist/react-native.d.ts

@@ -162,6 +162,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;
 }
 /**
  * Options for configuring survey triggers
@@ -243,7 +252,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;
 }
@@ -323,6 +332,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(). */
@@ -394,6 +405,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,
@@ -612,7 +632,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

package/dist/react-native.js

@@ -614,7 +614,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     };
     generateOptions.onLoadedEvent = ({ formData }) => {
       try {
-      } catch (e) {
+      } catch {
       }
       const s = formData?.style;
       if (s && !stylesInjected) {
@@ -779,6 +779,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":
@@ -799,14 +803,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) {
@@ -986,6 +990,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");
@@ -997,8 +1011,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}
@@ -1056,6 +1070,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');
@@ -1131,7 +1146,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';
@@ -1221,7 +1236,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;
@@ -1236,7 +1251,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 });
@@ -1327,7 +1344,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;
@@ -2188,6 +2205,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(). */
@@ -2238,6 +2257,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,
@@ -2423,6 +2443,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,
@@ -3023,7 +3059,8 @@ var DeepdotsPopups = class {
         style,
         sessionId,
         miniService,
-        analyticsFeedbackSessionId
+        analyticsFeedbackSessionId,
+        this.renderChrome
       );
       return;
     }