pushfeedback 0.1.65 → 0.1.67

package/dist/cjs/feedback-button_2.cjs.entry.js

@@ -16,6 +16,7 @@ const FeedbackButton = class {
     this.hideIcon = false;
     this.hideMobile = false;
     this.sessionId = '';
+    this.metadata = '';
     this.submit = false;
     this.customFont = false;
     this.emailAddress = '';
@@ -41,7 +42,9 @@ const FeedbackButton = class {
     this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
     this.ratingPlaceholder = 'Was this page helpful?';
     this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.screenshotAttachedText = 'Screenshot attached';
     this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
     this.screenshotTopbarText = 'Select an element on this page';
     this.sendButtonText = 'Send';
     this.successMessage = '';
@@ -55,6 +58,9 @@ const FeedbackButton = class {
         this.sessionId = storedSessionId;
       }
     }
+    else {
+      localStorage.setItem('pushfeedback_sessionid', this.sessionId);
+    }
   }
   componentDidLoad() {
     if (this.buttonPosition === 'center-right') {
@@ -90,13 +96,16 @@ const FeedbackButton = class {
       'errorMessage404',
       'footerText',
       'messagePlaceholder',
+      'metadata',
       'modalTitle',
       'modalTitleError',
       'modalTitleSuccess',
       'privacyPolicyText',
       'ratingPlaceholder',
       'ratingStarsPlaceholder',
+      'screenshotAttachedText',
       'screenshotButtonText',
+      'screenshotTakingText',
       'screenshotTopbarText',
       'sendButtonText',
       'successMessage',
@@ -138,6 +147,7 @@ const FeedbackButton = class {
         rating: this.rating || -1,
         ratingMode: this.ratingMode,
         message: '',
+        metadata: this.metadata,
         session: localStorage.getItem('pushfeedback_sessionid') || '',
       };
       const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
@@ -8966,7 +8976,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
 //# sourceMappingURL=html2canvas-pro.js.map
 });
 
-const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:1px solid var(--feedback-modal-element-selected-border-color)}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}";
+const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.preview-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.8);z-index:10000;display:flex;align-items:center;justify-content:center;cursor:pointer}.preview-modal{position:relative;max-width:90vw;max-height:90vh;border-radius:8px;overflow:hidden;cursor:default}.preview-modal img{max-width:100%;max-height:100%;display:block}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}";
 
 const FeedbackModal = class {
   constructor(hostRef) {
@@ -9000,6 +9010,7 @@ const FeedbackModal = class {
           screenshot: this.encodedScreenshot,
           rating: this.selectedRating,
           ratingMode: this.ratingMode,
+          metadata: this.metadata,
           verification: this.formVerification,
           session: localStorage.getItem('pushfeedback_sessionid') || '',
         };
@@ -9052,11 +9063,19 @@ const FeedbackModal = class {
         this.showScreenshotTopBar = false;
         this.hasSelectedElement = false;
         this.encodedScreenshot = null;
+        // Remove highlight from ALL selected elements
+        document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+          el.classList.remove('feedback-modal-element-selected');
+        });
+        this.takingScreenshot = false;
+        this.originalElement = null;
+        this.selectedElementBounds = null;
         this.formSuccess = false;
         this.formError = false;
         this.formErrorStatus = 500;
         this.formMessage = '';
         this.formEmail = '';
+        this.showPreviewModal = false;
         this.resetOverflow();
       }, 200);
     };
@@ -9065,22 +9084,31 @@ const FeedbackModal = class {
       this.showModal = false;
       this.showScreenshotMode = true;
       this.showScreenshotTopBar = true;
+      // Clear previous screenshot and selection data
       this.encodedScreenshot = null;
-      if (window.innerWidth > document.documentElement.clientWidth) {
-        document.documentElement.classList.add('feedback-modal-screenshot-open--scroll');
-      }
-      const scrollY = window.scrollY;
-      document.documentElement.style.top = `-${scrollY}px`;
-      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-      document.documentElement.classList.add('feedback-modal-screenshot-open');
+      this.originalElement = null;
+      this.selectedElementBounds = null;
+      this.hoveredElement = null;
+      this.hoveredElementBounds = null;
+      // NO CSS CLASSES - they cause scroll jumping
     };
     this.closeScreenShot = () => {
+      // Remove highlight from ALL selected elements
+      document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+        el.classList.remove('feedback-modal-element-selected');
+      });
+      // Reset loading state
+      this.takingScreenshot = false;
       this.showModal = false;
       this.showScreenshotMode = false;
       this.showScreenshotTopBar = false;
