@joryio/web-sdk 1.3.0 → 1.3.1-beta.2

package/dist/joryio.mjs

@@ -1,9 +1,9 @@
 /**
- * Joryio Web SDK v1.3.0
+ * Joryio Web SDK v1.3.1-beta.2
  * (c) 2026 Joryio. All rights reserved.
  * @license Commercial - see https://github.com/joryio/joryio-web-sdk/blob/main/LICENSE
  */
-const SDK_VERSION = '1.3.0';
+const SDK_VERSION = '1.3.1';
 const DEFAULT_API_ENDPOINT = 'https://api-eu1.joryio.com/api';
 function normalizeApiEndpoint(raw) {
     const trimmed = (raw || '').trim();
@@ -2261,6 +2261,21 @@ class UTMManager {
 function escapeStyleText(css) {
     return typeof css === 'string' ? css.replace(/<\//g, '<\\/') : '';
 }
+const IN_APP_DEFAULT_MAX_WIDTH = { modal: 600, slideup: 400 };
+const IN_APP_VIEWPORT_MARGIN = 16;
+function inAppMaxWidth(campaign) {
+    var _a;
+    if (campaign.type !== 'modal' && campaign.type !== 'slideup')
+        return null;
+    if (((_a = campaign.content) === null || _a === void 0 ? void 0 : _a.kind) !== 'html')
+        return null;
+    const mw = campaign.content.maxWidth;
+    return typeof mw === 'number' && Number.isFinite(mw) && mw > 0 ? Math.floor(mw) : IN_APP_DEFAULT_MAX_WIDTH[campaign.type];
+}
+function inAppFrameWidth(maxWidth, viewportWidth, margin = IN_APP_VIEWPORT_MARGIN) {
+    const available = Math.max(0, Math.floor(viewportWidth) - 2 * margin);
+    return Math.max(0, Math.min(Math.floor(maxWidth), available));
+}
 const HOST_BRIDGE_KEY = '__joryioInApp';
 const IMPRESSIONS_STORAGE_KEY = 'inapp_impressions';
 const MAX_DISPLAYED_MESSAGES = 500;
@@ -2376,6 +2391,7 @@ class InAppMessagingManager {
         this.syncAgain = false;
         this.claimed = new Set();
         this.iframes = new Map();
+        this.frameMaxWidths = new Map();
         this.allowHtmlJsInAppMessages = false;
         this.bridge = null;
         this.auth = null;
@@ -2495,16 +2511,13 @@ class InAppMessagingManager {
                 this.trackImpression(campaignId, 'clicked').catch(() => { });
                 return this.submitForm(campaignId, values);
             },
-            setSize: (campaignId, width, height) => {
+            setSize: (campaignId, _width, height) => {
                 var _a;
                 const iframe = this.iframes.get(campaignId);
                 if (!iframe || !Number.isFinite(height) || height <= 0)
                     return;
                 const type = (_a = this.displayedMessages.get(campaignId)) === null || _a === void 0 ? void 0 : _a.campaign.type;
                 iframe.style.height = type === 'fullscreen' ? '100%' : `${Math.ceil(height)}px`;
-                if ((type === 'modal' || type === 'slideup') && Number.isFinite(width) && width > 0) {
-                    iframe.style.width = `${Math.ceil(width)}px`;
-                }
             },
         };
     }
@@ -3202,6 +3215,13 @@ class InAppMessagingManager {
             if (campaign.type === 'banner' || campaign.type === 'fullscreen') {
                 iframe.style.width = '100%';
             }
+            const maxWidth = inAppMaxWidth(campaign);
+            if (maxWidth !== null) {
+                container.style.maxWidth = 'none';
+                this.frameMaxWidths.set(campaign.id, maxWidth);
+                iframe.style.width = `${inAppFrameWidth(maxWidth, this.hostViewportWidth())}px`;
+                this.watchViewport();
+            }
             iframe.srcdoc = this.buildSrcdoc(campaign.id, renderedHtml, ((_d = campaign.content) === null || _d === void 0 ? void 0 : _d.kind) === 'html' ? campaign.content.css : '', campaign.type);
             container.appendChild(iframe);
             this.iframes.set(campaign.id, iframe);
@@ -3255,13 +3275,53 @@ class InAppMessagingManager {
         this.callHost('onMessageDisplay', () => { var _a, _b; return (_b = (_a = this.displayOptions).onDisplay) === null || _b === void 0 ? void 0 : _b.call(_a, message); });
         this.logger.info(`Displayed campaign: ${campaign.name} (${campaign.id})`);
     }
+    hostViewportWidth() {
+        const doc = typeof document !== 'undefined' ? document.documentElement : null;
+        const cw = doc && typeof doc.clientWidth === 'number' ? doc.clientWidth : 0;
+        if (cw > 0)
+            return cw;
+        return typeof window !== 'undefined' && typeof window.innerWidth === 'number' ? window.innerWidth : 0;
+    }
+    sizeContentFrame(campaignId) {
+        const iframe = this.iframes.get(campaignId);
+        const maxWidth = this.frameMaxWidths.get(campaignId);
+        if (!iframe || maxWidth === undefined)
+            return;
+        iframe.style.width = `${inAppFrameWidth(maxWidth, this.hostViewportWidth())}px`;
+    }
+    watchViewport() {
+        if (this.viewportListener || typeof window === 'undefined' || typeof window.addEventListener !== 'function')
+            return;
+        this.viewportListener = () => {
+            if (this.viewportTimer)
+                clearTimeout(this.viewportTimer);
+            this.viewportTimer = setTimeout(() => {
+                this.viewportTimer = undefined;
+                for (const id of this.frameMaxWidths.keys())
+                    this.sizeContentFrame(id);
+            }, 100);
+        };
+        window.addEventListener('resize', this.viewportListener);
+    }
+    unwatchViewportIfIdle() {
+        if (this.frameMaxWidths.size > 0 || !this.viewportListener)
+            return;
+        if (typeof window !== 'undefined' && typeof window.removeEventListener === 'function') {
+            window.removeEventListener('resize', this.viewportListener);
+        }
+        this.viewportListener = undefined;
+        if (this.viewportTimer) {
+            clearTimeout(this.viewportTimer);
+            this.viewportTimer = undefined;
+        }
+    }
     buildSrcdoc(campaignId, html, css, type) {
         const cid = JSON.stringify(campaignId);
         const key = JSON.stringify(HOST_BRIDGE_KEY);
         const contentSized = type === 'modal' || type === 'slideup';
-        const bodySizing = contentSized ? 'body{display:inline-block;max-width:100vw;}' : '';
+        const bodySizing = contentSized ? 'body{display:flow-root;}' : '';
         const bootstrap = `(function(){
-      var CID=${cid},KEY=${key};
+      var CID=${cid},KEY=${key},SIZED=${contentSized ? 'true' : 'false'};
       // Per-device visibility: tag the root with the REAL device class from the
       // HOST page viewport (the iframe is message-sized, so its own innerWidth is
       // useless here). The jr-vp-* → jr-hide-* rules in <style> then hide elements
@@ -3310,7 +3370,7 @@ class InAppMessagingManager {
         var p=window.joryioBridge.submitForm(d);if(!p||typeof p.then!=='function'){msg('This form cannot be sent here.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false;return}
         p.then(function(r){if(r&&r.ok){if(r.redirect){window.joryioBridge.navigate(r.redirect,'_top');return}var els2=f.querySelectorAll('input,select,textarea,button');for(var j=0;j<els2.length;j++){els2[j].disabled=true}msg(r.message||'Thank you.',true)}else{msg((r&&(r.message||(r.errors&&r.errors[0])))||'Something went wrong. Please try again.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false}}).catch(function(){msg('Something went wrong. Please try again.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false});
       },true);
-      function reportSize(){try{var b=document.body,de=document.documentElement;var w=Math.max(b?b.scrollWidth:0,de.scrollWidth);var h=Math.max(b?b.scrollHeight:0,de.scrollHeight);call('setSize',[w,h]);}catch(e){}}
+      function reportSize(){try{var b=document.body,de=document.documentElement;var w=Math.max(b?b.scrollWidth:0,de.scrollWidth);var h=SIZED&&b?Math.ceil(Math.max(b.scrollHeight,b.getBoundingClientRect?b.getBoundingClientRect().height:0)):Math.max(b?b.scrollHeight:0,de.scrollHeight);call('setSize',[w,h]);}catch(e){}}
       if(document.readyState!=='loading')reportSize();else document.addEventListener('DOMContentLoaded',reportSize);
       window.addEventListener('load',reportSize);
       try{if(window.ResizeObserver&&document.body){new ResizeObserver(reportSize).observe(document.body);}}catch(e){}
@@ -3372,6 +3432,8 @@ class InAppMessagingManager {
             container.remove();
         }
         this.iframes.delete(campaignId);
+        this.frameMaxWidths.delete(campaignId);
+        this.unwatchViewportIfIdle();
         if (backdrop) {
             backdrop.remove();
         }
@@ -3599,6 +3661,8 @@ class InAppMessagingManager {
         this.displayedMessages.clear();
         this.watchedAttributes.clear();
         this.iframes.clear();
+        this.frameMaxWidths.clear();
+        this.unwatchViewportIfIdle();
         this.logger.info('In-app messaging state cleared');
     }
     forgetImpressions() {
@@ -3639,6 +3703,8 @@ class InAppMessagingManager {
         this.impressionTimestamps.clear();
         this.watchedAttributes.clear();
         this.iframes.clear();
+        this.frameMaxWidths.clear();
+        this.unwatchViewportIfIdle();
         if (typeof window !== 'undefined') {
             delete window[HOST_BRIDGE_KEY];
         }

package/dist/joryio.umd.js

@@ -1,5 +1,5 @@
 /**
- * Joryio Web SDK v1.3.0
+ * Joryio Web SDK v1.3.1-beta.2
  * (c) 2026 Joryio. All rights reserved.
  * @license Commercial - see https://github.com/joryio/joryio-web-sdk/blob/main/LICENSE
  */
@@ -9,7 +9,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JoryioSDK = {}));
 })(this, (function (exports) { 'use strict';
 
-    const SDK_VERSION = '1.3.0';
+    const SDK_VERSION = '1.3.1';
     const DEFAULT_API_ENDPOINT = 'https://api-eu1.joryio.com/api';
     function normalizeApiEndpoint(raw) {
         const trimmed = (raw || '').trim();
@@ -2267,6 +2267,21 @@
     function escapeStyleText(css) {
         return typeof css === 'string' ? css.replace(/<\//g, '<\\/') : '';
     }
+    const IN_APP_DEFAULT_MAX_WIDTH = { modal: 600, slideup: 400 };
+    const IN_APP_VIEWPORT_MARGIN = 16;
+    function inAppMaxWidth(campaign) {
+        var _a;
+        if (campaign.type !== 'modal' && campaign.type !== 'slideup')
+            return null;
+        if (((_a = campaign.content) === null || _a === void 0 ? void 0 : _a.kind) !== 'html')
+            return null;
+        const mw = campaign.content.maxWidth;
+        return typeof mw === 'number' && Number.isFinite(mw) && mw > 0 ? Math.floor(mw) : IN_APP_DEFAULT_MAX_WIDTH[campaign.type];
+    }
+    function inAppFrameWidth(maxWidth, viewportWidth, margin = IN_APP_VIEWPORT_MARGIN) {
+        const available = Math.max(0, Math.floor(viewportWidth) - 2 * margin);
+        return Math.max(0, Math.min(Math.floor(maxWidth), available));
+    }
     const HOST_BRIDGE_KEY = '__joryioInApp';
     const IMPRESSIONS_STORAGE_KEY = 'inapp_impressions';
     const MAX_DISPLAYED_MESSAGES = 500;
@@ -2382,6 +2397,7 @@
             this.syncAgain = false;
             this.claimed = new Set();
             this.iframes = new Map();
+            this.frameMaxWidths = new Map();
             this.allowHtmlJsInAppMessages = false;
             this.bridge = null;
             this.auth = null;
@@ -2501,16 +2517,13 @@
                     this.trackImpression(campaignId, 'clicked').catch(() => { });
                     return this.submitForm(campaignId, values);
                 },
-                setSize: (campaignId, width, height) => {
+                setSize: (campaignId, _width, height) => {
                     var _a;
                     const iframe = this.iframes.get(campaignId);
                     if (!iframe || !Number.isFinite(height) || height <= 0)
                         return;
                     const type = (_a = this.displayedMessages.get(campaignId)) === null || _a === void 0 ? void 0 : _a.campaign.type;
                     iframe.style.height = type === 'fullscreen' ? '100%' : `${Math.ceil(height)}px`;
-                    if ((type === 'modal' || type === 'slideup') && Number.isFinite(width) && width > 0) {
-                        iframe.style.width = `${Math.ceil(width)}px`;
-                    }
                 },
             };
         }
@@ -3208,6 +3221,13 @@
                 if (campaign.type === 'banner' || campaign.type === 'fullscreen') {
                     iframe.style.width = '100%';
                 }
+                const maxWidth = inAppMaxWidth(campaign);
+                if (maxWidth !== null) {
+                    container.style.maxWidth = 'none';
+                    this.frameMaxWidths.set(campaign.id, maxWidth);
+                    iframe.style.width = `${inAppFrameWidth(maxWidth, this.hostViewportWidth())}px`;
+                    this.watchViewport();
+                }
                 iframe.srcdoc = this.buildSrcdoc(campaign.id, renderedHtml, ((_d = campaign.content) === null || _d === void 0 ? void 0 : _d.kind) === 'html' ? campaign.content.css : '', campaign.type);
                 container.appendChild(iframe);
                 this.iframes.set(campaign.id, iframe);
@@ -3261,13 +3281,53 @@
             this.callHost('onMessageDisplay', () => { var _a, _b; return (_b = (_a = this.displayOptions).onDisplay) === null || _b === void 0 ? void 0 : _b.call(_a, message); });
             this.logger.info(`Displayed campaign: ${campaign.name} (${campaign.id})`);
         }
+        hostViewportWidth() {
+            const doc = typeof document !== 'undefined' ? document.documentElement : null;
+            const cw = doc && typeof doc.clientWidth === 'number' ? doc.clientWidth : 0;
+            if (cw > 0)
+                return cw;
+            return typeof window !== 'undefined' && typeof window.innerWidth === 'number' ? window.innerWidth : 0;
+        }
+        sizeContentFrame(campaignId) {
+            const iframe = this.iframes.get(campaignId);
+            const maxWidth = this.frameMaxWidths.get(campaignId);
+            if (!iframe || maxWidth === undefined)
+                return;
+            iframe.style.width = `${inAppFrameWidth(maxWidth, this.hostViewportWidth())}px`;
+        }
+        watchViewport() {
+            if (this.viewportListener || typeof window === 'undefined' || typeof window.addEventListener !== 'function')
+                return;
+            this.viewportListener = () => {
+                if (this.viewportTimer)
+                    clearTimeout(this.viewportTimer);
+                this.viewportTimer = setTimeout(() => {
+                    this.viewportTimer = undefined;
+                    for (const id of this.frameMaxWidths.keys())
+                        this.sizeContentFrame(id);
+                }, 100);
+            };
+            window.addEventListener('resize', this.viewportListener);
+        }
+        unwatchViewportIfIdle() {
+            if (this.frameMaxWidths.size > 0 || !this.viewportListener)
+                return;
+            if (typeof window !== 'undefined' && typeof window.removeEventListener === 'function') {
+                window.removeEventListener('resize', this.viewportListener);
+            }
+            this.viewportListener = undefined;
+            if (this.viewportTimer) {
+                clearTimeout(this.viewportTimer);
+                this.viewportTimer = undefined;
+            }
+        }
         buildSrcdoc(campaignId, html, css, type) {
             const cid = JSON.stringify(campaignId);
             const key = JSON.stringify(HOST_BRIDGE_KEY);
             const contentSized = type === 'modal' || type === 'slideup';
-            const bodySizing = contentSized ? 'body{display:inline-block;max-width:100vw;}' : '';
+            const bodySizing = contentSized ? 'body{display:flow-root;}' : '';
             const bootstrap = `(function(){
-      var CID=${cid},KEY=${key};
+      var CID=${cid},KEY=${key},SIZED=${contentSized ? 'true' : 'false'};
       // Per-device visibility: tag the root with the REAL device class from the
       // HOST page viewport (the iframe is message-sized, so its own innerWidth is
       // useless here). The jr-vp-* → jr-hide-* rules in <style> then hide elements
@@ -3316,7 +3376,7 @@
         var p=window.joryioBridge.submitForm(d);if(!p||typeof p.then!=='function'){msg('This form cannot be sent here.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false;return}
         p.then(function(r){if(r&&r.ok){if(r.redirect){window.joryioBridge.navigate(r.redirect,'_top');return}var els2=f.querySelectorAll('input,select,textarea,button');for(var j=0;j<els2.length;j++){els2[j].disabled=true}msg(r.message||'Thank you.',true)}else{msg((r&&(r.message||(r.errors&&r.errors[0])))||'Something went wrong. Please try again.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false}}).catch(function(){msg('Something went wrong. Please try again.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false});
       },true);
-      function reportSize(){try{var b=document.body,de=document.documentElement;var w=Math.max(b?b.scrollWidth:0,de.scrollWidth);var h=Math.max(b?b.scrollHeight:0,de.scrollHeight);call('setSize',[w,h]);}catch(e){}}
+      function reportSize(){try{var b=document.body,de=document.documentElement;var w=Math.max(b?b.scrollWidth:0,de.scrollWidth);var h=SIZED&&b?Math.ceil(Math.max(b.scrollHeight,b.getBoundingClientRect?b.getBoundingClientRect().height:0)):Math.max(b?b.scrollHeight:0,de.scrollHeight);call('setSize',[w,h]);}catch(e){}}
       if(document.readyState!=='loading')reportSize();else document.addEventListener('DOMContentLoaded',reportSize);
       window.addEventListener('load',reportSize);
       try{if(window.ResizeObserver&&document.body){new ResizeObserver(reportSize).observe(document.body);}}catch(e){}
@@ -3378,6 +3438,8 @@
                 container.remove();
             }
             this.iframes.delete(campaignId);
+            this.frameMaxWidths.delete(campaignId);
+            this.unwatchViewportIfIdle();
             if (backdrop) {
                 backdrop.remove();
             }
@@ -3605,6 +3667,8 @@
             this.displayedMessages.clear();
             this.watchedAttributes.clear();
             this.iframes.clear();
+            this.frameMaxWidths.clear();
+            this.unwatchViewportIfIdle();
             this.logger.info('In-app messaging state cleared');
         }
         forgetImpressions() {
@@ -3645,6 +3709,8 @@
             this.impressionTimestamps.clear();
             this.watchedAttributes.clear();
             this.iframes.clear();
+            this.frameMaxWidths.clear();
+            this.unwatchViewportIfIdle();
             if (typeof window !== 'undefined') {
                 delete window[HOST_BRIDGE_KEY];
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joryio/web-sdk",
-  "version": "1.3.0",
+  "version": "1.3.1-beta.2",
   "description": "Joryio Web Tracking SDK - Lightweight analytics and event tracking",
   "main": "dist/joryio.cjs.js",
   "module": "dist/joryio.mjs",

package/src/core/config.ts

@@ -2,7 +2,7 @@
  * SDK Configuration Types and Defaults
  */
 
-export const SDK_VERSION = '1.3.0'; // keep in sync with package.json — the backend serves this in X-SDK-Version headers
+export const SDK_VERSION = '1.3.1'; // keep in sync with package.json — the backend serves this in X-SDK-Version headers
 export const DEFAULT_API_ENDPOINT = 'https://api-eu1.joryio.com/api';
 
 /**
@@ -88,17 +88,20 @@ export interface InAppOptions {
    *
    * What actually happens, because the name alone cannot carry it:
    *
-   * - The server strips `<script>` and every `on*` handler from the authored
-   *   HTML before it is sent, so author JavaScript does NOT run in normal
-   *   operation.
-   * - The message is still rendered in an iframe with `allow-scripts
-   *   allow-same-origin`, because this SDK's own bootstrap runs there (height
+   * - The server keeps the authored HTML as written (only `<base>` and
+   *   `<meta http-equiv="refresh">` are removed), so `<script>` and `on*`
+   *   handlers reach the browser - and do NOT run: the frame carries a fresh
+   *   nonce Content-Security-Policy per message, and only the SDK's bootstrap
+   *   has the nonce. Buttons and forms work through that bootstrap
+   *   (`data-joryio-action`, `data-jry-form`), not through author script.
+   * - The message is rendered in an iframe with `allow-scripts
+   *   allow-same-origin`, because the bootstrap runs there (height
    *   reporting, click logging, the host bridge). That frame therefore CAN
    *   execute script, at your page's origin.
-   * - So the residual risk is a sanitiser bypass: if one were ever found,
-   *   injected script would run with your origin's privileges. That is why
-   *   this is opt-in and why the name keeps `Js` - `allowHtmlInAppMessages`
-   *   alone would read like a formatting preference.
+   * - So the residual risk is a gap in the CSP (a browser that does not
+   *   enforce it): author script would then run with your origin's
+   *   privileges. That is why this is opt-in and why the name keeps `Js` -
+   *   `allowHtmlInAppMessages` alone would read like a formatting preference.
    *
    * Leaving it off does not disable in-app messaging: NATIVE messages still
    * display, because they are data rendered into DOM text nodes with no