@product7/feedback-sdk 1.6.7 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

package/src/styles/changelog.js

@@ -130,6 +130,23 @@ export const changelogStyles = `
   font-family: inherit;
 }
 
+.changelog-modal-backdrop,
+.changelog-list-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-slow);
+  z-index: var(--z-modal-backdrop);
+}
+
+.changelog-modal-backdrop.show,
+.changelog-list-modal-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .changelog-modal.open {
   pointer-events: auto;
 }
@@ -393,6 +410,53 @@ export const changelogStyles = `
   opacity: 1;
 }
 
+.changelog-theme-dark.changelog-widget .changelog-trigger-btn {
+  background: #0F172A;
+  color: #E2E8F0;
+  border: 1px solid #334155;
+}
+
+.changelog-theme-dark.changelog-modal-backdrop,
+.changelog-theme-dark.changelog-list-modal-backdrop {
+  background: rgba(2, 6, 23, 0.72);
+}
+
+.changelog-theme-dark .changelog-modal-container,
+.changelog-theme-dark .changelog-list-modal-container {
+  background: #111827;
+  border: 1px solid #334155;
+}
+
+.changelog-theme-dark .changelog-list-modal-header {
+  background: #111827;
+  border-bottom-color: #334155;
+}
+
+.changelog-theme-dark .changelog-list-modal-header h2,
+.changelog-theme-dark .changelog-list-item-title,
+.changelog-theme-dark .changelog-popup-title,
+.changelog-theme-dark .changelog-view-all-btn {
+  color: #F3F4F6;
+}
+
+.changelog-theme-dark .changelog-list-item-description,
+.changelog-theme-dark .changelog-popup-description,
+.changelog-theme-dark .changelog-list-item-date {
+  color: #9CA3AF;
+}
+
+.changelog-theme-dark .changelog-list-item {
+  border-bottom-color: #334155;
+}
+
+.changelog-theme-dark .changelog-list-item:hover {
+  background: #1F2937;
+}
+
+.changelog-theme-dark .changelog-popup-btn {
+  color: #FFFFFF;
+}
+
 .changelog-list-modal-header {
   display: flex;
   align-items: center;

package/src/styles/feedback.js

@@ -136,8 +136,26 @@ export const feedbackStyles = `
   transform: translateX(0);
 }
 
+.feedback-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.96);
+  width: min(460px, calc(100vw - (var(--spacing-5) * 2)));
+  max-height: min(560px, calc(100vh - (var(--spacing-6) * 2)));
+  z-index: var(--z-popover);
+  transition: transform var(--transition-slow);
+  font-family: inherit;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.feedback-modal.open {
+  transform: translate(-50%, -50%) scale(1);
+}
+
 .feedback-panel-content {
-  background: var(--color-white);
+  background: var(--feedback-panel-bg, var(--color-white));
+  color: var(--feedback-panel-text, var(--color-text-primary));
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -157,7 +175,7 @@ export const feedbackStyles = `
   margin: 0;
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
+  color: var(--feedback-panel-text, var(--color-text-primary));
 }
 
 .feedback-panel-body {
@@ -196,6 +214,51 @@ export const feedbackStyles = `
   display: block;
 }
 
+.feedback-panel.theme-dark .feedback-panel-content,
+.feedback-modal.theme-dark .feedback-panel-content {
+  background: #111827;
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .feedback-panel-header,
+.feedback-modal.theme-dark .feedback-panel-header {
+  border-bottom-color: #374151;
+}
+
+.feedback-panel.theme-dark .sdk-label,
+.feedback-panel.theme-dark .feedback-panel-header h3,
+.feedback-modal.theme-dark .sdk-label,
+.feedback-modal.theme-dark .feedback-panel-header h3 {
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .sdk-input,
+.feedback-panel.theme-dark .sdk-textarea,
+.feedback-modal.theme-dark .sdk-input,
+.feedback-modal.theme-dark .sdk-textarea {
+  background: #1F2937;
+  border-color: #374151;
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .sdk-input::placeholder,
+.feedback-panel.theme-dark .sdk-textarea::placeholder,
+.feedback-modal.theme-dark .sdk-input::placeholder,
+.feedback-modal.theme-dark .sdk-textarea::placeholder {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .sdk-close-btn,
+.feedback-modal.theme-dark .sdk-close-btn {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .sdk-close-btn:hover,
+.feedback-modal.theme-dark .sdk-close-btn:hover {
+  background: #1F2937;
+  color: #E2E8F0;
+}
+
 @media (max-width: 768px) {
   .feedback-widget-button {
     bottom: var(--spacing-4);

package/src/styles/messengerCustomStyles.js

@@ -17,7 +17,12 @@ export function applyMessengerCustomStyles(options = {}) {
 	}
 
 	const adjustColor = (hex, percent, alpha = 1) => {
-		const num = parseInt(hex.replace('#', ''), 16);
+		const normalized = String(hex || '').trim();
+		if (!/^#?[0-9a-fA-F]{6}$/.test(normalized)) {
+			return normalized || '#000000';
+		}
+
+		const num = parseInt(normalized.replace('#', ''), 16);
 		const r = Math.max(0, Math.min(255, (num >> 16) + percent));
 		const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00ff) + percent));
 		const b = Math.max(0, Math.min(255, (num & 0x0000ff) + percent));
@@ -29,6 +34,10 @@ export function applyMessengerCustomStyles(options = {}) {
 		return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
 	};
 
+	const darkSurface = adjustColor(backgroundColor, 12);
+	const darkSurfaceAlt = adjustColor(backgroundColor, 20);
+	const darkBorder = adjustColor(backgroundColor, 34);
+
 	styleElement.textContent = `
 		#product7-messenger-widget {
 			--color-primary: ${primaryColor} !important;
@@ -90,6 +99,77 @@ export function applyMessengerCustomStyles(options = {}) {
 		`
 				: ''
 		}
+
+		${
+			theme === 'dark'
+				? `
+		.messenger-widget.theme-dark .messenger-panel-content,
+		.messenger-widget.theme-dark .messenger-home-view,
+		.messenger-widget.theme-dark .messenger-nav,
+		.messenger-widget.theme-dark .messenger-chat-compose,
+		.messenger-widget.theme-dark .messenger-compose-attachments-preview,
+		.messenger-widget.theme-dark .messenger-home-featured,
+		.messenger-widget.theme-dark .messenger-chat-header {
+			background: ${backgroundColor} !important;
+			border-color: ${darkBorder} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-view,
+		.messenger-widget.theme-dark .messenger-chat-title,
+		.messenger-widget.theme-dark .messenger-home-greeting,
+		.messenger-widget.theme-dark .messenger-home-question,
+		.messenger-widget.theme-dark .messenger-home-featured-content h3,
+		.messenger-widget.theme-dark .messenger-home-featured-content p,
+		.messenger-widget.theme-dark .messenger-home-changelog-card-title,
+		.messenger-widget.theme-dark .messenger-home-changelog-card-desc,
+		.messenger-widget.theme-dark .messenger-conversation-title,
+		.messenger-widget.theme-dark .messenger-article-title,
+		.messenger-widget.theme-dark .messenger-compose-input,
+		.messenger-widget.theme-dark .messenger-message-sender,
+		.messenger-widget.theme-dark .messenger-message-time,
+		.messenger-widget.theme-dark .messenger-nav-label {
+			color: ${textColor} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-view {
+			background: linear-gradient(180deg, ${adjustColor(backgroundColor, 10)} 0%, ${backgroundColor} 55%) !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-view::before {
+			background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.12)} 0%, transparent 70%) !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-message-btn,
+		.messenger-widget.theme-dark .messenger-home-changelog-card,
+		.messenger-widget.theme-dark .messenger-compose-input-wrapper,
+		.messenger-widget.theme-dark .messenger-message-received .messenger-message-bubble,
+		.messenger-widget.theme-dark .messenger-message-file,
+		.messenger-widget.theme-dark .messenger-prechat-card,
+		.messenger-widget.theme-dark .messenger-list-item,
+		.messenger-widget.theme-dark .messenger-article-item {
+			background: ${darkSurface} !important;
+			border-color: ${darkBorder} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-message-btn:hover,
+		.messenger-widget.theme-dark .messenger-home-changelog-card:hover,
+		.messenger-widget.theme-dark .messenger-list-item:hover,
+		.messenger-widget.theme-dark .messenger-article-item:hover {
+			background: ${darkSurfaceAlt} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-message-own .messenger-message-bubble,
+		.messenger-widget.theme-dark .messenger-compose-send,
+		.messenger-widget.theme-dark .messenger-launcher-btn,
+		.messenger-widget.theme-dark .messenger-nav-badge,
+		.messenger-widget.theme-dark .messenger-launcher-badge,
+		.messenger-widget.theme-dark .messenger-home-changelog-cover-text,
+		.messenger-widget.theme-dark .messenger-attachment-remove {
+			color: #FFFFFF !important;
+		}
+		`
+				: ''
+		}
 	`;
 
 	console.log('✅ Custom messenger styles applied:', { primaryColor, theme });

package/src/styles/survey.js

@@ -14,6 +14,10 @@ export const surveyStyles = `
   animation: fadeIn var(--transition-slow);
 }
 
+.feedback-survey-backdrop-dark {
+  background: rgba(2, 6, 23, 0.72);
+}
+
 /* ========================================
    SURVEY CARD
    ======================================== */
@@ -31,6 +35,79 @@ export const surveyStyles = `
   font-family: inherit;
 }
 
+.feedback-survey-theme-dark {
+  background: #111827;
+  border-color: #374151;
+}
+
+.feedback-survey-theme-dark .feedback-survey-title,
+.feedback-survey-theme-dark .feedback-survey-description-primary .feedback-survey-description {
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-description,
+.feedback-survey-theme-dark .feedback-survey-labels,
+.feedback-survey-theme-dark .feedback-survey-progress {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-close {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-close:hover {
+  background: #1F2937;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale {
+  border-color: #374151;
+  background: #1F2937;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn {
+  background: #1F2937;
+  border-right-color: #374151;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-nps-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-ces-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn:hover {
+  background: #273549;
+}
+
+.feedback-survey-theme-dark .feedback-survey-nps-btn,
+.feedback-survey-theme-dark .feedback-survey-ces-btn,
+.feedback-survey-theme-dark .feedback-survey-freq-btn,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn {
+  background: #1F2937;
+  border-color: #374151;
+  color: #E5E7EB;
+}
+
+.feedback-survey-theme-dark .feedback-survey-page-textarea,
+.feedback-survey-theme-dark .feedback-survey-select,
+.feedback-survey-theme-dark .feedback-survey-input,
+.feedback-survey-theme-dark .feedback-survey-textarea {
+  background: #1F2937;
+  border-color: #374151;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-page-textarea::placeholder,
+.feedback-survey-theme-dark .feedback-survey-input::placeholder,
+.feedback-survey-theme-dark .feedback-survey-textarea::placeholder {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-back {
+  background: #111827;
+  border-color: #374151;
+  color: #E5E7EB;
+}
+
 .feedback-survey-bottom-right {
   bottom: var(--spacing-6);
   right: var(--spacing-6);

package/src/widgets/BaseWidget.js

@@ -18,7 +18,7 @@ export class BaseWidget {
 			backgroundColor: options.backgroundColor || '#ffffff',
 			textColor: options.textColor || '#1F2937',
 			autoShow: false,
-			showBackdrop: false,
+			showBackdrop: true,
 			customStyles: {},
 			suppressAfterSubmission: true,
 			suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
@@ -136,9 +136,11 @@ export class BaseWidget {
 	_showLoadingModal() {
 		this.state.isLoading = true;
 
-		this.backdropElement = document.createElement('div');
-		this.backdropElement.className = 'sdk-modal-backdrop';
-		document.body.appendChild(this.backdropElement);
+		if (this.options.showBackdrop) {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = 'sdk-modal-backdrop';
+			document.body.appendChild(this.backdropElement);
+		}
 
 		this.loadingElement = document.createElement('div');
 		this.loadingElement.className = 'feedback-loading-modal';
@@ -148,7 +150,9 @@ export class BaseWidget {
 		document.body.appendChild(this.loadingElement);
 
 		requestAnimationFrame(() => {
-			this.backdropElement.classList.add('show');
+			if (this.backdropElement) {
+				this.backdropElement.classList.add('show');
+			}
 			this.loadingElement.classList.add('show');
 		});
 	}
@@ -343,16 +347,17 @@ export class BaseWidget {
 				: 'feedback-panel';
 		const sizeClass = `size-${this.options.size}`;
 		this.panelElement = document.createElement('div');
-		this.panelElement.className = `${modeClass} ${sizeClass}`;
+		const themeClass = `theme-${this.options.theme || 'light'}`;
+		this.panelElement.className = `${modeClass} ${sizeClass} ${themeClass}`;
+		this.panelElement.style.setProperty('--color-primary', this.options.primaryColor);
 		this.panelElement.style.setProperty(
-			'--primary-color',
-			this.options.primaryColor
+			'--feedback-panel-bg',
+			this.options.backgroundColor
 		);
 		this.panelElement.style.setProperty(
-			'--bg-color',
-			this.options.backgroundColor
+			'--feedback-panel-text',
+			this.options.textColor
 		);
-		this.panelElement.style.setProperty('--text-color', this.options.textColor);
 		this.panelElement.innerHTML = this._getPanelHTML();
 
 		document.body.appendChild(this.panelElement);

package/src/widgets/ChangelogWidget.js

@@ -12,7 +12,7 @@ export class ChangelogWidget extends BaseWidget {
 
 	_render() {
 		const trigger = document.createElement('div');
-		trigger.className = `changelog-widget position-${this.options.position}`;
+		trigger.className = `changelog-widget position-${this.options.position} changelog-theme-${this.options.theme || 'light'}`;
 		trigger.innerHTML = `
 			<button class="changelog-trigger-btn" type="button" aria-label="View Updates">
 				<svg class="changelog-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
@@ -88,12 +88,12 @@ export class ChangelogWidget extends BaseWidget {
 
 	_createModal() {
 		this.backdropElement = document.createElement('div');
-		this.backdropElement.className = 'changelog-modal-backdrop';
+		this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
 		document.body.appendChild(this.backdropElement);
 		this.backdropElement.addEventListener('click', () => this.closeModal());
 
 		this.modalElement = document.createElement('div');
-		this.modalElement.className = 'changelog-modal';
+		this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
 		this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
 				<button class="changelog-modal-close" type="button" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></button>
@@ -231,14 +231,14 @@ export class ChangelogWidget extends BaseWidget {
 
 	_createListModal() {
 		this.listModalBackdropElement = document.createElement('div');
-		this.listModalBackdropElement.className = 'changelog-list-modal-backdrop';
+		this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
 		document.body.appendChild(this.listModalBackdropElement);
 		this.listModalBackdropElement.addEventListener('click', () =>
 			this.closeSidebar()
 		);
 
 		this.listModalElement = document.createElement('div');
-		this.listModalElement.className = 'changelog-list-modal';
+		this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;
 		this.listModalElement.innerHTML = `
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">

package/src/widgets/MessengerWidget.js

@@ -17,6 +17,19 @@ import { PreChatFormView } from './messenger/views/PreChatFormView.js';
 export class MessengerWidget extends BaseWidget {
 	constructor(options) {
 		super({ ...options, type: 'messenger' });
+		const resolvedTheme = options.theme || 'light';
+		const hasExplicitTextColor = Object.prototype.hasOwnProperty.call(
+			options,
+			'textColor'
+		);
+		const hasExplicitBackgroundColor = Object.prototype.hasOwnProperty.call(
+			options,
+			'backgroundColor'
+		);
+		const defaultTextColor =
+			resolvedTheme === 'dark' ? '#E2E8F0' : '#1d1d1f';
+		const defaultBackgroundColor =
+			resolvedTheme === 'dark' ? '#0F172A' : '#ffffff';
 
 		const resolvedEnableChangelog =
 			typeof options.enableChangelog === 'boolean'
@@ -25,10 +38,12 @@ export class MessengerWidget extends BaseWidget {
 
 		this.messengerOptions = {
 			position: options.position || 'bottom-right',
-			theme: options.theme || 'light',
+			theme: resolvedTheme,
 			primaryColor: options.primaryColor || '#155EEF',
-			textColor: options.textColor || '#1d1d1f',
-			backgroundColor: options.backgroundColor || '#ffffff',
+			textColor: hasExplicitTextColor ? options.textColor : defaultTextColor,
+			backgroundColor: hasExplicitBackgroundColor
+				? options.backgroundColor
+				: defaultBackgroundColor,
 			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 			teamName: options.teamName || 'Support',
 			teamAvatars: options.teamAvatars || [],

package/src/widgets/SurveyWidget.js

@@ -8,6 +8,7 @@ export class SurveyWidget extends BaseWidget {
 			surveyId: options.surveyId || null,
 			surveyType: options.surveyType || 'nps',
 			position: options.position || 'bottom-right',
+			theme: options.theme || 'light',
 			enabled:
 				typeof options.enabled === 'boolean' ? options.enabled : undefined,
 			title: options.title || null,
@@ -52,6 +53,20 @@ export class SurveyWidget extends BaseWidget {
 		};
 	}
 
+	static removeDanglingElements() {
+		if (typeof document === 'undefined') return;
+
+		document
+			.querySelectorAll(
+				'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success'
+			)
+			.forEach((el) => {
+				if (el && el.parentNode) {
+					el.parentNode.removeChild(el);
+				}
+			});
+	}
+
 	_render() {
 		const container = document.createElement('div');
 		container.className = 'feedback-survey-container';
@@ -72,6 +87,7 @@ export class SurveyWidget extends BaseWidget {
 			return this;
 		}
 
+		SurveyWidget.removeDanglingElements();
 		this._renderSurvey();
 		this.surveyState.isVisible = true;
 		this.sdk.eventBus.emit('survey:shown', {
@@ -107,7 +123,7 @@ export class SurveyWidget extends BaseWidget {
 
 		if (this.surveyOptions.position === 'center') {
 			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'feedback-survey-backdrop';
+			this.backdropElement.className = `feedback-survey-backdrop feedback-survey-backdrop-${this.surveyOptions.theme}`;
 			document.body.appendChild(this.backdropElement);
 			this.backdropElement.addEventListener('click', () =>
 				this._handleDismiss()
@@ -115,7 +131,7 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		this.surveyElement = document.createElement('div');
-		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}${
+		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} feedback-survey-theme-${this.surveyOptions.theme}${
 			showDescription && !showTitle
 				? ' feedback-survey-description-primary'
 				: ''
@@ -1135,7 +1151,7 @@ export class SurveyWidget extends BaseWidget {
 		}, 3000);
 	}
 
-	_closeSurvey(resetState = true) {
+	_closeSurvey(resetState = true, immediate = false) {
 		if (this._escapeHandler) {
 			document.removeEventListener('keydown', this._escapeHandler);
 			this._escapeHandler = null;
@@ -1150,21 +1166,33 @@ export class SurveyWidget extends BaseWidget {
 				this.surveyOptions.position === 'center'
 					? 'translate(-50%, -50%) scale(0.95)'
 					: 'translateY(20px)';
-			setTimeout(() => {
-				if (surveyEl && surveyEl.parentNode) {
+			if (immediate) {
+				if (surveyEl.parentNode) {
 					surveyEl.parentNode.removeChild(surveyEl);
 				}
-			}, 300);
+			} else {
+				setTimeout(() => {
+					if (surveyEl && surveyEl.parentNode) {
+						surveyEl.parentNode.removeChild(surveyEl);
+					}
+				}, 300);
+			}
 			this.surveyElement = null;
 		}
 
 		if (backdropEl) {
 			backdropEl.style.opacity = '0';
-			setTimeout(() => {
-				if (backdropEl && backdropEl.parentNode) {
+			if (immediate) {
+				if (backdropEl.parentNode) {
 					backdropEl.parentNode.removeChild(backdropEl);
 				}
-			}, 300);
+			} else {
+				setTimeout(() => {
+					if (backdropEl && backdropEl.parentNode) {
+						backdropEl.parentNode.removeChild(backdropEl);
+					}
+				}, 300);
+			}
 			this.backdropElement = null;
 		}
 
@@ -1182,7 +1210,7 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	destroy() {
-		this._closeSurvey();
+		this._closeSurvey(true, true);
 		super.destroy();
 	}
 }