@product7/feedback-sdk 1.5.8 → 1.6.0

package/README.md

@@ -542,7 +542,7 @@ The SDK includes a powerful survey widget for collecting structured user feedbac
 
 | Type       | Description           | Scale                    |
 | ---------- | --------------------- | ------------------------ |
-| **NPS**    | Net Promoter Score    | 0-10 numeric scale       |
+| **NPS**    | Net Promoter Score    | 1-5 numeric scale (default; configurable to 0-10) |
 | **CSAT**   | Customer Satisfaction | 5-point emoji scale      |
 | **CES**    | Customer Effort Score | 5-level difficulty scale |
 | **Custom** | Multi-question forms  | Flexible input types     |
@@ -560,7 +560,14 @@ await feedback.init();
 // Show NPS survey
 feedback.showSurvey({
 	surveyType: 'nps',
-	title: 'How likely are you to recommend us?',
+	description:
+		'To what extent do you agree or disagree that our tools support the work you do?',
+	ratingScale: 5,
+	showTitle: false,
+	showDescription: true,
+	showFeedbackInput: false,
+	showSubmitButton: false,
+	autoSubmitOnSelect: true,
 	onSubmit: (response) => {
 		console.log('Survey submitted:', response);
 	},
@@ -577,6 +584,12 @@ feedback.showSurvey({
 	theme: 'light', // 'light' | 'dark'
 	title: 'Your survey title',
 	description: 'Optional description',
+	ratingScale: 5, // NPS scale (default 5, set 11 for 0-10)
+	showTitle: false, // default false for single-step rating surveys
+	showDescription: true, // default true for single-step rating surveys
+	showFeedbackInput: false, // default false for single-step rating surveys
+	showSubmitButton: false, // default false for single-step rating surveys
+	autoSubmitOnSelect: true, // default true for single-step rating surveys
 	lowLabel: 'Not likely', // Low end label (NPS/CES)
 	highLabel: 'Very likely', // High end label (NPS/CES)
 	customQuestions: [], // For custom surveys
@@ -639,12 +652,19 @@ const surveys = await feedback.getActiveSurveys({
 ```javascript
 feedback.showSurvey({
 	surveyType: 'nps',
-	title: 'How likely are you to recommend us to a friend?',
-	lowLabel: 'Not at all likely',
-	highLabel: 'Extremely likely',
+	description:
+		'To what extent do you agree or disagree that our tools support the work you do?',
+	ratingScale: 5,
+	showTitle: false,
+	showDescription: true,
+	showFeedbackInput: false,
+	showSubmitButton: false,
+	autoSubmitOnSelect: true,
+	lowLabel: 'Strongly Disagree',
+	highLabel: 'Strongly Agree',
 	position: 'bottom-right',
 	onSubmit: (response) => {
-		console.log('Score:', response.score); // 0-10
+		console.log('Score:', response.score); // 1-5 by default
 		console.log('Feedback:', response.feedback);
 	},
 });

package/dist/README.md

@@ -542,7 +542,7 @@ The SDK includes a powerful survey widget for collecting structured user feedbac
 
 | Type       | Description           | Scale                    |
 | ---------- | --------------------- | ------------------------ |
-| **NPS**    | Net Promoter Score    | 0-10 numeric scale       |
+| **NPS**    | Net Promoter Score    | 1-5 numeric scale (default; configurable to 0-10) |
 | **CSAT**   | Customer Satisfaction | 5-point emoji scale      |
 | **CES**    | Customer Effort Score | 5-level difficulty scale |
 | **Custom** | Multi-question forms  | Flexible input types     |
@@ -560,7 +560,14 @@ await feedback.init();
 // Show NPS survey
 feedback.showSurvey({
 	surveyType: 'nps',
-	title: 'How likely are you to recommend us?',
+	description:
+		'To what extent do you agree or disagree that our tools support the work you do?',
+	ratingScale: 5,
+	showTitle: false,
+	showDescription: true,
+	showFeedbackInput: false,
+	showSubmitButton: false,
+	autoSubmitOnSelect: true,
 	onSubmit: (response) => {
 		console.log('Survey submitted:', response);
 	},
@@ -577,6 +584,12 @@ feedback.showSurvey({
 	theme: 'light', // 'light' | 'dark'
 	title: 'Your survey title',
 	description: 'Optional description',
+	ratingScale: 5, // NPS scale (default 5, set 11 for 0-10)
+	showTitle: false, // default false for single-step rating surveys
+	showDescription: true, // default true for single-step rating surveys
+	showFeedbackInput: false, // default false for single-step rating surveys
+	showSubmitButton: false, // default false for single-step rating surveys
+	autoSubmitOnSelect: true, // default true for single-step rating surveys
 	lowLabel: 'Not likely', // Low end label (NPS/CES)
 	highLabel: 'Very likely', // High end label (NPS/CES)
 	customQuestions: [], // For custom surveys
@@ -639,12 +652,19 @@ const surveys = await feedback.getActiveSurveys({
 ```javascript
 feedback.showSurvey({
 	surveyType: 'nps',
-	title: 'How likely are you to recommend us to a friend?',
-	lowLabel: 'Not at all likely',
-	highLabel: 'Extremely likely',
+	description:
+		'To what extent do you agree or disagree that our tools support the work you do?',
+	ratingScale: 5,
+	showTitle: false,
+	showDescription: true,
+	showFeedbackInput: false,
+	showSubmitButton: false,
+	autoSubmitOnSelect: true,
+	lowLabel: 'Strongly Disagree',
+	highLabel: 'Strongly Agree',
 	position: 'bottom-right',
 	onSubmit: (response) => {
-		console.log('Score:', response.score); // 0-10
+		console.log('Score:', response.score); // 1-5 by default
 		console.log('Feedback:', response.feedback);
 	},
 });

package/dist/feedback-sdk.js

@@ -6877,13 +6877,11 @@
 			}
 
 			const npsScale = this._getNPSScale();
-			const npsUsesSegmentedScale = npsScale.values.length <= 7;
-			const npsContainerClass = npsUsesSegmentedScale
-				? 'feedback-survey-ces feedback-survey-rating-scale'
-				: 'feedback-survey-nps';
-			const npsButtonClass = npsUsesSegmentedScale
-				? 'feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
-				: 'feedback-survey-nps-btn';
+			const npsCompactClass =
+				npsScale.values.length > 7 ? ' feedback-survey-rating-scale-compact' : '';
+			const npsContainerClass = `feedback-survey-rating-scale${npsCompactClass}`;
+			const npsButtonClass =
+				'feedback-survey-nps-btn feedback-survey-rating-scale-btn';
 			const npsLowLabel =
 				this.surveyOptions.lowLabel ||
 				(npsScale.start === 0 ? 'Not likely' : 'Strongly Disagree');
@@ -7143,13 +7141,11 @@
 					{ length: npsScale },
 					(_, index) => start + index
 				);
-				const usesSegmentedScale = values.length <= 7;
-				const containerClass = usesSegmentedScale
-					? 'feedback-survey-ces feedback-survey-rating-scale'
-					: 'feedback-survey-nps';
-				const buttonClass = usesSegmentedScale
-					? 'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
-					: 'feedback-survey-page-rating-btn feedback-survey-nps-btn';
+				const compactClass =
+					values.length > 7 ? ' feedback-survey-rating-scale-compact' : '';
+				const containerClass = `feedback-survey-rating-scale${compactClass}`;
+				const buttonClass =
+					'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-rating-scale-btn';
 				return `
 				<div class="${containerClass}" data-page-id="${pageId}">
 					${values
@@ -7186,12 +7182,12 @@
 			}
 
 			return `
-			<div class="feedback-survey-ces feedback-survey-rating-scale" data-page-id="${pageId}">
+			<div class="feedback-survey-rating-scale" data-page-id="${pageId}">
 				${[...Array(scale).keys()]
 					.map((i) => {
 						const score = i + 1;
 						const selected = currentRating === score ? ' selected' : '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
 					})
 					.join('')}
 			</div>
@@ -11988,6 +11984,11 @@
   box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
+.feedback-survey-rating-scale-compact .feedback-survey-rating-scale-btn {
+  min-height: 50px;
+  font-size: clamp(12px, 2vw, 16px);
+}
+
 .feedback-survey-labels {
   display: flex;
   justify-content: space-between;
@@ -12262,6 +12263,11 @@
     font-size: clamp(14px, 6vw, 18px);
   }
 
+  .feedback-survey-rating-scale-compact .feedback-survey-rating-scale-btn {
+    min-height: 44px;
+    font-size: clamp(11px, 3.7vw, 14px);
+  }
+
   .feedback-survey-rating-scale + .feedback-survey-labels {
     font-size: var(--font-size-xs);
   }