@product7/feedback-sdk 1.6.8 → 1.7.0

package/package.json

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

package/src/api/mock-data/index.js

@@ -173,30 +173,171 @@ export const MOCK_HELP_COLLECTIONS = [
 export const MOCK_SURVEYS = [
 	{
 		id: 'mock_nps_survey',
-		type: 'nps',
-		title: 'How likely are you to recommend us?',
-		description: 'Your feedback helps us improve',
-		low_label: 'Not likely',
-		high_label: 'Very likely',
-		trigger: 'manual',
+		name: 'NPS Score',
+		slug: 'nps',
 		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'nps-page-1',
+				type: 'rating',
+				title: 'How likely are you to recommend us to a friend?',
+				description: '',
+				placeholder: '',
+				rating_config: { scale: 11, low_label: 'Very unlikely', high_label: 'Very likely', survey_type: 'nps' },
+				multiple_choice_config: null,
+				link_config: null,
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
 	},
 	{
 		id: 'mock_csat_survey',
-		type: 'csat',
-		title: 'How satisfied are you?',
-		description: 'Rate your experience with our product',
-		trigger: 'manual',
+		name: 'CSAT Survey',
+		slug: 'csat',
 		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'csat-page-1',
+				type: 'rating',
+				title: 'How satisfied are you with our service?',
+				description: '',
+				placeholder: '',
+				rating_config: { scale: 5, low_label: 'Very dissatisfied', high_label: 'Very satisfied', survey_type: 'emoji' },
+				multiple_choice_config: null,
+				link_config: null,
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
 	},
 	{
 		id: 'mock_ces_survey',
-		type: 'ces',
-		title: 'How easy was it?',
-		description: 'Rate the ease of completing your task',
-		low_label: 'Very difficult',
-		high_label: 'Very easy',
-		trigger: 'manual',
+		name: 'Customer Effort Score',
+		slug: 'ces',
+		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'ces-page-1',
+				type: 'rating',
+				title: 'How easy was it to use our product?',
+				description: '',
+				placeholder: '',
+				rating_config: { scale: 5, low_label: 'Very difficult', high_label: 'Very easy', survey_type: 'ces' },
+				multiple_choice_config: null,
+				link_config: null,
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
+	},
+	{
+		id: 'mock_open_question_survey',
+		name: 'Open Question',
+		slug: 'open-question',
+		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'open-page-1',
+				type: 'text',
+				title: 'What could we do better?',
+				description: 'Is there anything we could do to make our product better for you?',
+				placeholder: 'Type your answer here',
+				rating_config: null,
+				multiple_choice_config: null,
+				link_config: null,
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
+	},
+	{
+		id: 'mock_product_idea_poll_survey',
+		name: 'Product Idea Poll',
+		slug: 'product-idea-poll',
 		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'poll-page-1',
+				type: 'multiple_choice',
+				title: 'Which feature should we add next?',
+				description: 'Vote on the feature you would like to see next.',
+				placeholder: '',
+				rating_config: null,
+				multiple_choice_config: {
+					allow_multiple_selection: false,
+					survey_type: 'regular',
+					options: [
+						{ id: 'opt1', label: 'Better reporting' },
+						{ id: 'opt2', label: 'Mobile app' },
+						{ id: 'opt3', label: 'Integrations' },
+						{ id: 'opt4', label: 'AI features' },
+					],
+				},
+				link_config: null,
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
+	},
+	{
+		id: 'mock_pmf_survey',
+		name: 'Product Market Fit (PMF)',
+		slug: 'pmf',
+		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'pmf-page-1',
+				type: 'multiple_choice',
+				title: 'How would you feel if you could no longer use our product?',
+				description: '',
+				placeholder: '',
+				rating_config: null,
+				multiple_choice_config: {
+					allow_multiple_selection: false,
+					survey_type: 'regular',
+					options: [
+						{ id: 'very_disappointed', label: 'Very disappointed' },
+						{ id: 'somewhat_disappointed', label: 'Somewhat disappointed' },
+						{ id: 'not_disappointed', label: 'Not disappointed' },
+					],
+				},
+				link_config: null,
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
+	},
+	{
+		id: 'mock_user_interview_survey',
+		name: 'User Interview Request',
+		slug: 'user-interview',
+		status: 'active',
+		trigger_type: 'manual',
+		pages: [
+			{
+				id: 'interview-page-1',
+				type: 'link',
+				title: 'Would you like to hop on a quick demo?',
+				description: 'We would love to hear your thoughts and answer any questions you have.',
+				placeholder: '',
+				rating_config: null,
+				multiple_choice_config: null,
+				link_config: {
+					button_text: 'Book a demo',
+					link_text: '',
+					redirect_url: 'https://example.com',
+					open_in: 'new_tab',
+				},
+				after_this_page: { default: 'end_survey', conditions: [] },
+				required: true,
+			},
+		],
 	},
 ];

package/src/core/FeedbackSDK.js

@@ -512,6 +512,7 @@ export class FeedbackSDK {
 			triggerText: "What's New",
 			showBadge: true,
 			viewButtonText: 'View Update',
+			showBackdrop: true,
 		};
 
 		const configDefaults = this._getWidgetTypeConfig('changelog');

package/src/docs/framework-integrations.md

@@ -688,6 +688,7 @@ messenger.mount();
 const changelog = sdk.createWidget('changelog', {
 	position: 'bottom-left',
 	theme: 'light',
+	showBackdrop: true,
 	triggerText: "What's New",
 	showBadge: true,
 	title: "What's New",

package/src/widgets/ChangelogWidget.js

@@ -7,6 +7,7 @@ export class ChangelogWidget extends BaseWidget {
 		this.isLoading = false;
 		this.modalElement = null;
 		this.sidebarElement = null;
+		this.listModalBackdropElement = null;
 		this.currentIndex = 0;
 	}
 
@@ -87,10 +88,12 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	_createModal() {
-		this.backdropElement = document.createElement('div');
-		this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
-		document.body.appendChild(this.backdropElement);
-		this.backdropElement.addEventListener('click', () => this.closeModal());
+		if (this.options.showBackdrop !== false) {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
+			document.body.appendChild(this.backdropElement);
+			this.backdropElement.addEventListener('click', () => this.closeModal());
+		}
 
 		this.modalElement = document.createElement('div');
 		this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
@@ -230,12 +233,14 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	_createListModal() {
-		this.listModalBackdropElement = document.createElement('div');
-		this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
-		document.body.appendChild(this.listModalBackdropElement);
-		this.listModalBackdropElement.addEventListener('click', () =>
-			this.closeSidebar()
-		);
+		if (this.options.showBackdrop !== false) {
+			this.listModalBackdropElement = document.createElement('div');
+			this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
+			document.body.appendChild(this.listModalBackdropElement);
+			this.listModalBackdropElement.addEventListener('click', () =>
+				this.closeSidebar()
+			);
+		}
 
 		this.listModalElement = document.createElement('div');
 		this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;

package/src/widgets/SurveyWidget.js

@@ -406,6 +406,8 @@ export class SurveyWidget extends BaseWidget {
 				return this._renderMultipleChoicePage(page);
 			case 'text':
 				return this._renderTextPage(page);
+			case 'link':
+				return this._renderLinkPage(page);
 			default:
 				return this._renderTextPage(page);
 		}
@@ -464,6 +466,21 @@ export class SurveyWidget extends BaseWidget {
 			`;
 		}
 
+		if (ratingType === 'ces') {
+			const cesLabels = ['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy'];
+			return `
+				<div class="feedback-survey-ces" data-page-id="${pageId}">
+					${cesLabels
+						.map((label, i) => {
+							const score = i + 1;
+							const selected = currentRating === score ? ' selected' : '';
+							return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
+						})
+						.join('')}
+				</div>
+			`;
+		}
+
 		if (ratingType === 'emoji' && scale === 5) {
 			const emojis = [
 				'\uD83D\uDE1E',
@@ -506,7 +523,9 @@ export class SurveyWidget extends BaseWidget {
 			page.multipleChoiceConfig || page.multiple_choice_config || {};
 		const options = Array.isArray(config.options) ? config.options : [];
 		const allowMultiple =
-			config.allow_multiple === true || config.multiple === true;
+			config.allow_multiple === true ||
+			config.multiple === true ||
+			config.allow_multiple_selection === true;
 		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 		const selectedValues = Array.isArray(pageAnswer.values)
 			? pageAnswer.values
@@ -533,10 +552,36 @@ export class SurveyWidget extends BaseWidget {
 		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
 		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 		const value = pageAnswer.text || '';
+		const placeholder = page.placeholder || 'Type your answer...';
 
 		return `
 			<div class="feedback-survey-text-page" data-page-id="${pageId}">
-				<textarea class="feedback-survey-page-textarea" data-page-id="${pageId}" placeholder="Type your answer...">${value}</textarea>
+				<textarea class="feedback-survey-page-textarea" data-page-id="${pageId}" placeholder="${placeholder}">${value}</textarea>
+			</div>
+		`;
+	}
+
+	_renderLinkPage(page) {
+		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
+		const config = page.link_config || page.linkConfig || {};
+		const buttonText = config.button_text || config.buttonText || 'Click here';
+		const linkText = config.link_text || config.linkText || '';
+		const redirectUrl = config.redirect_url || config.redirectUrl || '#';
+		const openIn = config.open_in || config.openIn || 'new_tab';
+		const target = openIn === 'new_tab' ? '_blank' : '_self';
+		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
+		const clicked = pageAnswer.clicked === true;
+
+		return `
+			<div class="feedback-survey-link-page" data-page-id="${pageId}">
+				${linkText ? `<p class="feedback-survey-link-text">${linkText}</p>` : ''}
+				<a class="feedback-survey-link-btn${clicked ? ' selected' : ''}"
+				   href="${redirectUrl}"
+				   target="${target}"
+				   rel="noopener noreferrer"
+				   data-page-id="${pageId}">
+					${buttonText}
+				</a>
 			</div>
 		`;
 	}
@@ -785,6 +830,24 @@ export class SurveyWidget extends BaseWidget {
 				});
 			}
 		}
+
+		if (page.type === 'link') {
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-link-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () => {
+						const pId = btn.dataset.pageId;
+						this._setPageAnswer(pId, { clicked: true });
+						btn.classList.add('selected');
+
+						const navigation = page.afterThisPage || page.after_this_page;
+						const goesTo = navigation ? navigation.default : null;
+						if (!goesTo || goesTo === 'end_survey') {
+							setTimeout(() => this._handleSubmit(), 400);
+						}
+					});
+				});
+		}
 	}
 
 	_selectNPS(score) {
@@ -976,6 +1039,13 @@ export class SurveyWidget extends BaseWidget {
 			}
 		}
 
+		if (page.type === 'link') {
+			if (page.required && !answer.clicked) {
+				this._showError('Please click the link to continue');
+				return false;
+			}
+		}
+
 		return true;
 	}
 

package/types/index.d.ts

@@ -233,6 +233,7 @@ declare module '@product7/feedback-sdk' {
 		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 		theme?: 'light' | 'dark';
+		showBackdrop?: boolean;
 		triggerText?: string;
 		showBadge?: boolean;
 		title?: string;