export function selfServiceFeedbackSurvey(form: FormTs) {
// Self-Service Experience Survey
// Measures effectiveness of self-service channels (portals, chatbots, knowledge bases)
// Demonstrates: RatingScale (CES), ThumbRating, StarRating, EmojiRating, RadioButton, CheckboxList, Slider, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'How Was Your Self-Service Experience?',
computedValue: () => 'Help us improve our self-help resources by sharing your experience.',
customStyles: {
backgroundColor: '#2563eb',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Task Completion Status
// ============================================
const taskSection = form.addSubform('taskSection', {
title: 'Task Completion'
});
taskSection.addRow(row => {
row.addThumbRating('taskCompleted', {
label: 'Were you able to find what you needed?',
showLabels: true,
upLabel: 'Yes, I found it',
downLabel: 'No, I couldn\'t',
size: 'lg',
alignment: 'center'
});
});
taskSection.addRow(row => {
row.addTextPanel('completionFeedback', {
computedValue: () => {
const completed = taskSection.thumbRating('taskCompleted')?.value();
if (completed === 'up') return '🎉 Great! We\'re glad our self-service resources helped.';
if (completed === 'down') return '😕 We\'re sorry you couldn\'t find what you needed. Please tell us more.';
return '';
},
customStyles: () => {
const completed = taskSection.thumbRating('taskCompleted')?.value();
const base = { textAlign: 'center', padding: '12px', borderRadius: '6px', marginTop: '8px' };
if (completed === 'up') return { ...base, backgroundColor: '#d1fae5', color: '#065f46' };
if (completed === 'down') return { ...base, backgroundColor: '#fee2e2', color: '#991b1b' };
return { display: 'none' };
},
isVisible: () => taskSection.thumbRating('taskCompleted')?.value() !== null
});
});
// ============================================
// SECTION 2: Self-Service Channel Used
// ============================================
const channelSection = form.addSubform('channelSection', {
title: 'Channel Used',
isVisible: () => taskSection.thumbRating('taskCompleted')?.value() !== null
});
channelSection.addRow(row => {
row.addRadioButton('channelUsed', {
label: 'Which self-service resource did you use?',
options: [
{ id: 'knowledge-base', name: 'Knowledge Base / Help Articles' },
{ id: 'faq', name: 'FAQ Section' },
{ id: 'chatbot', name: 'Chatbot / Virtual Assistant' },
{ id: 'portal', name: 'Customer Portal' },
{ id: 'video', name: 'Video Tutorials' },
{ id: 'community', name: 'Community Forum' },
{ id: 'other', name: 'Other' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 3: Effort Score (CES)
// ============================================
const effortSection = form.addSubform('effortSection', {
title: 'Effort Assessment',
isVisible: () => channelSection.radioButton('channelUsed')?.value() !== null,
customStyles: () => {
const score = effortSection.ratingScale('effortScore')?.value();
if (score !== null && score !== undefined) {
if (score >= 6) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (score >= 4) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
effortSection.addRow(row => {
row.addRatingScale('effortScore', {
preset: 'ces',
label: 'How easy was it to use our self-service resources?',
lowLabel: 'Very Difficult',
highLabel: 'Very Easy',
size: 'lg',
isRequired: true
});
});
effortSection.addRow(row => {
row.addTextPanel('effortLabel', {
computedValue: () => {
const score = effortSection.ratingScale('effortScore')?.value();
if (score === null || score === undefined) return '';
if (score >= 6) return '✨ Low Effort - Excellent!';
if (score >= 4) return '📊 Moderate Effort';
return '⚠️ High Effort - We need to improve';
},
customStyles: () => ({
textAlign: 'center',
fontWeight: 'bold',
padding: '8px',
marginTop: '8px'
}),
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null
});
});
// ============================================
// SECTION 4: What Worked (for successful tasks)
// ============================================
const successSection = form.addSubform('successSection', {
title: 'What Worked Well?',
isVisible: () => taskSection.thumbRating('taskCompleted')?.value() === 'up',
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
successSection.addRow(row => {
row.addCheckboxList('positiveAspects', {
label: 'Select what made your experience good:',
options: [
{ id: 'easy-find', name: 'Easy to find information' },
{ id: 'clear-content', name: 'Clear and helpful content' },
{ id: 'good-search', name: 'Search worked well' },
{ id: 'quick', name: 'Quick resolution' },
{ id: 'relevant', name: 'Relevant suggestions' },
{ id: 'up-to-date', name: 'Up-to-date information' }
],
orientation: 'vertical'
});
});
successSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'Rate the quality of the content you found',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 5: What Didn't Work (for failed tasks)
// ============================================
const failureSection = form.addSubform('failureSection', {
title: 'What Went Wrong?',
isVisible: () => taskSection.thumbRating('taskCompleted')?.value() === 'down',
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
failureSection.addRow(row => {
row.addCheckboxList('issueTypes', {
label: 'What problems did you encounter?',
options: [
{ id: 'not-found', name: 'Couldn\'t find the right article/answer' },
{ id: 'outdated', name: 'Information was outdated' },
{ id: 'unclear', name: 'Content was confusing' },
{ id: 'incomplete', name: 'Information was incomplete' },
{ id: 'search-failed', name: 'Search didn\'t return useful results' },
{ id: 'navigation', name: 'Hard to navigate' },
{ id: 'technical', name: 'Technical issues / errors' },
{ id: 'chatbot-failed', name: 'Chatbot couldn\'t understand me' }
],
orientation: 'vertical'
});
});
failureSection.addSpacer();
failureSection.addRow(row => {
row.addTextarea('whatWasMissing', {
label: 'What were you looking for that you couldn\'t find?',
placeholder: 'Describe the topic or question you needed help with...',
rows: 3,
isRequired: true
});
});
// ============================================
// SECTION 6: Escalation Question
// ============================================
const escalationSection = form.addSubform('escalationSection', {
title: 'Next Steps',
isVisible: () => taskSection.thumbRating('taskCompleted')?.value() === 'down'
});
escalationSection.addRow(row => {
row.addRadioButton('nextAction', {
label: 'What would you like to do next?',
options: [
{ id: 'try-again', name: 'I\'ll try searching again' },
{ id: 'contact-support', name: 'I need to contact support' },
{ id: 'resolved', name: 'Actually, I figured it out' },
{ id: 'give-up', name: 'I\'ll skip this for now' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 7: Content Quality Rating
// ============================================
const qualitySection = form.addSubform('qualitySection', {
title: 'Content Quality',
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null
});
qualitySection.addRow(row => {
row.addSlider('relevanceScore', {
label: 'How relevant was the content to your needs?',
min: 1,
max: 10,
step: 1,
showValue: true,
unit: '/10'
}, '1fr');
row.addSlider('clarityScore', {
label: 'How clear and understandable was the content?',
min: 1,
max: 10,
step: 1,
showValue: true,
unit: '/10'
}, '1fr');
});
// ============================================
// SECTION 8: Overall Experience
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Experience',
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null
});
overallSection.addRow(row => {
row.addEmojiRating('overallSatisfaction', {
label: 'How satisfied are you with our self-service resources?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addSpacer();
overallSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'How can we improve our self-service experience?',
placeholder: 'Your suggestions help us serve you better...',
rows: 3
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const completed = taskSection.thumbRating('taskCompleted')?.value();
const channel = channelSection.radioButton('channelUsed')?.value();
const effortScore = effortSection.ratingScale('effortScore')?.value();
const contentQuality = successSection.starRating('contentQuality')?.value();
const satisfaction = overallSection.emojiRating('overallSatisfaction')?.value();
if (!effortScore) return '';
let emoji = completed === 'up' ? '✅' : '❌';
let effortLabel = effortScore >= 6 ? 'Low Effort' : effortScore >= 4 ? 'Moderate' : 'High Effort';
const channelLabels: Record<string, string> = {
'knowledge-base': 'Knowledge Base',
'faq': 'FAQ',
'chatbot': 'Chatbot',
'portal': 'Customer Portal',
'video': 'Video Tutorials',
'community': 'Community Forum',
'other': 'Other'
};
let summary = `${emoji} Self-Service Feedback\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `📋 Task: ${completed === 'up' ? 'Completed' : 'Not Completed'}\n`;
if (channel) {
summary += `📱 Channel: ${channelLabels[channel] || channel}\n`;
}
summary += `\n📊 Effort Score: ${effortScore}/7 (${effortLabel})\n`;
if (contentQuality) {
summary += `⭐ Content Quality: ${contentQuality}/5 stars\n`;
}
if (satisfaction) {
const satLabels: Record<string, string> = {
'very-bad': 'Very Unsatisfied',
'bad': 'Unsatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
summary += `\n😊 Satisfaction: ${satLabels[satisfaction] || satisfaction}`;
}
return summary;
},
customStyles: () => {
const completed = taskSection.thumbRating('taskCompleted')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (completed === 'up') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => effortSection.ratingScale('effortScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your input helps us improve our self-service resources and make it easier for everyone to find the help they need.'
});
}