Overall Score: {{ overallScore }}%
{{ overallInterpretation }}
{{ for category in categories }}
{{ category.name }}: {{ category.score }}%
{{ category.interpretation }}
Recommendations:
{{ for rec in category.recommendations }}
- {{ rec }}
{{ endfor }}
{{ endfor }}
Your Next Steps
{{ for step in nextSteps }}
- {{ step }}
{{ endfor }}
Ready to improve your score?
Book a call: {{ ctaUrl }}
```
### Third-Party PDF Services
If building is too complex:
- **PDF.co** - API-based PDF generation
- **DocRaptor** - HTML-to-PDF API
- **Anvil** - PDF filling and generation
---
## Integration Architecture
### Data Flow
```
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Landing │────▶│ Quiz │────▶│ Results │
│ Page │ │ Form │ │ Page │
└─────────────┘ └─────────────┘ └─────────────┘
│ │
▼ ▼
┌─────────────┐ ┌─────────────┐
│ Lead │ │ PDF │
│ Capture │ │ Generation │
└─────────────┘ └─────────────┘
│ │
┌────────────┴────────────┬───────┘
▼ ▼
┌─────────────┐ ┌─────────────┐
│ CRM │ │ Email │
│ (HubSpot, │ │ Service │
│ Salesforce) │ │ (Mailchimp)│
└─────────────┘ └─────────────┘
```
### Webhook Integration
```javascript
// On quiz completion
async function handleQuizComplete(data) {
const { answers, scores, contact } = data;
// 1. Generate PDF
const pdf = await generatePDF({ scores, contact });
const pdfUrl = await uploadPDF(pdf, contact.email);
// 2. Send to CRM
await crmClient.createContact({
email: contact.email,
name: contact.name,
properties: {
scorecard_overall: scores.overall,
scorecard_tier: scores.tier,
scorecard_pdf: pdfUrl,
...formatCategoryScores(scores.categories)
}
});
// 3. Send email with results
await emailClient.send({
to: contact.email,
template: 'scorecard-results',
data: {
name: contact.name,
scores,
pdfUrl
}
});
// 4. Track analytics
await analytics.track('scorecard_completed', {
tier: scores.tier,
overall_score: scores.overall
});
}
```
### Zapier/Make Integration
For no-code connections:
**Trigger:** Webhook when quiz completes
**Actions:**
1. Add row to Google Sheet (backup)
2. Create/update HubSpot contact
3. Send email via Mailchimp
4. Post to Slack (for high scores)
---
## Performance Optimization
### Fast Loading
```javascript
// Lazy load questions
const [visibleQuestions, setVisibleQuestions] = useState(
questions.slice(0, 3)
);
// Preload next questions
useEffect(() => {
const nextIndex = visibleQuestions.length;
if (nextIndex < questions.length) {
// Preload next 2 questions
const nextQuestions = questions.slice(nextIndex, nextIndex + 2);
preloadImages(nextQuestions);
}
}, [visibleQuestions]);
```
### Progress Persistence
```javascript
// Save progress to localStorage
function saveProgress(answers) {
localStorage.setItem('quiz_progress', JSON.stringify({
answers,
timestamp: Date.now()
}));
}
// Restore on page load
function loadProgress() {
const saved = localStorage.getItem('quiz_progress');
if (saved) {
const { answers, timestamp } = JSON.parse(saved);
// Only restore if less than 24 hours old
if (Date.now() - timestamp < 24 * 60 * 60 * 1000) {
return answers;
}
}
return null;
}
```
### Abandonment Recovery
```javascript
// Capture email early
const emailCaptureAt = 3; // After question 3
// On abandonment
window.addEventListener('beforeunload', () => {
if (currentQuestion > emailCaptureAt && email) {
// Trigger abandonment workflow
navigator.sendBeacon('/api/quiz-abandoned', JSON.stringify({
email,
progress: answers,
lastQuestion: currentQuestion
}));
}
});
```
---
## Security Considerations
### Data Protection
```javascript
// Don't store sensitive answers client-side
const sensitiveFields = ['revenue', 'employee_count'];
function sanitizeForStorage(answers) {
return Object.fromEntries(
Object.entries(answers).filter(
([key]) => !sensitiveFields.includes(key)
)
);
}
```
### Rate Limiting
```javascript
// Prevent spam submissions
const rateLimiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 5, // 5 submissions per window
message: 'Too many submissions, please try again later'
});
app.post('/api/submit-quiz', rateLimiter, handleSubmit);
```
### Validation
```javascript
// Server-side validation
function validateSubmission(data) {
const errors = [];
// Required fields
if (!data.email || !isValidEmail(data.email)) {
errors.push('Valid email required');
}
// Answer validation
questions.forEach(q => {
const answer = data.answers[q.id];
if (!q.options.some(o => o.value === answer)) {
errors.push(`Invalid answer for ${q.id}`);
}
});
return errors;
}
```
