@product7/feedback-sdk 1.4.0 → 1.4.2

package/package.json

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

package/src/core/APIService.js

@@ -237,7 +237,7 @@ export class APIService extends BaseAPIService {
 	}
 
 	async getChangelogs(options) {
-    	return this.changelog.getChangelogs(options);
+		return this.changelog.getChangelogs(options);
 	}
 
 	_loadStoredSession() {

package/src/styles/messengerCustomStyles.js

@@ -0,0 +1,105 @@
+export function applyMessengerCustomStyles(options = {}) {
+	const {
+		primaryColor = '#155EEF',
+		textColor = '#1d1d1f',
+		backgroundColor = '#ffffff',
+		theme = 'light',
+	} = options;
+
+	let styleElement = document.getElementById(
+		'product7-messenger-custom-styles'
+	);
+
+	if (!styleElement) {
+		styleElement = document.createElement('style');
+		styleElement.id = 'product7-messenger-custom-styles';
+		document.head.appendChild(styleElement);
+	}
+
+	const adjustColor = (hex, percent, alpha = 1) => {
+		const num = parseInt(hex.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));
+
+		if (alpha < 1) {
+			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+		}
+
+		return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+	};
+
+	styleElement.textContent = `
+		#product7-messenger-widget {
+			--color-primary: ${primaryColor} !important;
+			--color-primary-hover: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-launcher-btn {
+			background: ${primaryColor} !important;
+		}
+
+		.messenger-launcher-btn:hover {
+			box-shadow: 0 8px 24px ${adjustColor(primaryColor, 0, 0.3)} !important;
+		}
+
+		.sdk-btn-primary {
+			background: ${primaryColor} !important;
+			border-color: ${primaryColor} !important;
+		}
+
+		.sdk-btn-primary:hover {
+			background: ${adjustColor(primaryColor, -10)} !important;
+			border-color: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-compose-send {
+			background: ${primaryColor} !important;
+		}
+
+		.messenger-compose-send:hover:not(:disabled) {
+			background: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-nav-tab.active .messenger-nav-icon,
+		.messenger-nav-tab.active .messenger-nav-label {
+			color: ${primaryColor} !important;
+		}
+
+		.messenger-home-view::before {
+			background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.08)} 0%, transparent 70%) !important;
+		}
+
+		${
+			backgroundColor !== '#ffffff'
+				? `
+		.messenger-panel-content {
+			background: ${backgroundColor} !important;
+		}
+		`
+				: ''
+		}
+
+		${
+			textColor !== '#1d1d1f'
+				? `
+		.messenger-panel-content,
+		.messenger-view {
+			color: ${textColor} !important;
+		}
+		`
+				: ''
+		}
+	`;
+
+	console.log('✅ Custom messenger styles applied:', { primaryColor, theme });
+}
+
+export function removeMessengerCustomStyles() {
+	const styleElement = document.getElementById(
+		'product7-messenger-custom-styles'
+	);
+	if (styleElement && styleElement.parentNode) {
+		styleElement.parentNode.removeChild(styleElement);
+	}
+}

package/src/widgets/MessengerWidget.js

@@ -1,4 +1,8 @@
 import { WebSocketService } from '../core/WebSocketService.js';
+import {
+	applyMessengerCustomStyles,
+	removeMessengerCustomStyles,
+} from '../styles/messengerCustomStyles.js';
 import { BaseWidget } from './BaseWidget.js';
 import { MessengerState } from './messenger/MessengerState.js';
 import { MessengerLauncher } from './messenger/components/MessengerLauncher.js';
