v14.2.6

Author: boehlerlukas

build/cjs/index.js

@@ -161,7 +161,6 @@
 
       <!-- Main content wireframe blocks -->
       <main class="main-placeholder" id="main1">
-        <input placeholder="Name" type="text" id="input1" />
         <div class="wireframe-block"></div>
         <div class="wireframe-block"></div>
         <div class="wireframe-block"></div>
@@ -172,6 +171,9 @@
 
       <main class="main-placeholder-2" id="main2" style="display: none">
         <div class="wireframe-block--title"></div>
+        <div>
+          <input id="namefield" type="text" placeholder="Enter your name" />
+        </div>
         <div class="wireframe-block-2">
           <div class="wireframe-block--text" style="width: 80%"></div>
           <div class="wireframe-block--text" style="width: 87%"></div>

build/esm/index.mjs

@@ -1,10 +1,10 @@
 const Gleap = window.Gleap;
 
-// Gleap.setFrameUrl("http://0.0.0.0:3001");
-// Gleap.setApiUrl("http://0.0.0.0:9000");
-// Gleap.setWSApiUrl("ws://0.0.0.0:9000");
+Gleap.setFrameUrl("http://0.0.0.0:3001");
+Gleap.setApiUrl("http://0.0.0.0:9000");
+Gleap.setWSApiUrl("ws://0.0.0.0:9000");
 
-Gleap.initialize("ng6GlnVz6BEUyxFu9nVCg1dlrfHz8tTK");
+Gleap.initialize("MJwWCcTa1rl6Aor6ENPRN1TADFhQ05a9");
 
 // const lastMonthDate = new Date();
 // lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);

demo/index.html

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

demo/main.js

@@ -446,6 +446,23 @@ export default class GleapCopilotTours {
           opacity: 0.8;
         }
 
+        .${copilotJoinedContainerId}-dismiss {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding-right: 3px;
+        }
+
+        .${copilotJoinedContainerId}-dismiss svg {
+          width: 15px;
+          height: auto;
+          cursor: pointer;
+        }
+
+        .${copilotJoinedContainerId}-dismiss svg:hover {
+          opacity: 0.8;
+        }
+
         @keyframes pulsate {
           0% {
             transform: scale(1);
@@ -576,7 +593,13 @@ export default class GleapCopilotTours {
       <span>${this.productTourData?.kaiSlug}</span>
       <div class="${copilotJoinedContainerId}-mute">
         ${loadIcon(this.audioMuted ? "unmute" : "mute")}
-      </div>
+      </div>${
+        this.productTourData?.allowClose
+          ? `<div class="${copilotJoinedContainerId}-dismiss">
+        ${loadIcon("dismiss")}
+      </div>`
+          : ""
+      }
     `;
     document.body.appendChild(copilotInfoContainer);
 
@@ -596,6 +619,14 @@ export default class GleapCopilotTours {
           loadIcon(self.audioMuted ? "unmute" : "mute");
       });
 
+    if (this.productTourData?.allowClose) {
+      document
+        .querySelector(`.${copilotJoinedContainerId}-dismiss`)
+        .addEventListener("click", () => {
+          this.completeTour(false);
+        });
+    }
+
     // Append elements
     container.appendChild(svgMouse);
     container.appendChild(infoBubble);
@@ -660,7 +691,7 @@ export default class GleapCopilotTours {
       const gotToNextStep = () => {
         if (currentStep.mode === "INPUT" && element) {
           // Wait for text to be entered. Continue tour on enter. element is the input.
-          function handleClick() {
+          function proceedClickmode() {
             document
               .querySelector(`#${pointerContainerId}`)
               .classList.remove("copilot-pointer-container-clickmode");
@@ -676,38 +707,65 @@ export default class GleapCopilotTours {
             self.renderNextStep();
           }
 
-          function handleInputEvent(e) {
-            if (e.target.value.length === 0) return;
+          const inputModeType = currentStep.inputType ?? "default";
 
-            const cursor = document.getElementById(
-              `${copilotInfoBubbleId}-content`
-            );
-            if (!cursor) return;
+          if (inputModeType === "default") {
+            function handleInputEvent(e) {
+              if (e.target.value.length === 0) return;
 
-            cursor.innerHTML = `${GleapTranslationManager.translateText(
-              `next`
-            )} ${arrowRightIcon}`;
-            cursor.addEventListener("click", handleClick, { once: true });
+              const cursor = document.getElementById(
+                `${copilotInfoBubbleId}-content`
+              );
+              if (!cursor) return;
 
-            // Add highlight to the input fields. red shadow glow.
-            element.classList.add("gleap-input-highlight");
+              cursor.innerHTML = `${GleapTranslationManager.translateText(
+                `next`
+              )} ${arrowRightIcon}`;
+              cursor.addEventListener("click", proceedClickmode, {
+                once: true,
+              });
 
-            document
-              .querySelector(`#${pointerContainerId}`)
-              .classList.add("copilot-pointer-container-clickmode");
+              // Add highlight to the input fields. red shadow glow.
+              element.classList.add("gleap-input-highlight");
 
-            // Remove the input event listener after execution
-            element.removeEventListener("input", handleInputEvent);
-          }
+              document
+                .querySelector(`#${pointerContainerId}`)
+                .classList.add("copilot-pointer-container-clickmode");
 
-          element.addEventListener("input", handleInputEvent);
+              // Remove the input event listener after execution
+              element.removeEventListener("input", handleInputEvent);
+            }
 
-          // Focus on the input.
-          element.addEventListener("blur", () => {
-            element.focus();
-          });
+            element.addEventListener("input", handleInputEvent);
 
-          element.focus();
+            // Focus on the input.
+            element.addEventListener("blur", () => {
+              element.focus();
+            });
+
+            element.focus();
+          } else {
+            // Set the input value, wait and proceed.
+            const inputValue = currentStep.inputValue ?? "";
+
+            let index = 0;
+            function typeCharacter() {
+              if (index < inputValue.length) {
+                // Append one character at a time.
+                element.value += inputValue[index];
+                index++;
+
+                setTimeout(typeCharacter, 100);
+              } else {
+                setTimeout(() => {
+                  proceedClickmode();
+                }, 1200);
+              }
+            }
+
+            // Start the typewriter effect.
+            typeCharacter();
+          }
 
           return;
         }