@product7/product7-js 0.3.1 → 0.3.4

package/src/widgets/MessengerWidget.js

@@ -17,6 +17,7 @@ import { PreChatFormView } from './messenger/views/PreChatFormView.js';
 export class MessengerWidget extends BaseWidget {
 	constructor(options) {
 		super({ ...options, type: 'messenger' });
+		this._explicitOptions = options || {};
 		const resolvedTheme = options.theme || 'light';
 		const hasExplicitTextColor = Object.prototype.hasOwnProperty.call(
 			options,
@@ -99,6 +100,10 @@ export class MessengerWidget extends BaseWidget {
 		this._handleConversationClosed = this._handleConversationClosed.bind(this);
 	}
 
+	_hasTrigger() {
+		return this.options.trigger === true || this.options.trigger === undefined;
+	}
+
 	_createInternalFeedbackWidget() {
 		try {
 			const widget = this.sdk.createWidget('button', {
@@ -134,11 +139,13 @@ export class MessengerWidget extends BaseWidget {
 			this._feedbackWidget = this._createInternalFeedbackWidget();
 		}
 
-		this.launcher = new MessengerLauncher(this.messengerState, {
-			position: this.messengerOptions.position,
-			primaryColor: this.messengerOptions.primaryColor,
-		});
-		container.appendChild(this.launcher.render());
+		if (this._hasTrigger()) {
+			this.launcher = new MessengerLauncher(this.messengerState, {
+				position: this.messengerOptions.position,
+				primaryColor: this.messengerOptions.primaryColor,
+			});
+			container.appendChild(this.launcher.render());
+		}
 
 		this.panel = new MessengerPanel(this.messengerState, {
 			position: this.messengerOptions.position,
@@ -273,23 +280,13 @@ export class MessengerWidget extends BaseWidget {
 
 	async _handleIdentifyContact(contactData) {
 		try {
-			const response = await this.apiService.identifyContact({
-				name: contactData.name,
+			// Route through sdk.identify() so the SDK-level identity state is updated
+			// and applyIdentity() handles the messenger state + WebSocket as a side effect.
+			const result = await this.sdk.identify({
 				email: contactData.email,
+				name: contactData.name,
 			});
-
-			if (response.status) {
-				console.log(
-					'[MessengerWidget] Contact identified:',
-					response.data.contact_id
-				);
-				this.messengerState.setIdentified(true, {
-					name: contactData.name,
-					email: contactData.email,
-				});
-			}
-
-			return response;
+			return result;
 		} catch (error) {
 			console.error('[MessengerWidget] Failed to identify contact:', error);
 			throw error;
@@ -297,8 +294,17 @@ export class MessengerWidget extends BaseWidget {
 	}
 
 	markAsIdentified(name, email) {
-		this.messengerState.setIdentified(true, { name, email });
-		console.log('[MessengerWidget] Marked as identified:', email);
+		// Called externally by the app when the user is already known.
+		// No API call needed — identity was already established via sdk.identify().
+		this.applyIdentity({ name, email });
+	}
+
+	applyIdentity(metadata = {}) {
+		this.messengerState.setIdentified(true, metadata);
+
+		if (this.apiService?.sessionToken && !this.wsService?.isConnected) {
+			this._initWebSocket();
+		}
 	}
 
 	async _handleUploadFile(base64Data, filename) {
@@ -809,6 +815,42 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
+	async _fetchAndApplySettings() {
+		try {
+			const response = await this.apiService.getMessengerSettings();
+			if (!response?.status || !response?.data) return;
+
+			const s = response.data;
+
+			// Only apply values that were NOT explicitly passed in options
+			if (s.team_name && !this._hasExplicitOption('teamName')) {
+				this.messengerOptions.teamName = s.team_name;
+				this.messengerState.teamName = s.team_name;
+			}
+			if (s.logo_url && !this._hasExplicitOption('logoUrl')) {
+				this.messengerOptions.logoUrl = s.logo_url;
+			}
+			if (s.greeting_message && !this._hasExplicitOption('greetingMessage')) {
+				this.messengerState.greetingMessage = s.greeting_message;
+			}
+			if (s.response_time && !this._hasExplicitOption('responseTime')) {
+				this.messengerState.responseTime = s.response_time;
+			}
+
+			// Notify views to re-render with new values
+			this.messengerState._notify('availabilityUpdate', {});
+		} catch (e) {
+			// non-fatal
+		}
+	}
+
+	_hasExplicitOption(key) {
+		return Object.prototype.hasOwnProperty.call(
+			this._explicitOptions || {},
+			key
+		);
+	}
+
 	async checkAgentAvailability() {
 		try {
 			const response = await this.apiService.checkAgentsOnline();
@@ -954,6 +996,9 @@ export class MessengerWidget extends BaseWidget {
 		this._applyPreviewData();
 
 		if (this.messengerOptions.autoLoadData) {
+			// Fetch workspace settings and apply only if not explicitly configured
+			this._fetchAndApplySettings();
+
 			this.loadInitialData();
 
 			if (this.apiService?.sessionToken) {

package/src/widgets/SurveyWidget.js

@@ -92,6 +92,7 @@ export class SurveyWidget extends BaseWidget {
 
 		SurveyWidget.removeDanglingElements();
 		this._renderSurvey();
+		this.state.isOpen = true;
 		this.surveyState.isVisible = true;
 		this.sdk.eventBus.emit('survey:shown', {
 			widget: this,
@@ -101,6 +102,7 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	hide() {
+		this.state.isOpen = false;
 		this._closeSurvey();
 		return this;
 	}
@@ -175,6 +177,7 @@ export class SurveyWidget extends BaseWidget {
 		this._attachSurveyEvents();
 
 		requestAnimationFrame(() => {
+			if (!this.surveyElement) return;
 			this.surveyElement.style.opacity = '1';
 			this.surveyElement.style.transform =
 				this.surveyOptions.position === 'center'
@@ -1312,6 +1315,7 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_closeSurvey(resetState = true, immediate = false) {
+		this.state.isOpen = false;
 		if (this._escapeHandler) {
 			document.removeEventListener('keydown', this._escapeHandler);
 			this._escapeHandler = null;
@@ -1374,6 +1378,22 @@ export class SurveyWidget extends BaseWidget {
 		this.sdk.eventBus.emit('survey:closed', { widget: this });
 	}
 
+	open() {
+		return this.show();
+	}
+
+	close() {
+		return this.hide();
+	}
+
+	toggle() {
+		if (this.surveyState.isVisible) {
+			return this.hide();
+		}
+
+		return this.show();
+	}
+
 	destroy() {
 		this._closeSurvey(true, true);
 		super.destroy();

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

@@ -21,7 +21,9 @@ export class ChatView {
 
 		this._unsubscribe = this.state.subscribe((type, data) => {
 			if (type === 'connectionChange') {
-				const banner = this.element?.querySelector('.messenger-connection-banner');
+				const banner = this.element?.querySelector(
+					'.messenger-connection-banner'
+				);
 				if (banner) {
 					banner.style.display = data.connected ? 'none' : 'flex';
 				}
@@ -71,9 +73,10 @@ export class ChatView {
 				? this._renderEmptyState(isNewConversation)
 				: this._renderGroupedMessages(messages);
 
-		const defaultPlaceholder = this.options.composePlaceholder || 'Write a message...';
+		const defaultPlaceholder =
+			this.options.composePlaceholder || 'Write a message...';
 		const placeholder = isNewConversation
-			? (this.options.composePlaceholder || 'Start typing your message...')
+			? this.options.composePlaceholder || 'Start typing your message...'
 			: isClosed
 				? 'Conversation closed'
 				: defaultPlaceholder;
@@ -94,7 +97,7 @@ export class ChatView {
 				</div>
 				<div class="messenger-chat-header-info">
 					<span class="messenger-chat-title">${this._escapeHtml(teamName)}</span>
-					<span class="messenger-chat-subtitle">${isClosed ? 'Conversation resolved' : (this.state.responseTime || 'Typically replies within minutes')}</span>
+					<span class="messenger-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
 				</div>
 				<div class="messenger-chat-header-actions">
 					<button class="sdk-btn-icon sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
@@ -211,7 +214,9 @@ export class ChatView {
 		const messageClass = isOwn
 			? 'messenger-message-own'
 			: 'messenger-message-received';
-		const timeStr = isLastInGroup ? this._formatMessageTime(message.timestamp) : '';
+		const timeStr = isLastInGroup
+			? this._formatMessageTime(message.timestamp)
+			: '';
 		const attachmentsHtml = this._renderMessageAttachments(message.attachments);
 		const isOptimistic = message.isOptimistic;
 
@@ -225,9 +230,10 @@ export class ChatView {
 		if (isOwn) {
 			const sentIndicator = isLastInGroup
 				? `<div class="messenger-message-meta messenger-message-meta-own">
-						${isOptimistic
-							? `<span class="messenger-message-sent-status">Sending…</span>`
-							: `<span class="messenger-message-sent-status">Sent</span>`
+						${
+							isOptimistic
+								? `<span class="messenger-message-sent-status">Sending…</span>`
+								: `<span class="messenger-message-sent-status">Sent</span>`
 						}
 						${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
 					</div>`

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

@@ -137,7 +137,8 @@ export class HomeView {
 		const title = conversation.title || teamName;
 		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
 		const preview = conversation.lastMessage
-			? conversation.lastMessage.substring(0, 48) + (conversation.lastMessage.length > 48 ? '...' : '')
+			? conversation.lastMessage.substring(0, 48) +
+				(conversation.lastMessage.length > 48 ? '...' : '')
 			: '';
 		const hasUnread = conversation.unread > 0;
 
@@ -253,7 +254,9 @@ export class HomeView {
 	}
 
 	_attachEvents() {
-		const recentCard = this.element.querySelector('.messenger-home-recent-card');
+		const recentCard = this.element.querySelector(
+			'.messenger-home-recent-card'
+		);
 		if (recentCard) {
 			recentCard.addEventListener('click', () => {
 				const convId = recentCard.dataset.conversationId;

package/types/index.d.ts

@@ -19,11 +19,13 @@ declare module '@product7/product7-js' {
 		user_id?: string;
 		email?: string;
 		name?: string;
+		profile_picture?: string;
 		custom_fields?: Record<string, any>;
 		company?: {
 			id?: string;
 			name?: string;
 			monthly_spend?: number;
+			custom_fields?: Record<string, any>;
 		};
 	}
 
@@ -44,11 +46,15 @@ declare module '@product7/product7-js' {
 		triggerText?: string;
 		label?: string;
 		text?: string;
+		headless?: boolean;
 		customStyles?: Record<string, string>;
 		trigger?: boolean | string | Element;
 	}
 
+	export interface FeedbackWidgetOptions extends ButtonWidgetOptions {}
+
 	export interface WidgetConfigMap {
+		feedback?: Partial<FeedbackWidgetOptions> | Record<string, any>;
 		button?: Partial<ButtonWidgetOptions> | Record<string, any>;
 		survey?: Partial<SurveyWidgetOptions> | Record<string, any>;
 		messenger?: Partial<MessengerWidgetOptions> | Record<string, any>;
@@ -63,6 +69,9 @@ declare module '@product7/product7-js' {
 		destroy(): void;
 		show(): this;
 		hide(): this;
+		open(): this;
+		close(): this;
+		toggle(): this;
 		openPanel(): void;
 		closePanel(): void;
 		openModal(): void;
@@ -73,6 +82,8 @@ declare module '@product7/product7-js' {
 		): void;
 	}
 
+	export interface FeedbackWidget extends ButtonWidget {}
+
 	export class Product7 {
 		constructor(config: FeedbackConfig);
 		static create(config: FeedbackConfig): Product7;
@@ -84,7 +95,21 @@ declare module '@product7/product7-js' {
 			status?: boolean;
 			message?: string | null;
 			configVersion?: number | null;
+			identified?: boolean;
+		}>;
+		identify(metadata: Metadata): Promise<{
+			identified: boolean;
+			metadata: Metadata | null;
+			response: any;
 		}>;
+		createFeedbackWidget(options?: FeedbackWidgetOptions): FeedbackWidget;
+		createMessengerWidget(options?: MessengerWidgetOptions): MessengerWidget;
+		createChangelogWidget(options?: ChangelogWidgetOptions): ChangelogWidget;
+		createSurveyWidget(options?: SurveyWidgetOptions): SurveyWidget;
+		createWidget(
+			type: 'feedback',
+			options?: FeedbackWidgetOptions
+		): FeedbackWidget;
 		createWidget(type: 'button', options?: ButtonWidgetOptions): ButtonWidget;
 		createWidget(type: 'survey', options?: SurveyWidgetOptions): SurveyWidget;
 		createWidget(
@@ -182,8 +207,12 @@ declare module '@product7/product7-js' {
 	}
 
 	export interface SurveyWidget {
+		mount(container?: string | HTMLElement): this;
 		show(): this;
 		hide(): this;
+		open(): this;
+		close(): this;
+		toggle(): this;
 		destroy(): void;
 		surveyOptions: SurveyWidgetOptions;
 		surveyState: {
@@ -235,6 +264,7 @@ declare module '@product7/product7-js' {
 		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 		theme?: 'light' | 'dark';
+		headless?: boolean;
 		showBackdrop?: boolean;
 		triggerText?: string;
 		showBadge?: boolean;
@@ -251,6 +281,9 @@ declare module '@product7/product7-js' {
 		type: 'changelog';
 		mount(container?: string | HTMLElement): this;
 		destroy(): void;
+		open(): this;
+		close(): this;
+		toggle(): this;
 		openModal(): void;
 		closeModal(): void;
 		openSidebar(): void;
@@ -266,6 +299,7 @@ declare module '@product7/product7-js' {
 		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left';
 		theme?: 'light' | 'dark';
+		headless?: boolean;
 		teamName?: string;
 		teamAvatars?: string[];
 		greetingMessage?: string;