v14.6.0

Author: boehlerlukas

build/cjs/index.js

@@ -50,7 +50,9 @@ export namespace Gleap {
   function setWSApiUrl(wsApiUrl: string): void;
   function setFrameUrl(frameUrl: string): void;
   function closeBanner(): void;
+  function closeModal(): void;
   function setBannerUrl(bannerUrl: string): void;
+  function setModalUrl(modalUrl: string): void;
   function setMaxNetworkRequests(maxRequests: number): void;
   function startNetworkLogger(): void;
   function setNetworkLogsBlacklist(networkLogBlacklist: string[]): void;

build/esm/index.mjs

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "14.5.7",
+  "version": "14.6.0",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

index.d.ts

@@ -24,6 +24,7 @@ import GleapShortcutListener from "./GleapShortcutListener";
 import GleapPreFillManager from "./GleapPreFillManager";
 import GleapNotificationManager from "./GleapNotificationManager";
 import GleapBannerManager from "./GleapBannerManager";
+import GleapModalManager from "./GleapModalManager";
 import GleapAudioManager from "./GleapAudioManager";
 import GleapTagManager from "./GleapTagManager";
 import GleapAdminManager from "./GleapAdminManager";
@@ -307,6 +308,13 @@ class Gleap {
     GleapBannerManager.getInstance().removeBannerUI();
   }
 
+  /**
+   * Close any open modal.
+   */
+  static closeModal() {
+    GleapModalManager.getInstance().hideModal();
+  }
+
   /**
    * Enable or disable Gleap session tracking through cookies.
    * @param {*} useCookies
@@ -535,6 +543,14 @@ class Gleap {
     GleapBannerManager.getInstance().setBannerUrl(bannerUrl);
   }
 
+  /**
+   * Set a custom modal url.
+   * @param {string} modalUrl
+   */
+  static setModalUrl(modalUrl) {
+    GleapModalManager.getInstance().setModalUrl(modalUrl);
+  }
+
   /**
    * Set a custom frame api url.
    * @param {string} frameUrl
@@ -1182,6 +1198,8 @@ class Gleap {
           }
         } else if (action.actionType === "banner") {
           Gleap.showBanner(action);
+        } else if (action.actionType === "modal") {
+          Gleap.showModal(action);
         } else if (action.actionType === "tour") {
           Gleap.startProductTourWithConfig(action.outbound, action.data);
         } else {
@@ -1222,6 +1240,12 @@ class Gleap {
     } catch (e) {}
   }
 
+  static showModal(data) {
+    try {
+      GleapModalManager.getInstance().showModal(data);
+    } catch (e) {}
+  }
+
   static showNotification(data) {
     GleapNotificationManager.getInstance().showNotification(data);
   }
@@ -1319,6 +1343,7 @@ export {
   GleapAudioManager,
   GleapNotificationManager,
   GleapBannerManager,
+  GleapModalManager,
   GleapPreFillManager,
   GleapShortcutListener,
   GleapMarkerManager,

package.json

@@ -1,4 +1,4 @@
-import Gleap from "./Gleap";
+import Gleap, { GleapFrameManager } from "./Gleap";
 
 export default class GleapBannerManager {
   bannerUrl = "https://outboundmedia.gleap.io";
@@ -25,7 +25,7 @@ export default class GleapBannerManager {
   startCommunication() {
     // Add window message listener.
     window.addEventListener("message", (event) => {
-      if (event.origin !== this.bannerUrl) {
+      if (!this.bannerUrl?.includes(event.origin)) {
         return;
       }
 
@@ -59,6 +59,11 @@ export default class GleapBannerManager {
         if (data.name === "start-custom-action") {
           Gleap.triggerCustomAction(data.data?.action);
         }
+        if (data.name === "open-url") {
+          const url = data.data;
+          const newTab = data.newTab ? true : false;
+          GleapFrameManager.getInstance().urlHandler(url, newTab);
+        }
         if (data.name === "show-form") {
           Gleap.startFeedbackFlow(data.data?.formId);
         }
@@ -72,7 +77,11 @@ export default class GleapBannerManager {
           Gleap.openHelpCenterArticle(data.data?.articleId);
         }
         if (data.name === "show-checklist") {
-          Gleap.startChecklist(data.data?.checklistId, true, data.data?.sharedKey);
+          Gleap.startChecklist(
+            data.data?.checklistId,
+            true,
+            data.data?.sharedKey
+          );
         }
       } catch (exp) {}
     });

published/14.6.0/index.js

@@ -0,0 +1,168 @@
+import Gleap, { GleapConfigManager, GleapFrameManager } from "./Gleap";
+
+export default class GleapModalManager {
+  modalUrl = "https://outboundmedia.gleap.io/modal";
+  modalContainer = null;
+  modalData = null;
+  modalBackdropClickListener = null;
+
+  // singleton
+  static instance;
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new GleapModalManager();
+    }
+    return this.instance;
+  }
+
+  constructor() {
+    this._listenForMessages();
+  }
+
+  setModalUrl(url) {
+    this.modalUrl = url;
+  }
+
+  _listenForMessages() {
+    window.addEventListener("message", (event) => {
+      if (!this.modalUrl?.includes(event.origin)) {
+        return;
+      }
+
+      try {
+        const data = JSON.parse(event.data);
+
+        if (data.name === "modal-loaded" && this.modalData) {
+          const flowConfig = GleapConfigManager.getInstance().getFlowConfig();
+          const primaryColor = flowConfig.color ? flowConfig.color : "#485BFF";
+
+          this._postMessage({
+            name: "modal-data",
+            data: {
+              ...this.modalData,
+              primaryColor: primaryColor,
+            },
+          });
+        }
+        if (data.name === "modal-height") {
+          const height = data?.data?.height;
+          if (height) {
+            // Set the height of the modal iframe
+            const iframe =
+              this.modalContainer.querySelector(".gleap-modal-frame");
+            if (iframe) {
+              iframe.style.height = `${height}px`;
+            }
+          }
+        }
+        if (data.name === "modal-data-set") {
+          // TODO: Implement
+        }
+        if (data.name === "modal-close") {
+          this.hideModal();
+        }
+        if (data.name === "start-conversation") {
+          Gleap.startBot(data.data?.botId);
+        }
+        if (data.name === "start-custom-action") {
+          Gleap.triggerCustomAction(data.data?.action);
+        }
+        if (data.name === "open-url") {
+          const url = data.data;
+          const newTab = data.newTab ? true : false;
+          GleapFrameManager.getInstance().urlHandler(url, newTab);
+        }
+        if (data.name === "show-form") {
+          Gleap.startFeedbackFlow(data.data?.formId);
+        }
+        if (data.name === "show-survey") {
+          Gleap.showSurvey(data.data?.formId, data.data?.surveyFormat);
+        }
+        if (data.name === "show-news-article") {
+          Gleap.openNewsArticle(data.data?.articleId);
+        }
+        if (data.name === "show-help-article") {
+          Gleap.openHelpCenterArticle(data.data?.articleId);
+        }
+        if (data.name === "show-checklist") {
+          Gleap.startChecklist(
+            data.data?.checklistId,
+            true,
+            data.data?.sharedKey
+          );
+        }
+      } catch (exp) {}
+    });
+  }
+
+  _injectModalUI(modalData) {
+    if (this.modalContainer || !document.body) return false;
+
+    console.log("modalData", modalData);
+
+    this.modalData = modalData;
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "gleap-modal-wrapper";
+    wrapper.innerHTML = `
+      <div class="gleap-modal-backdrop"></div>
+      <div class="gleap-modal">
+        <iframe
+          src="${this.modalUrl}"
+          class="gleap-modal-frame"
+          scrolling="no"
+          title="Gleap Modal"
+          role="dialog"
+          frameborder="0"
+          allow="autoplay; encrypted-media; fullscreen; microphone *;"
+        ></iframe>
+      </div>
+    `;
+    document.body.appendChild(wrapper);
+    this.modalContainer = wrapper;
+
+    // Add on backdrop click listener
+    this.modalBackdropClickListener = this.modalContainer
+      .querySelector(".gleap-modal-backdrop")
+      .addEventListener("click", () => {
+        if (this.modalData?.showCloseButton ?? true) {
+          this.hideModal();
+        }
+      });
+
+    // lock background scroll
+    document.body.classList.add("gleap-modal-open");
+  }
+
+  _postMessage(message) {
+    try {
+      const frame = this.modalContainer.querySelector(".gleap-modal-frame");
+      if (frame?.contentWindow) {
+        frame.contentWindow.postMessage(
+          JSON.stringify({ ...message, type: "modal" }),
+          this.modalUrl
+        );
+      }
+    } catch (err) {}
+  }
+
+  showModal(modalData) {
+    if (modalData && modalData.config) {
+      this._injectModalUI(modalData.config);
+    }
+  }
+
+  hideModal() {
+    if (!this.modalContainer) return;
+
+    if (this.modalBackdropClickListener) {
+      this.modalContainer
+        .querySelector(".gleap-modal-backdrop")
+        .removeEventListener("click", this.modalBackdropClickListener);
+    }
+
+    document.body.removeChild(this.modalContainer);
+    this.modalContainer = null;
+    document.body.classList.remove("gleap-modal-open");
+  }
+}

published/latest/index.js

@@ -3,6 +3,7 @@ import {
   GleapBannerManager,
   GleapEventManager,
   GleapFrameManager,
+  GleapModalManager,
   GleapNotificationManager,
   GleapStreamedEvent,
   GleapTranslationManager,
@@ -150,6 +151,7 @@ export default class GleapSession {
     GleapNotificationManager.getInstance().clearAllNotifications(false);
     GleapNotificationManager.getInstance().setNotificationCount(0);
     GleapBannerManager.getInstance().removeBannerUI();
+    GleapModalManager.getInstance().hideModal();
 
     if (retry) {
       if (!isNaN(attemp)) {