@product7/feedback-sdk 1.6.6 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.6.6",
+	"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/api/services/ChangelogService.js

@@ -1,4 +1,4 @@
-import { MOCK_CHANGELOGS } from '../mock-data';
+import { MOCK_CHANGELOGS } from '../mock-data/index.js';
 import { delay } from '../utils/helpers.js';
 
 export class ChangelogService {

package/src/api/services/HelpService.js

@@ -1,4 +1,4 @@
-import { MOCK_HELP_COLLECTIONS } from '../mock-data';
+import { MOCK_HELP_COLLECTIONS } from '../mock-data/index.js';
 import { delay } from '../utils/helpers.js';
 
 export class HelpService {

package/src/api/services/MessengerService.js

@@ -1,4 +1,4 @@
-import { MOCK_CONVERSATIONS, MOCK_MESSAGES } from '../mock-data';
+import { MOCK_CONVERSATIONS, MOCK_MESSAGES } from '../mock-data/index.js';
 import { delay } from '../utils/helpers.js';
 
 export class MessengerService {

package/src/api/services/SurveyService.js

@@ -1,5 +1,5 @@
 import { APIError } from '../../utils/errors.js';
-import { MOCK_SURVEYS } from '../mock-data';
+import { MOCK_SURVEYS } from '../mock-data/index.js';
 import { delay, getDeviceInfo } from '../utils/helpers.js';
 
 export class SurveyService {

package/src/core/BaseAPIService.js

@@ -90,15 +90,19 @@ export class BaseAPIService {
 				body: JSON.stringify(payload),
 				headers: { 'Content-Type': 'application/json' },
 			});
+			const initData = this._extractInitResponseData(response);
 
-			this.sessionToken = response.session_token;
-			this.sessionExpiry = new Date(Date.now() + response.expires_in * 1000);
+			this.sessionToken = initData.sessionToken;
+			this.sessionExpiry = new Date(Date.now() + initData.expiresIn * 1000);
 			this._storeSession();
 
 			return {
 				sessionToken: this.sessionToken,
-				config: response.config || {},
-				expiresIn: response.expires_in,
+				config: initData.config,
+				expiresIn: initData.expiresIn,
+				status: initData.status,
+				message: initData.message,
+				configVersion: initData.configVersion,
 			};
 		} catch (error) {
 			throw new APIError(
@@ -109,6 +113,34 @@ export class BaseAPIService {
 		}
 	}
 
+	_extractInitResponseData(response) {
+		const payload =
+			response && typeof response.data === 'object' ? response.data : response || {};
+
+		const sessionToken = payload.session_token || payload.sessionToken;
+		const expiresIn = Number(payload.expires_in ?? payload.expiresIn);
+
+		if (!sessionToken) {
+			throw new APIError(500, 'Invalid init response: missing session_token');
+		}
+
+		if (!Number.isFinite(expiresIn) || expiresIn <= 0) {
+			throw new APIError(500, 'Invalid init response: missing expires_in');
+		}
+
+		return {
+			sessionToken,
+			expiresIn,
+			config:
+				payload.config && typeof payload.config === 'object'
+					? payload.config
+					: {},
+			configVersion: payload.config_version ?? payload.configVersion ?? null,
+			status: response?.status ?? payload?.status ?? true,
+			message: response?.message ?? payload?.message ?? null,
+		};
+	}
+
 	async _ensureSession() {
 		if (!this.isSessionValid()) {
 			await this.init();

package/src/core/FeedbackSDK.js

@@ -65,6 +65,10 @@ export class FeedbackSDK {
 		const widgetId = generateId('widget');
 		const widgetConfig = this._getWidgetTypeConfig(type);
 		const explicitOptions = this._omitUndefined(options);
+		const widgetEnabled = this._isWidgetEnabled(type, {
+			...widgetConfig,
+			...explicitOptions,
+		});
 		const widgetOptions = {
 			id: widgetId,
 			sdk: this,
@@ -72,6 +76,7 @@ export class FeedbackSDK {
 			...this.config,
 			...widgetConfig,
 			...explicitOptions,
+			enabled: widgetEnabled,
 		};
 
 		try {
@@ -162,6 +167,7 @@ export class FeedbackSDK {
 				surveyConfig.showDescription ?? surveyConfig.show_description,
 			customQuestions: surveyConfig.customQuestions || surveyConfig.questions,
 			pages: surveyConfig.pages,
+			enabled: surveyConfig.enabled,
 			...displayOptions,
 		});
 	}
@@ -184,6 +190,17 @@ export class FeedbackSDK {
 
 		const normalizedOptions = this._normalizeSurveyConfig(options);
 		const surveyConfigDefaults = this._getWidgetTypeConfig('survey');
+		const surveyEnabled = this._isWidgetEnabled('survey', normalizedOptions);
+
+		if (!surveyEnabled) {
+			this.eventBus.emit('survey:suppressed', {
+				surveyId:
+					normalizedOptions.surveyId || normalizedOptions.id || options.id || null,
+				reason: 'disabled',
+				survey: normalizedOptions,
+			});
+			return null;
+		}
 
 		const surveyWidget = this.createWidget('survey', {
 			surveyId: normalizedOptions.surveyId,
@@ -215,6 +232,7 @@ export class FeedbackSDK {
 			email: normalizedOptions.email,
 			onSubmit: normalizedOptions.onSubmit,
 			onDismiss: normalizedOptions.onDismiss,
+			enabled: surveyEnabled,
 		});
 
 		surveyWidget.mount();
@@ -308,13 +326,19 @@ export class FeedbackSDK {
 			: {};
 
 		const inferredType =
-			survey.type || this._inferSurveyTypeFromPage(firstPage) || 'nps';
+			survey.surveyType ||
+			survey.survey_type ||
+			survey.type ||
+			this._inferSurveyTypeFromPage(firstPage) ||
+			'nps';
 
 		return {
 			...survey,
-			surveyId: survey.surveyId || survey.id || null,
-			surveyType: survey.surveyType || inferredType,
-			type: survey.type || inferredType,
+			surveyId: survey.surveyId || survey.survey_id || survey.id || null,
+			surveyType: survey.surveyType || survey.survey_type || inferredType,
+			type: survey.type || survey.survey_type || inferredType,
+			enabled:
+				typeof survey.enabled === 'boolean' ? survey.enabled : undefined,
 			should_show:
 				survey.should_show ??
 				(survey.eligibility ? survey.eligibility.should_show : undefined),
@@ -343,7 +367,11 @@ export class FeedbackSDK {
 			showTitle: survey.showTitle ?? survey.show_title ?? null,
 			showDescription:
 				survey.showDescription ?? survey.show_description ?? null,
-			customQuestions: survey.customQuestions || survey.questions || [],
+			customQuestions:
+				survey.customQuestions ||
+				survey.custom_questions ||
+				survey.questions ||
+				[],
 			pages: this._normalizeSurveyPages(survey.pages || []),
 		};
 	}
@@ -418,6 +446,23 @@ export class FeedbackSDK {
 		return this._toCamelCaseObject(mergedTypeConfig);
 	}
 
+	_isWidgetEnabled(type, options = {}) {
+		const typeConfig = this._getWidgetTypeConfig(type);
+		if (typeConfig.enabled === false) {
+			return false;
+		}
+
+		if (typeof options.enabled === 'boolean') {
+			return options.enabled;
+		}
+
+		if (typeof typeConfig.enabled === 'boolean') {
+			return typeConfig.enabled;
+		}
+
+		return true;
+	}
+
 	_isPlainObject(value) {
 		return Object.prototype.toString.call(value) === '[object Object]';
 	}
@@ -471,11 +516,21 @@ export class FeedbackSDK {
 
 		const configDefaults = this._getWidgetTypeConfig('changelog');
 		const explicitOptions = this._omitUndefined(options);
+		const changelogEnabled = this._isWidgetEnabled('changelog', explicitOptions);
+
+		if (!changelogEnabled) {
+			this.eventBus.emit('widget:suppressed', {
+				type: 'changelog',
+				reason: 'disabled',
+			});
+			return null;
+		}
 
 		const changelogWidget = this.createWidget('changelog', {
 			...defaults,
 			...configDefaults,
 			...explicitOptions,
+			enabled: changelogEnabled,
 		});
 
 		changelogWidget.mount();

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,
@@ -48,6 +48,15 @@ export class BaseWidget {
 	mount(container) {
 		if (this.mounted || this.destroyed) return this;
 
+		if (this.options.enabled === false) {
+			this.sdk.eventBus.emit('widget:suppressed', {
+				widget: this,
+				type: this.type,
+				reason: 'disabled',
+			});
+			return this;
+		}
+
 		if (this.options.suppressAfterSubmission && this._hasRecentlySubmitted()) {
 			this.sdk.eventBus.emit('widget:suppressed', {
 				widget: this,
@@ -127,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';
@@ -139,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');
 		});
 	}
@@ -334,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);