@letscooee/web-sdk 0.0.5 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+# 0.0.9
+
+1. Fix: glassmorphism on iOS.
+2. Fix: Fix rendering scaled images.
+3. Fix: Update in KPI for CTA.
+4. Fix: Do not remove in-app if being used inside an element.
+
+# 0.0.8
+
+1. Feature: Ability of InApp to be rendered inside an element.
+2. Fix: Overflowed content should not be rendered.
+3. Fix: Placing in-app on east direction.
+
+# 0.0.7
+
+More feature support in the sdk.
+
+# 0.0.6
+
+1. Build: Upgrade TypeScript to 4.4.
+2. Fix: Convert \n to `<br>` in texts.
+
 # 0.0.5
 
 Supporting changes based on the in-app composer.

package/README.md

@@ -27,11 +27,11 @@ code before calling any other CooeeSDK functions.
 <script src="https://cdn.jsdelivr.net/npm/@letscooee/web-sdk@latest/dist/sdk.min.js" async></script>
 <script>
     window.CooeeSDK = window.CooeeSDK || {events: [], profile: [], account: []};
-    CooeeSDK.account.push({"appID": "MY_COOEE_APP_ID", "appSecret": "MY_COOEE_APP_SECRET"});
+    CooeeSDK.account.push({"appID": "MY_COOEE_APP_ID"});
 </script>
 ```
 
-Replace `MY_COOEE_APP_ID` & `MY_COOEE_APP_SECRET` with the app id & secret given to you.
+Replace `MY_COOEE_APP_ID` with the app id as seen in your Cooee dashboard.
 
 #### Step 2: Track Custom Events
 

package/dist/constants.js

@@ -8,8 +8,7 @@ var Constants = /** @class */ (function () {
     function Constants() {
     }
     Constants.API_URL = 'https://api.sdk.letscooee.com';
-    Constants.SDK_VERSION = '0.0.4';
-    Constants.SDK_VERSION_CODE = 4;
+    Constants.SDK_VERSION = require('../package.json').version;
     Constants.SDK_DEBUG = false;
     Constants.SDK = 'WEB';
     Constants.LOG_PREFIX = 'CooeeSDK';
@@ -26,10 +25,15 @@ var Constants = /** @class */ (function () {
     Constants.STORAGE_FIRST_TIME_LAUNCH = 'ifl';
     Constants.STORAGE_LAST_ACTIVE = 'la';
     Constants.STORAGE_TRIGGER_START_TIME = 'tst';
-    Constants.STORAGE_ACTIVE_TRIGGER_ID = 'atid';
+    Constants.STORAGE_ACTIVE_TRIGGER = 'at';
+    Constants.STORAGE_ACTIVE_TRIGGERS = 'ats';
     // endregion
     Constants.IDLE_TIME_IN_SECONDS = 30 * 60;
     Constants.IN_APP_CONTAINER_NAME = 'cooee-wrapper';
+    (function () {
+        var rawCode = Constants.SDK_VERSION.split('.').map(function (item) { return item.padStart(2, '0'); }).join('');
+        Constants.SDK_VERSION_CODE = parseInt(rawCode, 10);
+    })();
     return Constants;
 }());
 export { Constants };

package/dist/init/visibility-listener.js

@@ -89,7 +89,7 @@ var VisibilityListener = /** @class */ (function () {
                         }
                         props = {};
                         props[VisibilityListener.INACTIVE_DURATION] = duration;
-                        event = new Event('CE Web Active', props);
+                        event = new Event('CE App Foreground', props);
                         _a = event;
                         return [4 /*yield*/, new DevicePropertiesCollector().get()];
                     case 1:
@@ -113,7 +113,7 @@ var VisibilityListener = /** @class */ (function () {
                 duration = this.runtimeData.getTimeForActiveInSeconds();
                 props = {};
                 props[VisibilityListener.ACTIVE_DURATION] = duration;
-                this.apiService.sendEvent(new Event('CE Web Inactive', props));
+                this.apiService.sendEvent(new Event('CE App Background', props));
                 return [2 /*return*/];
             });
         });

package/dist/models/trigger/action/click-action-executor.js

@@ -124,21 +124,29 @@ var ClickActionExecutor = /** @class */ (function () {
      * Performs close action
      */
     ClickActionExecutor.prototype.closeAction = function () {
+        var _a;
         if (!this.action.close) {
             return;
         }
         new RootContainerRenderer().removeInApp();
         var startTime = LocalStorageHelper.getNumber(Constants.STORAGE_TRIGGER_START_TIME, new Date().getTime());
-        var triggerID = LocalStorageHelper.getString(Constants.STORAGE_ACTIVE_TRIGGER_ID, '');
+        var triggerID = (_a = LocalStorageHelper.getObject(Constants.STORAGE_ACTIVE_TRIGGER)) === null || _a === void 0 ? void 0 : _a.triggerID;
         var diffInSeconds = (new Date().getTime() - startTime) / 1000;
+        var closeBehaviour;
+        if (this.action.ext || this.action.up || this.action.kv ||
+            this.action.iab || this.action.prompt || this.action.share) {
+            closeBehaviour = 'CTA';
+        }
+        else {
+            closeBehaviour = 'Close';
+        }
         var eventProps = {
             'triggerID': triggerID,
-            'Close Behaviour': 'CTA',
-            'Duration': diffInSeconds,
+            'closeBehaviour': closeBehaviour,
+            'duration': diffInSeconds,
         };
         this.apiService.sendEvent(new Event('CE Trigger Closed', eventProps));
         LocalStorageHelper.remove(Constants.STORAGE_TRIGGER_START_TIME);
-        LocalStorageHelper.remove(Constants.STORAGE_ACTIVE_TRIGGER_ID);
     };
     /**
      * Performs share action i.e. share some url on CTA.
@@ -152,7 +160,7 @@ var ClickActionExecutor = /** @class */ (function () {
         // TODO test in mobile browsers
         var share = navigator.share;
         if (!share) {
-            Log.w('Navigator.share is not compatible with this browser');
+            Log.warning('Navigator.share is not compatible with this browser');
             return;
         }
         navigator.share({ 'text': this.action.share.text, 'title': 'Share' })
@@ -182,7 +190,7 @@ var ClickActionExecutor = /** @class */ (function () {
     ClickActionExecutor.prototype.promptPushNotificationPermission = function () {
         var _this = this;
         if (!('Notification' in window)) {
-            Log.w('This browser does not support desktop notification');
+            Log.warning('This browser does not support desktop notification');
             return;
         }
         // TODO Need device endpoints to update this property

package/dist/models/trigger/blocks/border.js

@@ -40,8 +40,10 @@ var Border = /** @class */ (function () {
     return Border;
 }());
 export { Border };
+/* eslint-disable no-unused-vars */
 export var BorderStyle;
 (function (BorderStyle) {
     BorderStyle[BorderStyle["SOLID"] = 1] = "SOLID";
     BorderStyle[BorderStyle["DASHED"] = 2] = "DASHED";
 })(BorderStyle || (BorderStyle = {}));
+/* eslint-enable no-unused-vars */

package/dist/models/trigger/elements/base-element.js

@@ -39,6 +39,7 @@ var BaseElement = /** @class */ (function () {
     return BaseElement;
 }());
 export { BaseElement };
+/* eslint-disable no-unused-vars */
 export var ElementType;
 (function (ElementType) {
     ElementType[ElementType["IMAGE"] = 1] = "IMAGE";
@@ -46,3 +47,4 @@ export var ElementType;
     ElementType[ElementType["BUTTON"] = 3] = "BUTTON";
     ElementType[ElementType["SHAPE"] = 100] = "SHAPE";
 })(ElementType || (ElementType = {}));
+/* eslint-disable no-unused-vars */

package/dist/models/trigger/elements/text-element.js

@@ -64,6 +64,7 @@ var TextPart = /** @class */ (function () {
     return TextPart;
 }());
 export { TextPart };
+/* eslint-disable no-unused-vars */
 export var TextAlign;
 (function (TextAlign) {
     TextAlign[TextAlign["START"] = 0] = "START";
@@ -77,3 +78,4 @@ export var TextScript;
     TextScript[TextScript["SUPER"] = 1] = "SUPER";
     TextScript[TextScript["SUB"] = 2] = "SUB";
 })(TextScript || (TextScript = {}));
+/* eslint-enable no-unused-vars */

package/dist/models/trigger/embedded-trigger.js

@@ -0,0 +1,26 @@
+/**
+ * This class store data related to triggers which are active/activated by clicking on the trigger notification or by
+ * looking an in-app trigger(in future). This would be commonly sent with events as <code>activeTrigger</code>.
+ *
+ * @author Abhishek Taparia
+ * @since 1.1.0
+ */
+var EmbeddedTrigger = /** @class */ (function () {
+    function EmbeddedTrigger(data) {
+        this.triggerID = data.id;
+        this.engagementID = data.engagementID;
+        this.expireAt = data.expireAt;
+        if (this.isExpired) {
+            this.expired = this.isExpired;
+        }
+    }
+    Object.defineProperty(EmbeddedTrigger.prototype, "isExpired", {
+        get: function () {
+            return this.expireAt < new Date().getTime();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return EmbeddedTrigger;
+}());
+export { EmbeddedTrigger };

package/dist/models/trigger/inapp/container.js

@@ -17,8 +17,88 @@ import { BaseElement } from '../elements';
 var Container = /** @class */ (function (_super) {
     __extends(Container, _super);
     function Container(data) {
-        return _super.call(this, data) || this;
+        var _a;
+        var _this = _super.call(this, data) || this;
+        _this.o = (_a = data.o) !== null && _a !== void 0 ? _a : ContainerOrigin.C;
+        return _this;
     }
+    Container.prototype.getStyles = function () {
+        var styles;
+        if (this.o === ContainerOrigin.NW) {
+            styles = {
+                top: 0,
+                left: 0,
+            };
+        }
+        else if (this.o === ContainerOrigin.N) {
+            styles = {
+                top: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+            };
+        }
+        else if (this.o === ContainerOrigin.NE) {
+            styles = {
+                top: 0,
+                right: 0,
+            };
+        }
+        else if (this.o === ContainerOrigin.E) {
+            styles = {
+                top: '50%',
+                right: 0,
+                transform: 'translateY(-50%)',
+            };
+        }
+        else if (this.o === ContainerOrigin.SE) {
+            styles = {
+                bottom: 0,
+                right: 0,
+            };
+        }
+        else if (this.o === ContainerOrigin.S) {
+            styles = {
+                bottom: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+            };
+        }
+        else if (this.o === ContainerOrigin.SW) {
+            styles = {
+                bottom: 0,
+                left: 0,
+            };
+        }
+        else if (this.o === ContainerOrigin.W) {
+            styles = {
+                top: '50%',
+                left: 0,
+                transform: 'translateY(-50%)',
+            };
+        }
+        else {
+            styles = {
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            };
+        }
+        styles.position = 'absolute';
+        styles.overflow = 'hidden';
+        return styles;
+    };
     return Container;
 }(BaseElement));
 export { Container };
+export var ContainerOrigin;
+(function (ContainerOrigin) {
+    ContainerOrigin[ContainerOrigin["NW"] = 1] = "NW";
+    ContainerOrigin[ContainerOrigin["N"] = 2] = "N";
+    ContainerOrigin[ContainerOrigin["NE"] = 3] = "NE";
+    ContainerOrigin[ContainerOrigin["W"] = 4] = "W";
+    ContainerOrigin[ContainerOrigin["C"] = 5] = "C";
+    ContainerOrigin[ContainerOrigin["E"] = 6] = "E";
+    ContainerOrigin[ContainerOrigin["SW"] = 7] = "SW";
+    ContainerOrigin[ContainerOrigin["S"] = 8] = "S";
+    ContainerOrigin[ContainerOrigin["SE"] = 9] = "SE";
+})(ContainerOrigin || (ContainerOrigin = {}));

package/dist/models/trigger/trigger-data.js

@@ -9,9 +9,9 @@ var TriggerData = /** @class */ (function () {
      * @param {Props} data payload
      */
     function TriggerData(data) {
-        this.duration = 0;
+        this.expireAt = new Date().getTime();
         this.id = data.id;
-        this.duration = data.duration;
+        this.expireAt = data.expireAt;
         this.version = data.version;
         this.engagementID = data.engagementID;
         this.internal = data.internal;

package/dist/models/trigger/trigger-helper.js

@@ -0,0 +1,52 @@
+import { LocalStorageHelper } from '../../utils/local-storage-helper';
+import { Constants } from '../../constants';
+import { EmbeddedTrigger } from './embedded-trigger';
+/**
+ * A small helper class for any kind of engagement trigger like caching or retrieving from local storage.
+ *
+ * @author Abhishek Taparia
+ * @since 0.0.7
+ */
+var TriggerHelper = /** @class */ (function () {
+    function TriggerHelper() {
+    }
+    /**
+     * Store the current active trigger details in local storage for "late engagement tracking".
+     * @param triggerData trigger data
+     */
+    TriggerHelper.storeActiveTrigger = function (triggerData) {
+        if (triggerData.id === 'test') {
+            return;
+        }
+        var activeTriggers = LocalStorageHelper.getObject(Constants.STORAGE_ACTIVE_TRIGGERS);
+        if (!activeTriggers) {
+            activeTriggers = [];
+        }
+        var embeddedTrigger = new EmbeddedTrigger(triggerData);
+        if (!embeddedTrigger.isExpired) {
+            activeTriggers.push(embeddedTrigger);
+        }
+        LocalStorageHelper.setObject(Constants.STORAGE_ACTIVE_TRIGGER, embeddedTrigger);
+        LocalStorageHelper.setObject(Constants.STORAGE_ACTIVE_TRIGGERS, activeTriggers);
+    };
+    /**
+     * Get the list of non-expired active triggers from local storage for "late engagement tracking".
+     *
+     * @return EmbeddedTrigger[] list of active triggers
+     */
+    TriggerHelper.getActiveTriggers = function () {
+        var activeTriggers = LocalStorageHelper.getObject(Constants.STORAGE_ACTIVE_TRIGGERS);
+        if (!activeTriggers) {
+            return [];
+        }
+        activeTriggers.forEach(function (trigger, index, array) {
+            if (new EmbeddedTrigger(trigger).isExpired) {
+                array.splice(index, 1);
+            }
+        });
+        LocalStorageHelper.setObject(Constants.STORAGE_ACTIVE_TRIGGERS, activeTriggers);
+        return activeTriggers;
+    };
+    return TriggerHelper;
+}());
+export { TriggerHelper };

package/dist/renderer/block-processor.js

@@ -1,5 +1,4 @@
 import { Renderer } from './renderer';
-import UAParser from 'ua-parser-js';
 import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
 import { getScalingFactor } from './index';
 import { Container } from '../models/trigger/inapp/container';
@@ -10,16 +9,13 @@ import { Container } from '../models/trigger/inapp/container';
  * @version 0.0.5
  */
 var BlockProcessor = /** @class */ (function () {
-    /**
-     * Constructor
-     */
     function BlockProcessor(parentHTMLEl, inappElement) {
+        this.renderer = Renderer.get();
         this.screenWidth = 0;
         this.screenHeight = 0;
         this.scalingFactor = getScalingFactor();
         this.parentHTMLEl = parentHTMLEl;
         this.inappElement = inappElement;
-        this.renderer = new Renderer();
         this.screenWidth = this.renderer.getWidth();
         this.screenHeight = this.renderer.getHeight();
     }
@@ -40,7 +36,6 @@ var BlockProcessor = /** @class */ (function () {
         this.processSpaceBlock();
         this.processTransformBlock();
         this.registerAction();
-        this.renderer.setStyle(this.inappHTMLEl, 'overflow', 'visible');
         this.renderer.setStyle(this.inappHTMLEl, 'outline', 'none');
     };
     /**
@@ -141,7 +136,8 @@ var BlockProcessor = /** @class */ (function () {
         if (!action) {
             return;
         }
-        this.inappHTMLEl.addEventListener('click', function () {
+        this.inappHTMLEl.addEventListener('click', function (event) {
+            event.stopPropagation();
             new ClickActionExecutor(action).execute();
         });
     };
@@ -149,7 +145,6 @@ var BlockProcessor = /** @class */ (function () {
      * Process background block of the element
      */
     BlockProcessor.prototype.processBackgroundBlock = function () {
-        var _a;
         var bg = this.inappElement.bg;
         if (!bg) {
             return;
@@ -159,12 +154,11 @@ var BlockProcessor = /** @class */ (function () {
         if (this.inappElement instanceof Container) {
             htmlElement = htmlElement.parentElement;
         }
-        var prefix = '';
-        if ((_a = new UAParser().getBrowser().name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('safari')) {
-            prefix = '-webkit-';
-        }
         if (bg.glossy) {
-            this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "blur(" + bg.glossy.radius + "px)");
+            // Style for Apple devices
+            this.renderer.setStyle(htmlElement, '-webkit-backdrop-filter', "blur(" + bg.glossy.radius + "px)");
+            // Style for other devices
+            this.renderer.setStyle(htmlElement, 'backdrop-filter', "blur(" + bg.glossy.radius + "px)");
             if (bg.glossy.color) {
                 this.processColourBlock(bg.glossy.color, 'background', htmlElement);
             }
@@ -185,7 +179,10 @@ var BlockProcessor = /** @class */ (function () {
             this.renderer.setStyle(htmlElement, 'background', value);
             this.renderer.setStyle(htmlElement, 'background-size', 'cover');
             if (bg.img.a) {
-                this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "opacity(" + bg.img.a + ")");
+                // Style for Apple devices
+                this.renderer.setStyle(htmlElement, '-webkit-backdrop-filter', "opacity(" + bg.img.a + ")");
+                // Style for other devices
+                this.renderer.setStyle(htmlElement, 'backdrop-filter', "opacity(" + bg.img.a + ")");
             }
         }
     };

package/dist/renderer/container-renderer.js

@@ -13,7 +13,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { ShapeRenderer } from './shape-renderer';
+import { BlockProcessor } from './block-processor';
 /**
  * Renders container element.
  *
@@ -24,6 +24,8 @@ var ContainerRenderer = /** @class */ (function (_super) {
     __extends(ContainerRenderer, _super);
     function ContainerRenderer(parentElement, inappElement) {
         var _this = _super.call(this, parentElement, inappElement) || this;
+        _this.inappHTMLEl = _this.renderer.createElement('div');
+        _this.insertElement();
         // Need to figure out the best way of doing this
         _this.inappElement.w = 1080;
         _this.inappElement.h = 1920;
@@ -31,14 +33,14 @@ var ContainerRenderer = /** @class */ (function (_super) {
     }
     /**
      * Render group element from layers list in {@link InAppTrigger} block.
+     * @return The instance of this renderer.
      */
     ContainerRenderer.prototype.render = function () {
-        _super.prototype.render.call(this);
+        this.processCommonBlocks();
         this.renderer.setStyle(this.inappHTMLEl, 'position', 'relative');
-        /*this.renderer.setStyle(this.inappHTMLEl, 'width', '100%');
-        this.renderer.setStyle(this.inappHTMLEl, 'height', '100%');*/
+        Object.assign(this.inappHTMLEl.style, this.inappElement.getStyles());
         return this;
     };
     return ContainerRenderer;
-}(ShapeRenderer));
+}(BlockProcessor));
 export { ContainerRenderer };

package/dist/renderer/iFrame-renderer.js

@@ -7,11 +7,8 @@ import { Constants } from '../constants';
  * @version 0.0.5
  */
 var IFrameRenderer = /** @class */ (function () {
-    /**
-     * Constructor
-     */
     function IFrameRenderer() {
-        this.renderer = new Renderer();
+        this.renderer = Renderer.get();
     }
     /**
      * Render iFrame element on CTAs.
@@ -20,7 +17,7 @@ var IFrameRenderer = /** @class */ (function () {
      * @private
      */
     IFrameRenderer.prototype.render = function (url) {
-        var root = this.renderer.getElementById(Constants.IN_APP_CONTAINER_NAME);
+        var root = document.querySelector("." + Constants.IN_APP_CONTAINER_NAME);
         var iFrameDiv = this.createIFrameContainer();
         this.createIFrameElement(iFrameDiv, url);
         // Create and render close button for iFrame with anchor tag

package/dist/renderer/image-renderer.js

@@ -33,8 +33,8 @@ var ImageRenderer = /** @class */ (function (_super) {
      */
     ImageRenderer.prototype.render = function () {
         this.renderer.setAttribute(this.inappHTMLEl, 'src', this.inappElement.src);
-        this.renderer.setStyle(this.inappHTMLEl, 'max-width', '100%');
-        this.renderer.setStyle(this.inappHTMLEl, 'max-height', '100%');
+        this.renderer.setStyle(this.inappHTMLEl, 'max-width', 'none');
+        this.renderer.setStyle(this.inappHTMLEl, 'max-height', 'none');
         this.renderer.setStyle(this.inappHTMLEl, 'display', 'block');
         this.renderer.setStyle(this.inappHTMLEl, 'margin', '0 auto');
         this.processCommonBlocks();

package/dist/renderer/in-app-renderer.js

@@ -5,6 +5,9 @@ import { LocalStorageHelper } from '../utils/local-storage-helper';
 import { Constants } from '../constants';
 import { ImageRenderer, RootContainerRenderer, ShapeRenderer, TextRenderer } from './';
 import { ContainerRenderer } from './container-renderer';
+import { TriggerHelper } from '../models/trigger/trigger-helper';
+import { SafeHttpService } from '../services/safe-http-service';
+import { Event } from '../models/event/event';
 /**
  * Renders In App trigger
  *
@@ -13,10 +16,13 @@ import { ContainerRenderer } from './container-renderer';
  */
 var InAppRenderer = /** @class */ (function () {
     /**
-     * Public constructor
+     * Public constructor.
+     *
+     * @param parent Place the in-app in the given parent instead of the document.body.
      */
-    function InAppRenderer() {
-        this.rootContainer = new RootContainerRenderer().render();
+    function InAppRenderer(parent) {
+        this.parent = parent;
+        this.rootContainer = new RootContainerRenderer(parent).render();
     }
     /**
      * Renders in-app trigger from payload received
@@ -27,11 +33,13 @@ var InAppRenderer = /** @class */ (function () {
         this.ian = triggerData.ian;
         try {
             this.renderContainer();
+            var event_1 = new Event('CE Trigger Displayed', { 'triggerID': triggerData.id });
+            SafeHttpService.getInstance().sendEvent(event_1);
             LocalStorageHelper.setNumber(Constants.STORAGE_TRIGGER_START_TIME, new Date().getTime());
-            LocalStorageHelper.setString(Constants.STORAGE_ACTIVE_TRIGGER_ID, triggerData.id);
+            TriggerHelper.storeActiveTrigger(triggerData);
         }
         catch (e) {
-            Log.e(e);
+            Log.error(e);
         }
     };
     /**
@@ -50,7 +58,7 @@ var InAppRenderer = /** @class */ (function () {
             new ShapeRenderer(parentEl, inappElement).render();
         }
         else {
-            Log.e('Unsupported element type- ' + inappElement.type);
+            Log.error('Unsupported element type- ' + inappElement.type);
         }
     };
     /**

package/dist/renderer/index.js

@@ -1,22 +1,26 @@
 import { Constants } from '../constants';
+import { Renderer } from './renderer';
 export { TextRenderer } from './text-renderer';
 export { ShapeRenderer } from './shape-renderer';
 export { ImageRenderer } from './image-renderer';
 export { RootContainerRenderer } from './root-container-renderer';
 export { IFrameRenderer } from './iFrame-renderer';
 /**
- * Calculate scaling factor according to screen sizes
+ * Calculate scaling factor according to parent most container where the in-app's root container will be rendered.
  * @return number scaling factor
  */
 export function getScalingFactor() {
-    var screenWidth = document.documentElement.clientWidth;
-    var screenHeight = document.documentElement.clientHeight;
+    var screenWidth = Renderer.get().getWidth();
+    var screenHeight = Renderer.get().getHeight();
+    var scalingFactor;
     if (screenWidth < screenHeight) {
         var shortEdge = Math.min(Constants.CANVAS_WIDTH, Constants.CANVAS_HEIGHT);
-        return screenWidth / shortEdge;
+        scalingFactor = screenWidth / shortEdge;
     }
     else {
         var longEdge = Math.max(Constants.CANVAS_WIDTH, Constants.CANVAS_HEIGHT);
-        return screenHeight / longEdge;
+        scalingFactor = screenHeight / longEdge;
     }
+    // The in-app should not scale beyond 100%
+    return Math.min(scalingFactor, 1);
 }

package/dist/renderer/renderer.js

@@ -5,21 +5,34 @@
  * @version 0.0.5
  */
 var Renderer = /** @class */ (function () {
+    // No need to instantiate this class.
     function Renderer() {
         this.doc = document;
     }
+    Renderer.get = function () {
+        if (!Renderer._instance) {
+            Renderer._instance = new Renderer();
+        }
+        return Renderer._instance;
+    };
     /**
-     * Get width of the browser
-     * @return {number} inner width of the browser
+     * Get width of the parent most container where the Cooee's root div will render.
+     * @return width of the parent most container.
      */
     Renderer.prototype.getWidth = function () {
+        if (this.parentContainer) {
+            return this.parentContainer.clientWidth;
+        }
         return document.documentElement.clientWidth;
     };
     /**
-     * Get height of the browser
-     * @return {number} inner height of the browser
+     * Get height of the parent most container where the Cooee's root div will render.
+     * @return height of the parent most container.
      */
     Renderer.prototype.getHeight = function () {
+        if (this.parentContainer) {
+            return this.parentContainer.clientHeight;
+        }
         return document.documentElement.clientHeight;
     };
     /**
@@ -53,7 +66,7 @@ var Renderer = /** @class */ (function () {
             element.style.removeProperty(styleName);
             return;
         }
-        element.style.setProperty(styleName, value);
+        element.style.setProperty(styleName, value, 'important');
     };
     /**
      * Set style of the element
@@ -65,12 +78,11 @@ var Renderer = /** @class */ (function () {
         element.setAttribute(attrName, value);
     };
     /**
-     * Get element by tag id
-     * @param {string} id id of the element
-     * @return {HTMLElement | null} returns element if present, otherwise null
+     * Set the parent most container where the Cooee's In-App's root div will render.
+     * @param container The HTML holder element.
      */
-    Renderer.prototype.getElementById = function (id) {
-        return this.doc.getElementById(id);
+    Renderer.prototype.setParentContainer = function (container) {
+        this.parentContainer = container;
     };
     return Renderer;
 }());