@product7/feedback-sdk 1.6.4 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.6.4",
+	"version": "1.6.6",
 	"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

@@ -18,6 +18,11 @@ export class MessengerWidget extends BaseWidget {
 	constructor(options) {
 		super({ ...options, type: 'messenger' });
 
+		const resolvedEnableChangelog =
+			typeof options.enableChangelog === 'boolean'
+				? options.enableChangelog
+				: options.enableNews !== false;
+
 		this.messengerOptions = {
 			position: options.position || 'bottom-right',
 			theme: options.theme || 'light',
@@ -30,7 +35,10 @@ export class MessengerWidget extends BaseWidget {
 			greetingMessage: options.greetingMessage || 'Hi there 👋',
 			welcomeMessage: options.welcomeMessage || 'How can we help?',
 			enableHelp: options.enableHelp !== false,
-			enableChangelog: options.enableChangelog !== false,
+			enableChangelog: resolvedEnableChangelog,
+			autoLoadData: options.autoLoadData !== false,
+			initialView: options.initialView || 'home',
+			previewData: options.previewData || null,
 			featuredContent: options.featuredContent || null,
 			feedbackUrl: options.feedbackUrl || null,
 			changelogUrl: options.changelogUrl || null,
@@ -498,6 +506,51 @@ export class MessengerWidget extends BaseWidget {
 		};
 	}
 
+	_applyPreviewData() {
+		const data = this.messengerOptions.previewData;
+		if (!data || typeof data !== 'object') {
+			return;
+		}
+
+		if (Array.isArray(data.conversations)) {
+			this.messengerState.setConversations(data.conversations);
+		}
+
+		if (Array.isArray(data.helpArticles)) {
+			this.messengerState.setHelpArticles(data.helpArticles);
+		}
+
+		if (Array.isArray(data.homeChangelogItems)) {
+			this.messengerState.setHomeChangelogItems(data.homeChangelogItems);
+		}
+
+		if (Array.isArray(data.changelogItems)) {
+			this.messengerState.setChangelogItems(data.changelogItems);
+		}
+
+		if (typeof data.unreadCount === 'number') {
+			this.setUnreadCount(data.unreadCount);
+		}
+
+		if (data.availability && typeof data.availability === 'object') {
+			const availability = data.availability;
+			this.messengerState.agentsOnline = Boolean(
+				availability.agentsOnline ?? availability.agents_online
+			);
+			this.messengerState.onlineCount =
+				availability.onlineCount ?? availability.online_count ?? 0;
+			this.messengerState.responseTime =
+				availability.responseTime ??
+				availability.response_time ??
+				this.messengerState.responseTime;
+			this.messengerState._notify('availabilityUpdate', availability);
+		}
+
+		if (typeof data.currentView === 'string') {
+			this.messengerState.setView(data.currentView);
+		}
+	}
+
 	async loadInitialData() {
 		try {
 			const conversations = await this._fetchConversations();
@@ -824,17 +877,28 @@ export class MessengerWidget extends BaseWidget {
 	}
 
 	async onMount() {
-		this.loadInitialData();
+		this._applyPreviewData();
 
-		if (this.apiService?.sessionToken) {
-			this._initWebSocket();
-		}
+		if (this.messengerOptions.autoLoadData) {
+			this.loadInitialData();
 
-		this.checkAgentAvailability();
+			if (this.apiService?.sessionToken) {
+				this._initWebSocket();
+			}
 
-		this._availabilityInterval = setInterval(() => {
 			this.checkAgentAvailability();
-		}, 60000);
+
+			this._availabilityInterval = setInterval(() => {
+				this.checkAgentAvailability();
+			}, 60000);
+		}
+
+		if (
+			this.messengerOptions.initialView &&
+			this.messengerOptions.initialView !== this.messengerState.currentView
+		) {
+			this.messengerState.setView(this.messengerOptions.initialView);
+		}
 	}
 
 	onDestroy() {

package/types/index.d.ts

@@ -4,10 +4,15 @@ declare module '@product7/feedback-sdk' {
 		userContext?: UserContext;
 		debug?: boolean;
 		boardId?: string;
+		siteId?: string;
+		sessionToken?: string;
 		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 		theme?: 'light' | 'dark';
 		apiUrl?: string;
 		autoShow?: boolean;
+		mock?: boolean;
+		env?: string;
+		widgets?: WidgetConfigMap;
 	}
 
 	export interface UserContext {
@@ -22,6 +27,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 +61,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 +79,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;
@@ -217,6 +262,25 @@ declare module '@product7/feedback-sdk' {
 		welcomeMessage?: string;
 		enableHelp?: boolean;
 		enableChangelog?: boolean;
+		enableNews?: boolean;
+		autoLoadData?: boolean;
+		initialView?: 'home' | 'messages' | 'chat' | 'prechat' | 'help' | 'changelog';
+		previewData?: {
+			conversations?: any[];
+			helpArticles?: any[];
+			homeChangelogItems?: any[];
+			changelogItems?: any[];
+			unreadCount?: number;
+			currentView?: string;
+			availability?: {
+				agentsOnline?: boolean;
+				agents_online?: boolean;
+				onlineCount?: number;
+				online_count?: number;
+				responseTime?: string;
+				response_time?: string;
+			};
+		};
 		logoUrl?: string;
 		primaryColor?: string;
 		featuredContent?: {