v13.0.3

Author: boehlerlukas

package.json

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

src/GleapProductTours.js

@@ -44,6 +44,7 @@ export default class GleapProductTours {
             const step = steps[i];
 
             var message = "";
+            var hasSender = false;
 
             if (step.type === "video-pointer") {
                 message = `<div class="gleap-tour-video">
@@ -56,6 +57,7 @@ export default class GleapProductTours {
                 var senderHTML = ``;
 
                 if (config.sender && config.sender.firstName) {
+                    hasSender = true;
                     senderHTML = `<div class="gleap-tour-sender">
                 <div class="gleap-tour-sender-image" style="background-image: url('${config.sender.profileImageUrl}');"></div>
                 <div class="gleap-tour-sender-name">${config.sender.firstName}</div>
@@ -69,7 +71,7 @@ export default class GleapProductTours {
                 disableActiveInteraction: !(step.allowClick ?? true),
                 popover: {
                     description: message,
-                    popoverClass: `gleap-tour-popover-${step.type} ${config.allowClose && 'gleap-tour-popover-can-close'}`,
+                    popoverClass: `gleap-tour-popover-${step.type} ${!hasSender && 'gleap-tour-popover-no-sender'} ${config.allowClose && 'gleap-tour-popover-can-close'}`,
                 },
             }
             if (step.selector && step.selector.length > 0) {
@@ -81,6 +83,7 @@ export default class GleapProductTours {
         const gleapTourObj = GleapTours({
             showProgress: true,
             steps: driverSteps,
+            showProgress: steps.length > 1,
             allowClose: config.allowClose,
             nextBtnText: config.nextText,
             doneBtnText: config.doneText,

src/UI.js

@@ -1624,6 +1624,13 @@ export const injectStyledCSS = (
       min-width: 270px;
     }
 
+    .gleap-tour-message iframe {
+      width: 100%;
+      height: 300px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
     .gleap-tour-sender-name {
       font-size: 15px;
     }
@@ -1669,6 +1676,10 @@ export const injectStyledCSS = (
       opacity: 1;
     }
 
+    .gleap-tour-popover-pointer.gleap-tour-popover-no-sender .gleap-tour-message {
+      padding-right: 20px;
+    }
+
     .gleap-tour-video video {
       width: 100%;
       max-width: 100%;