Loading...
Loading...
Build scalable customer support systems including help centers, chatbots, ticketing systems, and self-service knowledge bases. Use when designing support infrastructure, reducing support load, improving customer satisfaction, or scaling support without linear hiring.
npx skill4agent add daffy0208/ai-dev-standards customer-support-builderHelp Center
├── Getting Started
│ ├── Quick Start Guide (< 5 min)
│ ├── Account Setup
│ └── First Steps Tutorial
├── Core Features
│ ├── Feature A Guide
│ ├── Feature B Guide
│ └── Feature C Guide
├── Troubleshooting
│ ├── Common Errors
│ ├── Performance Issues
│ └── Integration Problems
├── Account & Billing
│ ├── Pricing Plans
│ ├── Billing Issues
│ └── Account Management
└── API & Integrations
├── API Documentation
├── Webhooks
└── Integration Guides# [Clear, Searchable Title]
**Time to complete**: 3 minutes
**Difficulty**: Beginner/Intermediate/Advanced
## Problem
One-sentence description of what this solves.
## Solution
Step-by-step instructions with screenshots.
1. **Step 1**: Clear action
- Screenshot/GIF
- Expected result
2. **Step 2**: Next action
- Screenshot/GIF
- Expected result
## Troubleshooting
- Problem: X → Solution: Y
- Problem: A → Solution: B
## Related Articles
- [Article 1](#)
- [Article 2](#)Primary: support@company.com
Routing:
- billing@company.com → Billing team
- api@company.com → Engineering
- hello@company.com → General inquiries
SLA:
- Critical: 2 hours
- High: 8 hours
- Normal: 24 hours
- Low: 48 hours# Welcome Email
Subject: Welcome to [Product]! Here's how to get started
Hi [Name],
Welcome! Here's what to do first:
1. Complete setup: [Link]
2. Try this tutorial: [Link]
3. Join our community: [Link]
Need help? Reply to this email or check our help center: [Link]
[Your Name]# Issue Resolved
Subject: [Ticket #123] Resolved - [Issue Title]
Hi [Name],
Good news! Your issue is resolved.
**What we did**:
[Clear explanation]
**What you should see**:
[Expected result]
**If the problem returns**:
[Troubleshooting steps]
Was this helpful? [Yes] [No]
[Your Name]// Intercom, Drift, Crisp example
<script>
window.intercomSettings = {
app_id: "YOUR_APP_ID",
// Custom attributes
email: user.email,
user_id: user.id,
created_at: user.createdAt,
plan: user.plan,
// Show relevant help articles
help_center: {
search_enabled: true
}
};
</script>User message →
├── Can answer with KB article? → Send article
├── Simple factual question? → AI answers
├── Complex issue? → Route to human
└── Angry/escalated? → Priority human routingdef handle_support_message(message, user_context):
# 1. Search knowledge base
kb_results = search_kb(message, top_k=3)
if kb_results[0].score > 0.85:
return {
'type': 'article',
'article': kb_results[0],
'confidence': 'high'
}
# 2. Try AI response with context
ai_response = generate_response(
message=message,
kb_context=kb_results,
user_history=user_context
)
if ai_response.confidence > 0.8:
return {
'type': 'ai_response',
'response': ai_response.text,
'sources': kb_results
}
# 3. Route to human
return {
'type': 'human_handoff',
'priority': calculate_priority(message, user_context),
'suggested_agent': route_to_specialist(message)
}interface Ticket {
id: string
status: 'new' | 'open' | 'pending' | 'resolved' | 'closed'
priority: 'low' | 'normal' | 'high' | 'critical'
category: string // 'billing', 'technical', 'feature', etc.
subject: string
description: string
requester: User
assignee?: Agent
tags: string[]
created_at: Date
updated_at: Date
resolved_at?: Date
first_response_at?: Date
satisfaction_rating?: 1 | 2 | 3 | 4 | 5
}Routing Rules:
- Condition: subject contains "billing" OR "payment"
Action: Assign to billing-team
Priority: high
- Condition: user.plan == "enterprise"
Action: Assign to enterprise-team
Priority: high
SLA: 2 hours
- Condition: subject contains "API" OR "webhook"
Action: Assign to engineering
Tag: 'api-issue'
- Condition: sentiment == "angry"
Action: Priority routing
Priority: critical
Notify: support-managerNew → Open → Pending → Resolved → Closed
↓ ↑
← Reopen ←// Example: Connection troubleshooter
const troubleshooter = {
start: {
question: 'What problem are you experiencing?',
options: [
{ text: "Can't connect", next: 'check_connection' },
{ text: 'Slow performance', next: 'check_performance' },
{ text: 'Error message', next: 'check_error' }
]
},
check_connection: {
question: 'Can you access our website?',
options: [
{ text: 'Yes', next: 'browser_check' },
{ text: 'No', action: 'show_status_page' }
]
},
browser_check: {
question: 'Clear your browser cache and try again.',
options: [
{ text: 'It worked!', action: 'problem_solved' },
{ text: 'Still not working', action: 'contact_support' }
]
}
}// Contextual help tooltips
const helpTooltips = {
'/dashboard': {
first_visit: {
title: 'Welcome to your dashboard!',
steps: [
'1. View your key metrics here',
"2. Click 'Add Widget' to customize",
'3. Need help? Click the ? icon'
]
}
},
'/settings/billing': {
always_show: {
payment_methods: 'We accept Visa, Mastercard, and AmEx',
billing_cycle: 'Changes take effect next billing cycle'
}
}
}interface SupportMetrics {
// Response metrics
first_response_time: {
p50: number // median
p90: number // 90th percentile
p99: number
}
// Resolution metrics
avg_resolution_time: number
tickets_resolved_first_contact: number
// Volume metrics
tickets_created_today: number
tickets_open: number
tickets_overdue: number
// Quality metrics
customer_satisfaction_score: number // 1-5
net_promoter_score: number // -100 to 100
// Efficiency metrics
self_service_rate: number // % resolved without ticket
deflection_rate: number // % answered by KB/bot
cost_per_ticket: number
}Excellent Support:
first_response_time_p90: '< 2 hours'
resolution_time_avg: '< 24 hours'
self_service_rate: '> 70%'
csat: '> 4.5/5'
nps: '> 50'
Good Support:
first_response_time_p90: '< 4 hours'
resolution_time_avg: '< 48 hours'
self_service_rate: '> 50%'
csat: '> 4.0/5'
nps: '> 30'Support Organization (at scale):
Support Manager (1)
├── Knowledge Base Lead (1)
│ └── Technical Writers (2-3)
├── Chat Support (Tier 1) (5-10)
│ ├── Handle 80% of issues
│ └── Escalate complex cases
├── Email Support (Tier 2) (3-5)
│ ├── Handle escalations
│ └── Complex troubleshooting
└── Specialist Support (Tier 3) (2-3)
├── API/Technical issues
└── Enterprise customers// Unified support API
class SupportSystem {
async createTicket(data) {
const ticket = await zendesk.createTicket(data)
await analytics.track('support_ticket_created', {
ticket_id: ticket.id,
category: data.category,
user_id: data.user_id
})
return ticket
}
async trackKBArticleView(article_id, user_id) {
await analytics.track('kb_article_viewed', {
article_id,
user_id
})
// If user doesn't create ticket after viewing,
// article was helpful (deflection)
}
}// Monitor for patterns
async function detectPotentialIssues() {
// Error spike detection
const errorRate = await getErrorRate('last_hour')
if (errorRate > 2 * avgErrorRate) {
await notifySupport('Error spike detected')
await displayStatusMessage("We're investigating an issue...")
}
// User struggle detection
const strugglingUsers = await detectStrugglingUsers({
criteria: ['repeated_failed_actions', 'long_time_on_page', 'back_and_forth_clicks']
})
if (strugglingUsers.length > 0) {
await offerProactiveHelp(strugglingUsers)
}
}interface CustomerHealth {
user_id: string
health_score: number // 0-100
signals: {
usage_frequency: 'increasing' | 'stable' | 'declining'
feature_adoption: number
support_tickets_recent: number
last_login: Date
payment_status: 'current' | 'overdue'
}
}
// Reach out proactively when health score drops
if (customer.health_score < 40) {
await sendProactiveOutreach({
type: 'check_in',
message: "Haven't seen you in a while. Need help with anything?"
})
}