@product7/feedback-sdk 1.5.8 → 1.6.0

package/package.json

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

package/src/docs/framework-integrations.md

@@ -639,10 +639,16 @@ const survey = sdk.createWidget('survey', {
 	surveyType: 'nps',
 	position: 'center',
 	theme: 'light',
-	title: 'How likely are you to recommend us?',
-	description: 'Your feedback helps us improve.',
-	lowLabel: 'Not likely',
-	highLabel: 'Very 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',
 	onSubmit: (response) => {
 		console.log('Survey submitted:', response);
 		// Optional: send to analytics

package/src/styles/survey.js

@@ -266,6 +266,11 @@ export const surveyStyles = `
   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;
@@ -540,6 +545,11 @@ export const surveyStyles = `
     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);
   }

package/src/widgets/SurveyWidget.js

@@ -151,13 +151,11 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		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');
@@ -417,13 +415,11 @@ export class SurveyWidget extends BaseWidget {
 				{ 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
@@ -460,12 +456,12 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		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>

package/types/index.d.ts

@@ -114,6 +114,12 @@ declare module '@product7/feedback-sdk' {
 		description?: string | null;
 		lowLabel?: string | null;
 		highLabel?: string | null;
+		ratingScale?: number | null;
+		showFeedbackInput?: boolean | null;
+		showSubmitButton?: boolean | null;
+		autoSubmitOnSelect?: boolean | null;
+		showTitle?: boolean | null;
+		showDescription?: boolean | null;
 		customQuestions?: SurveyQuestion[];
 		pages?: SurveyPage[];
 		respondentId?: string | null;
@@ -132,6 +138,9 @@ declare module '@product7/feedback-sdk' {
 			score: number | null;
 			feedback: string;
 			customAnswers: Record<string, any>;
+			pageAnswers?: Record<string, any>;
+			currentPageIndex?: number;
+			isSubmitting?: boolean;
 			isVisible: boolean;
 		};
 	}