v7.0.29

Author: boehlerlukas

build/index.js

@@ -3,7 +3,7 @@ const Gleap = window.Gleap;
 // Gleap.setFrameUrl("http://localhost:3001");
 // Gleap.setLanguage("en");
 // Gleap.setApiUrl("http://localhost:9000");
-Gleap.initialize("KProDXhMS0V3UUku2iNnrZ4XsBnAYzxt");
+Gleap.initialize("ogWhNhuiZcGWrva5nlDS8l7a78OfaLlV");
 
 Gleap.identify("user_19283", {
   name: "Franz",

demo/main.js

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "7.0.28",
+  "version": "7.0.29",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

package.json

@@ -1,6 +1,6 @@
 import { injectStyledCSS } from "./UI";
 import GleapNetworkIntercepter from "./GleapNetworkIntercepter";
-import { gleapDataParser } from "./GleapHelper";
+import { gleapDataParser, runFunctionWhenDomIsReady } from "./GleapHelper";
 import GleapSession from "./GleapSession";
 import GleapStreamedEvent from "./GleapStreamedEvent";
 import GleapConfigManager from "./GleapConfigManager";
@@ -117,17 +117,8 @@ class Gleap {
       // Run auto configuration.
       GleapConfigManager.getInstance().start()
         .then(() => {
-          if (
-            document.readyState === "complete" ||
-            document.readyState === "loaded" ||
-            document.readyState === "interactive"
-          ) {
-            instance.postInitialization();
-          } else {
-            document.addEventListener("DOMContentLoaded", function (event) {
-              instance.postInitialization();
-            });
-          }
+          // Inject the Gleap frame.
+          GleapFrameManager.getInstance().injectFrame();
         })
         .catch(function (err) {
           console.warn("Failed to initialize Gleap.");
@@ -333,29 +324,15 @@ class Gleap {
     backgroundColor = "#ffffff",
     borderRadius = 20,
   ) {
-    if (
-      document.readyState === "complete" ||
-      document.readyState === "loaded" ||
-      document.readyState === "interactive"
-    ) {
+    runFunctionWhenDomIsReady(() => {
       injectStyledCSS(
         primaryColor,
         headerColor,
         buttonColor,
         borderRadius,
         backgroundColor
       );
-    } else {
-      document.addEventListener("DOMContentLoaded", function (event) {
-        injectStyledCSS(
-          primaryColor,
-          headerColor,
-          buttonColor,
-          borderRadius,
-          backgroundColor
-        );
-      });
-    }
+    });
   }
 
   /**
@@ -476,19 +453,6 @@ class Gleap {
     return !isLocalHost;
   }
 
-  /**
-   * Post initialization
-   */
-  postInitialization() {
-    // Load session.
-    const onGleapReady = function () {
-      setTimeout(() => {
-        GleapFrameManager.getInstance().injectFrame();
-      }, 100);
-    }
-    GleapSession.getInstance().setOnSessionReady(onGleapReady.bind(this));
-  }
-
   softReInitialize() {
     GleapFeedbackButtonManager.getInstance().injectedFeedbackButton = false;
     GleapFrameManager.getInstance().injectedFrame = false;

published/7.0.29/index.js

@@ -75,6 +75,21 @@ export default class GleapConfigManager {
     });
   };
 
+  applyStylesFromConfig() {
+    const flowConfig = this.flowConfig;
+    if (flowConfig && flowConfig.color) {
+      Gleap.setStyles(
+        flowConfig.color,
+        flowConfig.headerColor,
+        flowConfig.buttonColor,
+        flowConfig.backgroundColor
+          ? flowConfig.backgroundColor
+          : "#FFFFFF",
+        flowConfig.borderRadius,
+      );
+    }
+  }
+
   /**
    * Applies the Gleap config.
    * @param {*} config
@@ -87,17 +102,8 @@ export default class GleapConfigManager {
       this.flowConfig = flowConfig;
       this.projectActions = projectActions;
 
-      if (flowConfig.color) {
-        Gleap.setStyles(
-          flowConfig.color,
-          flowConfig.headerColor,
-          flowConfig.buttonColor,
-          flowConfig.backgroundColor
-            ? flowConfig.backgroundColor
-            : "#FFFFFF",
-          flowConfig.borderRadius,
-        );
-      }
+      // Update styles.
+      this.applyStylesFromConfig();
 
       // Send config update.
       GleapFrameManager.getInstance().sendConfigUpdate();

published/latest/index.js

@@ -1,4 +1,5 @@
 import { GleapStreamedEvent, GleapPreFillManager, GleapCustomActionManager, GleapEventManager, GleapMarkerManager, GleapFeedback, GleapFeedbackButtonManager, GleapTranslationManager, GleapSession, GleapConfigManager } from "./Gleap";
+import { runFunctionWhenDomIsReady } from "./GleapHelper";
 
 export default class GleapFrameManager {
   frameUrl = "https://frame.gleap.io";
@@ -55,15 +56,22 @@ export default class GleapFrameManager {
     }
     this.injectedFrame = true;
 
-    var elem = document.createElement("div");
-    elem.className = "gleap-frame-container gleap-frame-container--hidden gleap-hidden";
-    elem.innerHTML = `<div class="gleap-frame-container-inner"><iframe src="${this.frameUrl}" class="gleap-frame" scrolling="yes" title="Gleap Widget Window" allow="autoplay; encrypted-media; fullscreen;" frameborder="0"></iframe></div>`;
-    document.body.appendChild(elem);
+    // Apply CSS.
+    GleapConfigManager.getInstance().applyStylesFromConfig();
 
-    this.gleapFrameContainer = elem;
-    this.gleapFrame = document.querySelector(".gleap-frame");
+    // Inject the frame manager after it has been loaded.
+    runFunctionWhenDomIsReady(() => {
+      // Inject widget HTML.
+      var elem = document.createElement("div");
+      elem.className = "gleap-frame-container gleap-frame-container--hidden gleap-hidden";
+      elem.innerHTML = `<div class="gleap-frame-container-inner"><iframe src="${this.frameUrl}" class="gleap-frame" scrolling="yes" title="Gleap Widget Window" allow="autoplay; encrypted-media; fullscreen;" frameborder="0"></iframe></div>`;
+      document.body.appendChild(elem);
 
-    this.updateFrameStyle();
+      this.gleapFrameContainer = elem;
+      this.gleapFrame = document.querySelector(".gleap-frame");
+
+      this.updateFrameStyle();
+    });
   };
 
   updateFrameStyle = () => {

src/Gleap.js

@@ -127,3 +127,15 @@ export const getDOMElementDescription = (element, html = true) => {
 
   return `${htmlPre}${elementTag}${elementId}${elementClass}${htmlPost}${innerText}${htmlPre}/${elementTag}${htmlPost}`;
 }
+
+export const runFunctionWhenDomIsReady = (callback) => {
+  if (
+    document.readyState === "complete" ||
+    document.readyState === "loaded" ||
+    document.readyState === "interactive"
+  ) {
+    callback();
+  } else {
+    document.addEventListener("DOMContentLoaded", callback);
+  }
+}