@product7/feedback-sdk 1.6.3 → 1.6.5

package/package.json

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

package/src/core/FeedbackSDK.js

@@ -63,12 +63,15 @@ export class FeedbackSDK {
 		}
 
 		const widgetId = generateId('widget');
+		const widgetConfig = this._getWidgetTypeConfig(type);
+		const explicitOptions = this._omitUndefined(options);
 		const widgetOptions = {
 			id: widgetId,
 			sdk: this,
 			apiService: this.apiService,
 			...this.config,
-			...options,
+			...widgetConfig,
+			...explicitOptions,
 		};
 
 		try {
@@ -180,13 +183,22 @@ export class FeedbackSDK {
 		}
 
 		const normalizedOptions = this._normalizeSurveyConfig(options);
+		const surveyConfigDefaults = this._getWidgetTypeConfig('survey');
 
 		const surveyWidget = this.createWidget('survey', {
 			surveyId: normalizedOptions.surveyId,
 			surveyType:
 				normalizedOptions.surveyType || normalizedOptions.type || 'nps',
-			position: normalizedOptions.position || 'bottom-right',
-			theme: normalizedOptions.theme || this.config.theme || 'light',
+			position:
+				normalizedOptions.position ??
+				surveyConfigDefaults.position ??
+				this.config.position ??
+				'bottom-right',
+			theme:
+				normalizedOptions.theme ??
+				surveyConfigDefaults.theme ??
+				this.config.theme ??
+				'light',
 			title: normalizedOptions.title,
 			description: normalizedOptions.description,
 			lowLabel: normalizedOptions.lowLabel,
@@ -389,6 +401,58 @@ export class FeedbackSDK {
 		return null;
 	}
 
+	_getWidgetTypeConfig(type) {
+		const widgetsConfig = this._isPlainObject(this.config?.widgets)
+			? this.config.widgets
+			: {};
+
+		const legacyTypeConfig = this._isPlainObject(this.config?.[type])
+			? this.config[type]
+			: {};
+
+		const namespacedTypeConfig = this._isPlainObject(widgetsConfig?.[type])
+			? widgetsConfig[type]
+			: {};
+
+		const mergedTypeConfig = deepMerge(legacyTypeConfig, namespacedTypeConfig);
+		return this._toCamelCaseObject(mergedTypeConfig);
+	}
+
+	_isPlainObject(value) {
+		return Object.prototype.toString.call(value) === '[object Object]';
+	}
+
+	_toCamelCaseKey(key) {
+		return key.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
+	}
+
+	_toCamelCaseObject(value) {
+		if (Array.isArray(value)) {
+			return value.map((item) => this._toCamelCaseObject(item));
+		}
+
+		if (!this._isPlainObject(value)) {
+			return value;
+		}
+
+		const normalized = {};
+		for (const [key, nestedValue] of Object.entries(value)) {
+			normalized[this._toCamelCaseKey(key)] =
+				this._toCamelCaseObject(nestedValue);
+		}
+		return normalized;
+	}
+
+	_omitUndefined(value) {
+		if (!this._isPlainObject(value)) {
+			return value;
+		}
+
+		return Object.fromEntries(
+			Object.entries(value).filter(([, nestedValue]) => nestedValue !== undefined)
+		);
+	}
+
 	showChangelog(options = {}) {
 		if (!this.initialized) {
 			throw new SDKError(
@@ -396,16 +460,22 @@ export class FeedbackSDK {
 			);
 		}
 
+		const defaults = {
+			position: this.config.position || 'bottom-right',
+			theme: this.config.theme || 'light',
+			title: "What's New",
+			triggerText: "What's New",
+			showBadge: true,
+			viewButtonText: 'View Update',
+		};
+
+		const configDefaults = this._getWidgetTypeConfig('changelog');
+		const explicitOptions = this._omitUndefined(options);
+
 		const changelogWidget = this.createWidget('changelog', {
-			position: options.position || 'bottom-right',
-			theme: options.theme || this.config.theme || 'light',
-			title: options.title || "What's New",
-			triggerText: options.triggerText || "What's New",
-			showBadge: options.showBadge !== false,
-			viewButtonText: options.viewButtonText || 'View Update',
-			changelogBaseUrl: options.changelogBaseUrl,
-			openInNewTab: options.openInNewTab,
-			onViewUpdate: options.onViewUpdate,
+			...defaults,
+			...configDefaults,
+			...explicitOptions,
 		});
 
 		changelogWidget.mount();

package/src/widgets/ButtonWidget.js

@@ -8,6 +8,13 @@ export class ButtonWidget extends BaseWidget {
 	}
 
 	_render() {
+		const buttonText =
+			this.options.buttonText ||
+			this.options.triggerText ||
+			this.options.label ||
+			this.options.text ||
+			'Feedback';
+
 		const button = document.createElement('div');
 		button.className = `feedback-widget-button position-${this.options.position}`;
 		button.innerHTML = `
@@ -15,7 +22,7 @@ export class ButtonWidget extends BaseWidget {
         <svg class="feedback-icon" width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
           <path d="M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z"/>
         </svg>
-        <span class="feedback-text">Feedback</span>
+        <span class="feedback-text">${buttonText}</span>
         
         <div class="feedback-minimize-icon">
           <svg viewBox="0 0 256 256">

package/src/widgets/MessengerWidget.js

@@ -27,6 +27,7 @@ export class MessengerWidget extends BaseWidget {
 			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 			teamName: options.teamName || 'Support',
 			teamAvatars: options.teamAvatars || [],
+			greetingMessage: options.greetingMessage || 'Hi there 👋',
 			welcomeMessage: options.welcomeMessage || 'How can we help?',
 			enableHelp: options.enableHelp !== false,
 			enableChangelog: options.enableChangelog !== false,
@@ -44,6 +45,7 @@ export class MessengerWidget extends BaseWidget {
 		this.messengerState = new MessengerState({
 			teamName: this.messengerOptions.teamName,
 			teamAvatars: this.messengerOptions.teamAvatars,
+			greetingMessage: this.messengerOptions.greetingMessage,
 			welcomeMessage: this.messengerOptions.welcomeMessage,
 			enableHelp: this.messengerOptions.enableHelp,
 			enableChangelog: this.messengerOptions.enableChangelog,

package/src/widgets/messenger/MessengerState.js

@@ -16,6 +16,7 @@ export class MessengerState {
 
 		this.teamName = options.teamName || 'Support';
 		this.teamAvatars = options.teamAvatars || [];
+		this.greetingMessage = options.greetingMessage || 'Hi there 👋';
 		this.welcomeMessage = options.welcomeMessage || 'How can we help?';
 
 		this.userContext = options.userContext || null;

package/src/widgets/messenger/views/HomeView.js

@@ -44,7 +44,7 @@ export class HomeView {
 						</button>
 					</div>
 					<div class="messenger-home-welcome">
-						<span class="messenger-home-greeting">Hi there 👋</span>
+						<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
 						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
 					</div>
 				</div>

package/types/index.d.ts

@@ -8,6 +8,7 @@ declare module '@product7/feedback-sdk' {
 		theme?: 'light' | 'dark';
 		apiUrl?: string;
 		autoShow?: boolean;
+		widgets?: WidgetConfigMap;
 	}
 
 	export interface UserContext {
@@ -22,6 +23,33 @@ declare module '@product7/feedback-sdk' {
 		};
 	}
 
+	export interface ButtonWidgetOptions {
+		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+		theme?: 'light' | 'dark';
+		boardId?: string;
+		displayMode?: 'panel' | 'modal';
+		size?: 'small' | 'medium' | 'large';
+		primaryColor?: string;
+		backgroundColor?: string;
+		textColor?: string;
+		autoShow?: boolean;
+		suppressAfterSubmission?: boolean;
+		suppressionDays?: number;
+		buttonText?: string;
+		triggerText?: string;
+		label?: string;
+		text?: string;
+		customStyles?: Record<string, string>;
+	}
+
+	export interface WidgetConfigMap {
+		button?: Partial<ButtonWidgetOptions> | Record<string, any>;
+		survey?: Partial<SurveyWidgetOptions> | Record<string, any>;
+		messenger?: Partial<MessengerWidgetOptions> | Record<string, any>;
+		changelog?: Partial<ChangelogWidgetOptions> | Record<string, any>;
+		[key: string]: Record<string, any> | undefined;
+	}
+
 	export interface ButtonWidget {
 		id: string;
 		type: 'button';
@@ -29,8 +57,14 @@ declare module '@product7/feedback-sdk' {
 		destroy(): void;
 		show(): this;
 		hide(): this;
+		openPanel(): void;
+		closePanel(): void;
 		openModal(): void;
 		closeModal(): void;
+		updateText(text: string): void;
+		updatePosition(
+			position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+		): void;
 	}
 
 	export class FeedbackSDK {
@@ -41,10 +75,17 @@ declare module '@product7/feedback-sdk' {
 			sessionToken?: string;
 			expiresIn?: number;
 		}>;
+		createWidget(type: 'button', options?: ButtonWidgetOptions): ButtonWidget;
+		createWidget(type: 'survey', options?: SurveyWidgetOptions): SurveyWidget;
+		createWidget(
+			type: 'messenger',
+			options?: MessengerWidgetOptions
+		): MessengerWidget;
 		createWidget(
-			type: 'button',
-			options?: Partial<FeedbackConfig>
-		): ButtonWidget;
+			type: 'changelog',
+			options?: ChangelogWidgetOptions
+		): ChangelogWidget;
+		createWidget(type: string, options?: Record<string, any>): any;
 		setUserContext(userContext: UserContext): void;
 		getUserContext(): UserContext | null;
 		destroy(): void;
@@ -213,6 +254,7 @@ declare module '@product7/feedback-sdk' {
 		theme?: 'light' | 'dark';
 		teamName?: string;
 		teamAvatars?: string[];
+		greetingMessage?: string;
 		welcomeMessage?: string;
 		enableHelp?: boolean;
 		enableChangelog?: boolean;