-      this.hasSelectedElement = false;
-      this.encodedScreenshot = null;
-      this.resetOverflow();
+    };
+    this.openPreviewModal = (event) => {
+      event.stopPropagation(); // Prevent button click from firing
+      this.showPreviewModal = true;
+    };
+    this.closePreviewModal = () => {
+      this.showPreviewModal = false;
     };
     this.handleMouseOverScreenShot = (event) => {
       event.preventDefault();
@@ -9091,6 +9119,9 @@ const FeedbackModal = class {
       const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
       const rect = elementUnder.getBoundingClientRect();
       this.screenshotModal.style.display = '';
+      // Store the hovered element and its bounds for later use
+      this.hoveredElement = elementUnder;
+      this.hoveredElementBounds = rect;
       // Get the bounding box of the element selected
       this.elementSelected.style.position = 'absolute';
       this.elementSelected.style.left = `${rect.left}px`;
@@ -9132,35 +9163,45 @@ const FeedbackModal = class {
     };
     this.handleMouseClickedSelectedElement = async (event) => {
       event.preventDefault();
-      if (!this.elementSelected) {
+      if (!this.elementSelected || !this.hoveredElement) {
         return;
       }
       this.hasSelectedElement = true;
-      this.elementSelected.classList.add('feedback-modal-element-selected');
-      // Get the top position including the scroll offset
-      const rectTop = this.elementSelected.getBoundingClientRect().top;
-      const topWithScroll = rectTop + window.scrollY;
-      // Move the element with the scroll offset
-      this.elementSelected.style.top = `${topWithScroll}px`;
-      // Clone the selected element and append it to the body
-      const clonedElementSelected = this.elementSelected.cloneNode(true);
-      document.body.appendChild(clonedElementSelected);
-      // Reset the top position of the original element
-      this.elementSelected.style.top = `${rectTop}px`;
-      this.showScreenshotTopBar = false;
-      this.showModal = false;
+      // Remove highlight from ALL previously selected elements
+      document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+        el.classList.remove('feedback-modal-element-selected');
+      });
+      // Add highlight to newly selected element
+      this.hoveredElement.classList.add('feedback-modal-element-selected');
+      // Store element bounds in viewport coordinates
+      this.selectedElementBounds = this.hoveredElementBounds;
+      this.originalElement = this.hoveredElement;
+      // Show loading state in top bar
+      this.takingScreenshot = true;
+      // Take screenshot FIRST while highlight is still visible
       try {
         const dataUrl = await this.captureScreenshot();
         console.log('Screenshot captured');
         this.encodedScreenshot = dataUrl;
+        // Reset loading state
+        this.takingScreenshot = false;
+        // NOW hide screenshot interface after capturing
+        this.showScreenshotTopBar = false;
+        this.showScreenshotMode = false;
+        // Restore normal page state
+        this.resetOverflow();
+        // Show modal with the captured screenshot
+        this.showModal = true;
       }
       catch (error) {
         console.error('Failed to capture screenshot:', error);
         this.hasSelectedElement = false;
-      }
-      finally {
-        // Remove the cloned element and show the modal again
-        document.body.removeChild(clonedElementSelected);
+        // Reset loading state on error
+        this.takingScreenshot = false;
+        // Still need to cleanup on error
+        this.showScreenshotTopBar = false;
+        this.showScreenshotMode = false;
+        this.resetOverflow();
         this.showModal = true;
       }
     };
@@ -9191,6 +9232,7 @@ const FeedbackModal = class {
     this.showScreenshotTopBar = false;
     this.showModal = false;
     this.rating = undefined;
+    this.metadata = undefined;
     this.fetchData = true;
     this.emailPlaceholder = 'Email address (optional)';
     this.errorMessage = 'Please try again later.';
@@ -9206,9 +9248,13 @@ const FeedbackModal = class {
     this.ratingPlaceholder = 'Was this page helpful?';
     this.ratingStarsPlaceholder = 'How would you rate this page?';
     this.sendButtonText = 'Send';
+    this.screenshotAttachedText = 'Screenshot attached';
     this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
     this.screenshotTopbarText = 'Select an element on this page';
     this.successMessage = '';
+    this.takingScreenshot = false;
+    this.showPreviewModal = false;
   }
   componentWillLoad() {
     if (this.fetchData)
@@ -9232,15 +9278,10 @@ const FeedbackModal = class {
     }
   }
   resetOverflow() {
+    // Just clean up any stray classes, don't add/remove during screenshot
     document.documentElement.classList.remove('feedback-modal-screenshot-open');
     document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
-    document.documentElement.classList.add('feedback-modal-screenshot-closing');
-    // Only restore scroll position if we previously modified it
-    if (document.documentElement.style.top) {
-      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-      document.documentElement.style.top = '';
-    }
-    window.addEventListener('scroll', this.onScrollDebounced);
+    document.documentElement.classList.remove('feedback-modal-screenshot-closing');
   }
   handleMessageInput(event) {
     this.formMessage = event.target.value;
@@ -9250,22 +9291,44 @@ const FeedbackModal = class {
   }
   captureScreenshot() {
     return new Promise((resolve, reject) => {
-      requestAnimationFrame(() => {
-        html2canvasPro(document.body, {
-          x: window.scrollX,
-          y: window.scrollY,
-          width: window.innerWidth,
-          height: window.innerHeight,
-        })
-          .then((canvas) => {
-          const dataUrl = canvas.toDataURL();
-          resolve(dataUrl);
-        })
-          .catch((error) => {
-          console.error(error);
-          reject(error);
+      // Add a small delay to ensure CSS highlight is applied
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          if (!this.selectedElementBounds) {
+            reject(new Error('No element selected'));
+            return;
+          }
+          // Capture what's currently visible in the viewport
+          html2canvasPro(document.body, {
+            x: window.scrollX,
+            y: window.scrollY,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            scrollX: window.scrollX,
+            scrollY: window.scrollY,
+            allowTaint: false,
+            useCORS: true,
+            scale: 1,
+            backgroundColor: '#ffffff',
+            logging: true,
+            foreignObjectRendering: false,
+            imageTimeout: 10000,
+            ignoreElements: (element) => {
+              // Only ignore screenshot UI, keep everything else including highlights
+              return element.classList.contains('feedback-modal-screenshot-header') ||
+                element.classList.contains('feedback-overlay');
+            }
+          })
+            .then((canvas) => {
+            const dataUrl = canvas.toDataURL();
+            resolve(dataUrl);
+          })
+            .catch((error) => {
+            console.error('Failed to capture screenshot:', error);
+            reject(error);
+          });
         });
-      });
+      }, 100); // Small delay to ensure CSS is applied
     });
   }
   handleCheckboxChange(event) {
@@ -9278,7 +9341,7 @@ const FeedbackModal = class {
     this.selectedRating = newRating;
   }
   render() {
-    return (index.h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showScreenshotMode && (index.h("div", { class: "feedback-modal-screenshot", ref: (el) => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, index.h("div", { class: "feedback-modal-screenshot-element-selected", ref: (el) => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), index.h("div", { class: "top-side", ref: (el) => (this.topSide = el) }), index.h("div", { class: "left-side", ref: (el) => (this.leftSide = el) }), index.h("div", { class: "bottom-side", ref: (el) => (this.bottomSide = el) }), index.h("div", { class: "right-side", ref: (el) => (this.rightSide = el) }), this.showScreenshotTopBar && (index.h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, index.h("span", null, this.screenshotTopbarText), index.h("span", { class: "feedback-modal-screenshot-close" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (index.h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''}`, ref: (el) => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", null, this.modalTitleSuccess)) : (index.h("span", null, this.modalTitleError)), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (index.h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (index.h("div", { class: "feedback-modal-rating-content" }, index.h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), index.h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, index.h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
+    return (index.h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showScreenshotMode && (index.h("div", { class: "feedback-modal-screenshot", ref: (el) => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, index.h("div", { class: "feedback-modal-screenshot-element-selected", ref: (el) => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), index.h("div", { class: "top-side", ref: (el) => (this.topSide = el) }), index.h("div", { class: "left-side", ref: (el) => (this.leftSide = el) }), index.h("div", { class: "bottom-side", ref: (el) => (this.bottomSide = el) }), index.h("div", { class: "right-side", ref: (el) => (this.rightSide = el) }), this.showScreenshotTopBar && (index.h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, index.h("span", null, this.takingScreenshot ? this.screenshotTakingText : this.screenshotTopbarText), index.h("span", { class: "feedback-modal-screenshot-close" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (index.h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''}`, ref: (el) => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", null, this.modalTitleSuccess)) : (index.h("span", null, this.modalTitleError)), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (index.h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (index.h("div", { class: "feedback-modal-rating-content" }, index.h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), index.h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, index.h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
         ? 'feedback-modal-rating-button--selected'
         : ''}`, onClick: (event) => {
         event.preventDefault();
@@ -9293,7 +9356,7 @@ const FeedbackModal = class {
         : ''}`, onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(rating);
-      } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), index.h("div", { class: "feedback-modal-text" }, index.h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (index.h("div", { class: "feedback-modal-email" }, index.h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), index.h("div", { class: "feedback-verification" }, index.h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (index.h("div", { class: "feedback-modal-privacy" }, index.h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), index.h("span", { innerHTML: this.privacyPolicyText }))), index.h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (index.h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" })), this.screenshotButtonText)), index.h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (index.h("div", { class: "feedback-modal-success" }, index.h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (index.h("span", null))), index.h("div", { class: "feedback-modal-footer" }, index.h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', index.h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (index.h("div", { class: "feedback-footer-text" }, index.h("span", { innerHTML: this.footerText }))))))));
+      } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), index.h("div", { class: "feedback-modal-text" }, index.h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (index.h("div", { class: "feedback-modal-email" }, index.h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), index.h("div", { class: "feedback-verification" }, index.h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (index.h("div", { class: "feedback-modal-privacy" }, index.h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), index.h("span", { innerHTML: this.privacyPolicyText }))), index.h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (index.h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending }, this.encodedScreenshot && (index.h("div", { class: "screenshot-preview", onClick: this.openPreviewModal }, index.h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.encodedScreenshot ? this.screenshotAttachedText : this.screenshotButtonText)), index.h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (index.h("div", { class: "feedback-modal-success" }, index.h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (index.h("span", null))), index.h("div", { class: "feedback-modal-footer" }, index.h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', index.h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (index.h("div", { class: "feedback-footer-text" }, index.h("span", { innerHTML: this.footerText })))))), this.showPreviewModal && (index.h("div", { class: "preview-modal-overlay", onClick: this.closePreviewModal }, index.h("div", { class: "preview-modal" }, index.h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview", onClick: (e) => e.stopPropagation() }))))));
   }
   componentDidRender() {
     if (this.showModal) {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"openModal":[64]}]]]], options);
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"metadata":[1],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"metadata":[1],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"takingScreenshot":[32],"showPreviewModal":[32],"openModal":[64]}]]]], options);
   });
 };
 