@@ -17,14 +21,16 @@ export class MessengerWidget extends BaseWidget {
 		this.messengerOptions = {
 			position: options.position || 'bottom-right',
 			theme: options.theme || 'light',
+			primaryColor: options.primaryColor || '#155EEF',
+			textColor: options.textColor || '#1d1d1f',
+			backgroundColor: options.backgroundColor || '#ffffff',
+			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 			teamName: options.teamName || 'Support',
 			teamAvatars: options.teamAvatars || [],
 			welcomeMessage: options.welcomeMessage || 'How can we help?',
 			enableHelp: options.enableHelp !== false,
 			enableChangelog: options.enableChangelog !== false,
-			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 			featuredContent: options.featuredContent || null,
-			primaryColor: options.primaryColor || '#1c1c1e',
 			onSendMessage: options.onSendMessage || null,
 			onArticleClick: options.onArticleClick || null,
 			onChangelogClick: options.onChangelogClick || null,
@@ -56,6 +62,13 @@ export class MessengerWidget extends BaseWidget {
 		container.className = `messenger-widget theme-${this.messengerOptions.theme}`;
 		container.style.zIndex = '999999';
 
+		applyMessengerCustomStyles({
+			primaryColor: this.messengerOptions.primaryColor,
+			textColor: this.messengerOptions.textColor,
+			backgroundColor: this.messengerOptions.backgroundColor,
+			theme: this.messengerOptions.theme,
+		});
+
 		this.launcher = new MessengerLauncher(this.messengerState, {
 			position: this.messengerOptions.position,
 			primaryColor: this.messengerOptions.primaryColor,
@@ -526,25 +539,25 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-async _fetchHelpArticles() {
-    try {
-        const response = await this.apiService.getHelpCollections();
-        if (response.success && response.data) {
-            const collections = response.data.collections || response.data;
-            return collections.map((collection) => ({
-                id: collection.id,
-                title: collection.title,
-                description: collection.description || '',
-                articleCount: collection.article_count || 0,
-                url: collection.url_slug ? `/help/${collection.url_slug}` : null,
-            }));
-        }
-        return [];
-    } catch (error) {
-        console.error('[MessengerWidget] Failed to fetch help articles:', error);
-        return [];
-    }
-}
+	async _fetchHelpArticles() {
+		try {
+			const response = await this.apiService.getHelpCollections();
+			if (response.success && response.data) {
+				const collections = response.data.collections || response.data;
+				return collections.map((collection) => ({
+					id: collection.id,
+					title: collection.title,
+					description: collection.description || '',
+					articleCount: collection.article_count || 0,
+					url: collection.url_slug ? `/help-docs/${collection.url_slug}` : null,
+				}));
+			}
+			return [];
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch help articles:', error);
+			return [];
+		}
+	}
 
 	async fetchMessages(conversationId) {
 		try {
@@ -669,89 +682,109 @@ async _fetchHelpArticles() {
 		}
 	}
 
-async _fetchChangelog() {
-    if (this.apiService?.mock) {
-        return {
-            homeItems: [
-                {
-                    id: 'changelog_5',
-                    title: 'New integrations available',
-                    description: 'Connect with more tools you love and streamline your workflow.',
-                    tags: ['Integration'],
-                    coverImage: 'https://images.unsplash.com/photo-1674027444485-cec3da58eef4?w=500&auto=format&fit=crop&q=60',
-                    publishedAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(),
-                    url: '#',
-                },
-                {
-                    id: 'changelog_2',
-                    title: 'A new era of Insights has arrived',
-                    description: 'We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.',
-                    tags: ['New feature', 'AI'],
-                    coverImage: 'https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=500&auto=format&fit=crop&q=60',
-                    publishedAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
-                    url: '#',
-                },
-                {
-                    id: 'changelog_1',
-                    title: 'The 2025 Customer Service Transformation Report',
-                    description: 'Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.',
-                    tags: ['Report'],
-                    coverImage: 'https://images.unsplash.com/photo-1762330467475-a565d04e1808?w=500&auto=format&fit=crop&q=60',
-                    publishedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
-                    url: '#',
-                },
-            ],
-            changelogItems: [
-                {
-                    id: 'changelog_4',
-                    title: 'Enhanced conversation analytics',
-                    description: 'Get deeper insights into your customer conversations with our new analytics dashboard.',
-                    tags: ['Analytics'],
-                    coverImage: 'https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=500&auto=format&fit=crop&q=60',
-                    publishedAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
-                    url: '#',
-                },
-                {
-                    id: 'changelog_3',
-                    title: 'Escalation guidance for complex issues',
-                    description: 'New AI-powered escalation guidance helps your team handle complex customer issues more effectively.',
-                    tags: ['New feature', 'AI'],
-                    coverImage: 'https://images.unsplash.com/photo-1764773516703-b246ac2ad5ef?w=500&auto=format&fit=crop&q=60',
-                    publishedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-                    url: '#',
-                },
-            ],
-        };
-    }
-
-    try {
-        const response = await this.apiService.getChangelogs({ limit: 20 });
-
-        if (response.success && response.data) {
-            const changelogs = Array.isArray(response.data) ? response.data : [];
-
-            const mappedItems = changelogs.map((item) => ({
-                id: item.id,
-                title: item.title,
-                description: item.excerpt || item.description || '',
-                tags: item.labels ? item.labels.map((label) => label.name) : [],
-                coverImage: item.cover_image || null,
-                publishedAt: item.published_at,
-                url: item.slug ? `/changelog/${item.slug}` : null,
-            }));
-
-            return {
-                homeItems: mappedItems.slice(0, 3),
-                changelogItems: mappedItems,
-            };
-        }
-
-        return { homeItems: [], changelogItems: [] };
-    } catch (error) {
-        console.error('[MessengerWidget] Failed to fetch changelog:', error);
-        return { homeItems: [], changelogItems: [] };
-    }
-}
+	async _fetchChangelog() {
+		if (this.apiService?.mock) {
+			return {
+				homeItems: [
+					{
+						id: 'changelog_5',
+						title: 'New integrations available',
+						description:
+							'Connect with more tools you love and streamline your workflow.',
+						tags: ['Integration'],
+						coverImage:
+							'https://images.unsplash.com/photo-1674027444485-cec3da58eef4?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 14 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+					{
+						id: 'changelog_2',
+						title: 'A new era of Insights has arrived',
+						description:
+							'We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.',
+						tags: ['New feature', 'AI'],
+						coverImage:
+							'https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 5 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+					{
+						id: 'changelog_1',
+						title: 'The 2025 Customer Service Transformation Report',
+						description:
+							'Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.',
+						tags: ['Report'],
+						coverImage:
+							'https://images.unsplash.com/photo-1762330467475-a565d04e1808?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 2 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+				],
+				changelogItems: [
+					{
+						id: 'changelog_4',
+						title: 'Enhanced conversation analytics',
+						description:
+							'Get deeper insights into your customer conversations with our new analytics dashboard.',
+						tags: ['Analytics'],
+						coverImage:
+							'https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 10 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+					{
+						id: 'changelog_3',
+						title: 'Escalation guidance for complex issues',
+						description:
+							'New AI-powered escalation guidance helps your team handle complex customer issues more effectively.',
+						tags: ['New feature', 'AI'],
+						coverImage:
+							'https://images.unsplash.com/photo-1764773516703-b246ac2ad5ef?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 7 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+				],
+			};
+		}
+
+		try {
+			const response = await this.apiService.getChangelogs({ limit: 20 });
+
+			if (response.success && response.data) {
+				const changelogs = Array.isArray(response.data) ? response.data : [];
+
+				const mappedItems = changelogs.map((item) => ({
+					id: item.id,
+					title: item.title,
+					description: item.excerpt || item.description || '',
+					tags: item.labels ? item.labels.map((label) => label.name) : [],
+					coverImage: item.cover_image || null,
+					publishedAt: item.published_at,
+					url: item.slug ? `/changelog/${item.slug}` : null,
+				}));
+
+				return {
+					homeItems: mappedItems.slice(0, 3),
+					changelogItems: mappedItems,
+				};
+			}
+
+			return { homeItems: [], changelogItems: [] };
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch changelog:', error);
+			return { homeItems: [], changelogItems: [] };
+		}
+	}
 
 	async onMount() {
 		this.loadInitialData();
@@ -785,6 +818,8 @@ async _fetchChangelog() {
 	}
 
 	destroy() {
+		removeMessengerCustomStyles();
+
 		if (this.launcher) {
 			this.launcher.destroy();
 		}