Setting the file. One moment.
Subchapter 114.33
use-cases/form-completion-assistant.mdMarkdown15 KBView on GitHub
Guide customers through complex forms in real-time using visual assistance and privacy-protected co-browsing.
References
App TypesProblem: 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:
<!DOCTYPE html>
<html>
<head>
<title>Loan Application - Form Assistant</title>
<script type="module">
const ZOOM_SDK_KEY = 'YOUR_SDK_KEY';
// Load Cobrowse SDK
(function(r, a, b, f,
Mask fields based on sensitivity level:
// 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,
}
};Agent can highlight and guide:
<!-- Agent's view shows annotations -->
<style>
/* Agent's annotation appears on customer's screen */
.agent-highlight {
border: 2px solid #0e72ed;
box-shadow: 0 0 8px rgba(14, 114, 237, 0.6);
}
</style>Agent sees validation errors in real-time:
// 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);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 ──────────┤// 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
// 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
// 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
}// 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);Form Abandonment Rate
Time to Complete
Error Rate
Customer Satisfaction
// 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
});
}// 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
}
});Place help buttons strategically:
// 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;
});
}
}Train agents on:
Challenge: Customer refreshes page during assistance
Solution: Implement auto-reconnection (see Auto-Reconnection Guide (opens in a new tab))
Challenge: Agent can’t see validation errors
Solution: Add visual indicators that aren’t masked:
field.parentElement.classList.add("has-error");Challenge: Multi-page forms lose session
Solution: Use session persistence across page navigation:
const settings = {
multiTabSessionPersistence: {
enable: true
}
};ROI Example (1000 forms/month):