# Form Completion Assistant with Co-Browsing
Guide customers through complex forms in real-time using visual assistance and privacy-protected co-browsing.
## Use Case Overview
**Problem**: High form abandonment rates due to complexity, confusion, or lack of confidence in data entry.
**Solution**: Implement Zoom Cobrowse SDK to provide real-time visual guidance while protecting sensitive customer data through privacy masking.
**Related Skills**:
- [Zoom Cobrowse SDK](../../cobrowse-sdk/SKILL.md)
- [Customer Support Co-Browsing](customer-support-cobrowsing.md)
## Target Scenarios
### Financial Services
- Loan applications
- Account opening forms
- Investment questionnaires
- Insurance claims
### Healthcare
- Patient intake forms
- Insurance enrollment
- Medical history questionnaires
- Telehealth registration
### E-Commerce
- Complex checkout flows
- B2B order forms
- Subscription sign-ups
- Custom product configurators
## Implementation
### Quick Start Pattern
```html
Loan Application - Form Assistant
```
## Key Features
### Progressive Privacy Masking
Mask fields based on sensitivity level:
```javascript
// Tier 1: Fully masked (never visible to agent)
// - SSN, passwords, credit cards
const tier1Fields = ".pii-mask, [data-privacy='full']";
// Tier 2: Masked by default, can be unmasked with consent
// - Bank account numbers, tax IDs
const tier2Fields = "[data-privacy='optional']";
const settings = {
piiMask: {
maskType: "custom_input",
maskCssSelectors: tier1Fields,
}
};
```
### Smart Annotation Guidance
Agent can highlight and guide:
```html
```
### Real-Time Validation Assistance
Agent sees validation errors in real-time:
```javascript
// Show validation status to agent
form.addEventListener("blur", (e) => {
if (e.target.validity.valid) {
e.target.classList.add("valid");
} else {
e.target.classList.add("invalid");
// Agent can see this and provide guidance
}
}, true);
```
## Workflow Example
### Multi-Step Form Assistance
```
CUSTOMER AGENT
│ │
│ 1. Opens loan application │
│ (Step 1 of 4) │
│ │
│ 2. Confused at Step 2 │
│ Clicks "Need Help?" │
├────────► Request Help │
│ (PIN: 123456) │
│ │
│ 3. Calls support │
│ "I need help with │
│ loan application" │
│ │
│ │ 4. Agent opens case
│ │ Enters PIN: 123456
│ │
│ ◄─────── Agent Joined ─────────┤
│ │
│ 5. Agent sees form (Step 2) │
│ Masked fields: SSN, DOB │
│ Visible: Everything else │
│ │
│ │ 6. Agent uses pen tool
│ ◄────── Highlight field ───────┤ Highlights "SSN"
│ │ Says: "Enter your SSN"
│ │
│ 7. Enters SSN │
│ (Agent sees: ***-**-****) │
│ │
│ │ 8. Agent highlights next
│ ◄────── Highlight DOB ─────────┤ "Now your date of birth"
│ │
│ 9. Completes Step 2 │
│ Moves to Step 3 │
│ │
│ 10. Finishes form │
│ ─────► Form Submitted ─────────►
│ │
│ 11. Thanks agent │
│ ◄────── Session Ends ──────────┤
```
## Privacy Protection Patterns
### Pattern 1: Full Masking (Recommended)
```javascript
// All sensitive fields completely hidden
const settings = {
piiMask: {
maskType: "custom_input",
maskCssSelectors: ".pii-mask, .sensitive, [data-private]"
}
};
```
**Use for**: SSN, passwords, credit cards, medical records
### Pattern 2: Partial Masking
```javascript
// Show last 4 digits (not natively supported, requires custom implementation)
function partialMask(value) {
return '*'.repeat(value.length - 4) + value.slice(-4);
}
```
**Use for**: Phone numbers (show area code), account numbers
### Pattern 3: Contextual Masking
```javascript
// Mask based on form section
function updateMasking(stepNumber) {
const maskingRules = {
1: ".none", // No masking on basic info
2: ".ssn, .dob", // Mask ID fields
3: ".account, .routing", // Mask financial fields
4: ".none" // No masking on loan details
};
// Update SDK settings dynamically
// Note: Requires re-initialization in current SDK version
}
```
## Analytics and Tracking
### Measure Assistance Effectiveness
```javascript
// Track form completion with/without assistance
const metrics = {
formType: "loan_application",
assistanceRequested: true,
assistanceDuration: 420, // seconds
stepWhereHelpRequested: 2,
completionRate: 1, // 1 = completed, 0 = abandoned
timeToComplete: 1200, // seconds
fieldsModified: 18,
validationErrors: 2
};
analytics.track("form_completion", metrics);
```
### Key Metrics to Track
1. **Form Abandonment Rate**
- Before assistance: 35%
- With assistance: 8%
- **73% improvement**
2. **Time to Complete**
- Without assistance: 15 min avg
- With assistance: 8 min avg
- **47% faster**
3. **Error Rate**
- Without assistance: 3.2 errors/form
- With assistance: 0.8 errors/form
- **75% fewer errors**
4. **Customer Satisfaction**
- CSAT score: 4.7/5
- NPS: +68
## Integration Examples
### Salesforce Integration
```javascript
// Log form assistance session to Salesforce
async function logFormAssistance(leadId, sessionData) {
await salesforce.leads.update(leadId, {
Form_Assistance_Date__c: new Date(),
Assistance_Duration__c: sessionData.duration,
Form_Completed__c: sessionData.completed,
Agent_Id__c: sessionData.agentId
});
}
```
### HubSpot Integration
```javascript
// Create activity for form assistance
await hubspot.contacts.createActivity(contactId, {
type: "cobrowse_assistance",
timestamp: Date.now(),
properties: {
form_type: "loan_application",
duration: sessionDuration,
completed: formCompleted
}
});
```
## Best Practices
### 1. Clear Help Triggers
Place help buttons strategically:
- Top of form (always visible)
- Beginning of each complex section
- Near confusing field labels
### 2. Privacy First
- Mask by default, unmask only if absolutely necessary
- Show clear indicators when fields are masked
- Get consent before starting session
### 3. Progress Preservation
```javascript
// Save form state before assistance
function saveFormState() {
const formData = new FormData(document.getElementById("loan-application"));
localStorage.setItem("form_draft", JSON.stringify(Object.fromEntries(formData)));
}
// Restore on page reload
function restoreFormState() {
const saved = localStorage.getItem("form_draft");
if (saved) {
const data = JSON.parse(saved);
Object.entries(data).forEach(([name, value]) => {
const field = document.querySelector(`[name="${name}"]`);
if (field) field.value = value;
});
}
}
```
### 4. Agent Training
Train agents on:
- Which fields are masked vs visible
- How to use annotation tools effectively
- When to suggest breaks for complex forms
- Privacy compliance requirements
## Common Challenges & Solutions
**Challenge**: Customer refreshes page during assistance
**Solution**: Implement auto-reconnection (see [Auto-Reconnection Guide](../../cobrowse-sdk/examples/auto-reconnection.md))
**Challenge**: Agent can't see validation errors
**Solution**: Add visual indicators that aren't masked:
```javascript
field.parentElement.classList.add("has-error");
```
**Challenge**: Multi-page forms lose session
**Solution**: Use session persistence across page navigation:
```javascript
const settings = {
multiTabSessionPersistence: {
enable: true
}
};
```
## Cost-Benefit Analysis
### Costs
- **Zoom SDK**: ~$0.05 per assistance minute
- **Development**: 2-3 weeks integration
- **Agent Training**: 4 hours per agent
### Benefits
- **Reduced Abandonment**: 35% → 8% = 27% more conversions
- **Faster Completion**: 15 min → 8 min = 47% time saved
- **Fewer Errors**: 75% reduction in submission errors
- **Higher CSAT**: 4.7/5 satisfaction score
**ROI Example** (1000 forms/month):
- Before: 650 completed (35% abandoned)
- After: 920 completed (8% abandoned)
- Additional conversions: 270/month
- Avg value/conversion: $50
- Additional revenue: $13,500/month
- SDK cost: ~$500/month
- **Net benefit: $13,000/month**
## Related Resources
- [Zoom Cobrowse SDK](../../cobrowse-sdk/SKILL.md)
- [Customer Support Co-Browsing](customer-support-cobrowsing.md)
- [Privacy Masking Example](../../cobrowse-sdk/examples/privacy-masking.md)
- [Session Events Reference](../../cobrowse-sdk/references/session-events.md)
- [Get Started Guide](../../cobrowse-sdk/get-started.md)
## Next Steps
1. **Identify high-abandon forms** in your application
2. **Review privacy requirements** for your industry
3. **Set up auth server** using [JWT Authentication](../../cobrowse-sdk/concepts/jwt-authentication.md)
4. **Integrate customer SDK** using [Customer Integration](../../cobrowse-sdk/examples/customer-integration.md)
5. **Train support agents** on co-browsing and privacy controls
6. **Measure results** and iterate based on analytics