package/dist/cjs/pushfeedback.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"openModal":[64]}]]]], options);
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"metadata":[1],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"metadata":[1],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"takingScreenshot":[32],"showPreviewModal":[32],"openModal":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/feedback-button/feedback-button.js

@@ -6,6 +6,7 @@ export class FeedbackButton {
     this.hideIcon = false;
     this.hideMobile = false;
     this.sessionId = '';
+    this.metadata = '';
     this.submit = false;
     this.customFont = false;
     this.emailAddress = '';
@@ -31,7 +32,9 @@ export class FeedbackButton {
     this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
     this.ratingPlaceholder = 'Was this page helpful?';
     this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.screenshotAttachedText = 'Screenshot attached';
     this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
     this.screenshotTopbarText = 'Select an element on this page';
     this.sendButtonText = 'Send';
     this.successMessage = '';
@@ -45,6 +48,9 @@ export class FeedbackButton {
         this.sessionId = storedSessionId;
       }
     }
+    else {
+      localStorage.setItem('pushfeedback_sessionid', this.sessionId);
+    }
   }
   componentDidLoad() {
     if (this.buttonPosition === 'center-right') {
@@ -80,13 +86,16 @@ export class FeedbackButton {
       'errorMessage404',
       'footerText',
       'messagePlaceholder',
+      'metadata',
       'modalTitle',
       'modalTitleError',
       'modalTitleSuccess',
       'privacyPolicyText',
       'ratingPlaceholder',
       'ratingStarsPlaceholder',
+      'screenshotAttachedText',
       'screenshotButtonText',
+      'screenshotTakingText',
       'screenshotTopbarText',
       'sendButtonText',
       'successMessage',
@@ -128,6 +137,7 @@ export class FeedbackButton {
         rating: this.rating || -1,
         ratingMode: this.ratingMode,
         message: '',
+        metadata: this.metadata,
         session: localStorage.getItem('pushfeedback_sessionid') || '',
       };
       const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
@@ -265,6 +275,24 @@ export class FeedbackButton {
         "reflect": true,
         "defaultValue": "''"
       },
+      "metadata": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "metadata",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "submit": {
         "type": "boolean",
         "mutable": false,
@@ -714,6 +742,24 @@ export class FeedbackButton {
         "reflect": false,
         "defaultValue": "'How would you rate this page?'"
       },
+      "screenshotAttachedText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-attached-text",
+        "reflect": false,
+        "defaultValue": "'Screenshot attached'"
+      },
       "screenshotButtonText": {
         "type": "string",
         "mutable": false,
@@ -732,6 +778,24 @@ export class FeedbackButton {
         "reflect": false,
         "defaultValue": "'Add a screenshot'"
       },
+      "screenshotTakingText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "screenshot-taking-text",
+        "reflect": false,
+        "defaultValue": "'Taking screenshot...'"
+      },
       "screenshotTopbarText": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/feedback-modal/feedback-modal.css

@@ -318,7 +318,59 @@
 
 .feedback-modal-element-selected {
   background-color: transparent;  
-  border: 1px solid var(--feedback-modal-element-selected-border-color); 
+  border: 3px solid var(--feedback-modal-element-selected-border-color) !important;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3) !important;
+}
+
+.screenshot-preview {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+  border-radius: 4px;
+  margin-right: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.screenshot-preview:hover {
+  transform: scale(1.1);
+}
+
+.screenshot-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.preview-modal {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: default;
+}
+
+.preview-modal img {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
 }
 
 @media screen and (min-width: 768px) {