Online Interactive Voice Response (IVR) Manager
Toolbox
Press 1 for Sales
Press 2 for Support
`; break; case 'input': title = 'Get Input'; content = `${title}
`; break; case 'transfer': title = 'Transfer Call'; content = `${title}
`; break; case 'hangup': title = 'Hang Up'; content = `${title}
`; break; } nodeElement.innerHTML = content; canvas.appendChild(nodeElement); nodeElement.dataset.title = title; const node = { id: nodeId, element: nodeElement, type: type, connections: [] }; nodes.push(node); nodeElement.addEventListener('mousedown', startDrag); nodeElement.querySelectorAll('.connector').forEach(c => c.addEventListener('mousedown', startConnection)); } function startDrag(e) { if (e.target.classList.contains('connector')) return; activeNode = e.currentTarget; offset.x = e.clientX - activeNode.offsetLeft; offset.y = e.clientY - activeNode.offsetTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', endDrag); } function drag(e) { if (!activeNode) return; e.preventDefault(); activeNode.style.left = `${e.clientX - offset.x}px`; activeNode.style.top = `${e.clientY - offset.y}px`; updateConnections(); } function endDrag() { activeNode = null; document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', endDrag); } function startConnection(e) { e.stopPropagation(); isDrawingConnection = true; startConnector = e.target; tempLine = document.createElementNS('http://www.w3.org/2000/svg', 'line'); tempLine.setAttribute('stroke', '#4F46E5'); tempLine.setAttribute('stroke-width', '2'); svgLines.appendChild(tempLine); const startPos = getConnectorPosition(startConnector); tempLine.setAttribute('x1', startPos.x); tempLine.setAttribute('y1', startPos.y); tempLine.setAttribute('x2', startPos.x); tempLine.setAttribute('y2', startPos.y); document.addEventListener('mousemove', drawConnection); document.addEventListener('mouseup', endConnection); } function drawConnection(e) { if (!isDrawingConnection) return; const canvasRect = canvas.getBoundingClientRect(); const x2 = e.clientX - canvasRect.left; const y2 = e.clientY - canvasRect.top; tempLine.setAttribute('x2', x2); tempLine.setAttribute('y2', y2); } function endConnection(e) { if (!isDrawingConnection) return; const endConnector = e.target; if (endConnector.classList.contains('connector') && endConnector !== startConnector && endConnector.classList.contains('input')) { const startNodeId = startConnector.closest('.ivr-node').id; const endNodeId = endConnector.closest('.ivr-node').id; if (startNodeId !== endNodeId) { connections.push({ from: startConnector, to: endConnector }); } } isDrawingConnection = false; startConnector = null; if (tempLine) { svgLines.removeChild(tempLine); tempLine = null; } updateConnections(); document.removeEventListener('mousemove', drawConnection); document.removeEventListener('mouseup', endConnection); } function updateConnections() { svgLines.innerHTML = ''; connections.forEach(conn => { const startPos = getConnectorPosition(conn.from); const endPos = getConnectorPosition(conn.to); const line = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const d = `M ${startPos.x} ${startPos.y} C ${startPos.x + 50} ${startPos.y}, ${endPos.x - 50} ${endPos.y}, ${endPos.x} ${endPos.y}`; line.setAttribute('d', d); line.setAttribute('stroke', '#4F46E5'); line.setAttribute('stroke-width', '2'); line.setAttribute('fill', 'none'); svgLines.appendChild(line); }); } function getConnectorPosition(connector) { const nodeRect = connector.closest('.ivr-node').getBoundingClientRect(); const canvasRect = canvas.getBoundingClientRect(); const connRect = connector.getBoundingClientRect(); const x = connRect.left + connRect.width / 2 - canvasRect.left; const y = connRect.top + connRect.height / 2 - canvasRect.top; return { x, y }; } function generateReportHTML() { let reportHtml = `IVR Flow Report
Generated on: ${new Date().toLocaleString()}
`; nodes.forEach(node => { reportHtml += `${node.element.dataset.title} (${node.id})
`;
const inputs = node.element.querySelectorAll('input, textarea');
if (inputs.length > 0) {
inputs.forEach(input => {
reportHtml += `
Configuration: ${input.value || `(${input.placeholder})`}
`; }); } else { reportHtml += `No configuration for this node.
`; } reportHtml += `Connections:
`; const outgoingConnections = connections.filter(c => c.from.closest('.ivr-node').id === node.id); if (outgoingConnections.length > 0) { reportHtml += `- `;
outgoingConnections.forEach(conn => {
const toNode = conn.to.closest('.ivr-node');
const option = conn.from.dataset.option ? ` (Option ${conn.from.dataset.option})` : '';
reportHtml += `
- Flows to: ${toNode.dataset.title} (${toNode.id})${option} `; }); reportHtml += `
End of flow path.
`; } reportHtml += `