Smart Chat Personalization System

Smart Chat Personalization System

Define rules and instantly preview your personalized chat experiences.

1. Simulate User Attributes

2. Personalization Rules

3. Live Preview

S

Support Bot

● Online

4. Logic Trace

IF ${rule.condition.attribute} ${rule.condition.operator} ${rule.condition.value}

THEN show: "${rule.action.text.substring(0, 40)}..."

`).join(''); } function openRuleModal(rule = null) { const isEditing = rule !== null; document.getElementById('modalTitle').textContent = isEditing ? 'Edit Rule' : 'Create New Rule'; document.getElementById('ruleId').value = isEditing ? rule.id : ''; document.getElementById('modalAttribute').value = isEditing ? rule.condition.attribute : 'cartValue'; document.getElementById('modalOperator').value = isEditing ? rule.condition.operator : '>'; document.getElementById('modalValue').value = isEditing ? rule.condition.value : ''; document.getElementById('modalGreeting').value = isEditing ? rule.action.text : ''; document.getElementById('ruleModal').classList.remove('hidden'); document.getElementById('ruleModal').classList.add('flex'); } function closeRuleModal() { document.getElementById('ruleModal').classList.add('hidden'); document.getElementById('ruleModal').classList.remove('flex'); } function saveRule() { const id = document.getElementById('ruleId').value; const newRule = { id: id ? parseInt(id) : Date.now(), condition: { attribute: document.getElementById('modalAttribute').value, operator: document.getElementById('modalOperator').value, value: document.getElementById('modalValue').value }, action: { type: 'setGreeting', text: document.getElementById('modalGreeting').value } }; if (id) { rules = rules.map(r => r.id === newRule.id ? newRule : r); } else { rules.push(newRule); } closeRuleModal(); renderRulesList(); evaluateRules(); } async function generatePdf() { document.getElementById('pdf-date').textContent = new Date().toLocaleDateString(); document.getElementById('pdf-user-state').innerHTML = `

Logged In: ${simulatedUser.isLoggedIn}

Page Visits: ${simulatedUser.pageVisits}

Cart Value: $${simulatedUser.cartValue}

`; document.getElementById('pdf-ruleset').innerHTML = `
${rules.map(r => `
Rule #${r.id}: IF ${r.condition.attribute} ${r.condition.operator} ${r.condition.value}
`).join('')}
`; document.getElementById('pdf-preview-container').innerHTML = document.querySelector('.w-full.max-w-sm.mx-auto').innerHTML; document.getElementById('pdf-logic-trace').innerHTML = document.getElementById('logic-trace').innerHTML; const reportEl = document.getElementById('pdf-report'); reportEl.classList.remove('hidden'); const canvas = await html2canvas(reportEl, { scale: 2 }); reportEl.classList.add('hidden'); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'in', format: 'letter' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('Chat-Personalization-Scenario.pdf'); } document.getElementById('user-attributes').addEventListener('input', e => { if (e.target.id === 'pageVisits') { document.getElementById('pageVisitsLabel').textContent = e.target.value; } evaluateRules(); }); document.getElementById('addRuleBtn').addEventListener('click', () => openRuleModal()); document.getElementById('cancelModalBtn').addEventListener('click', closeRuleModal); document.getElementById('saveRuleBtn').addEventListener('click', saveRule); document.getElementById('downloadPdfBtn').addEventListener('click', generatePdf); document.getElementById('rules-list').addEventListener('click', e => { const id = parseInt(e.target.dataset.id); if (e.target.matches('.edit-rule-btn')) { const rule = rules.find(r => r.id === id); openRuleModal(rule); } if (e.target.matches('.remove-rule-btn')) { rules = rules.filter(r => r.id !== id); renderRulesList(); evaluateRules(); } }); renderRulesList(); evaluateRules(); });
Scroll to Top