\n {/* Title */}\n

Leads Webhook

\n\n {/* Webhook URL */}\n

\n \n \n \n {webhookUrl}\n

\n \n \n \n \n \n \n \n Copy\n \n

\n\n

\n This val URL accepts POST requests! Paste it anywhere that accepts\n webhooks. Hint: it's also the url of this dashboard.\n

\n\n {/* Or divider + tester toggle */}\n

\n \n or\n \n test it here\n \n \n \n \n \n

\n\n {/* Tester content - hidden by default */}\n

\n {/* POST URL header */}\n

\n POST {webhookUrl}\n

\n\n {/* Test mode selector */}\n

\n \n Neutral\n \n \n Should Match ✓\n \n \n Should Reject ✗\n \n

\n\n {/* Hint explainer */}\n \n

\n\n {/* Raw JSON editor */}\n \n \n\n {/* JSON validation message */}\n

\n\n {/* Send button */}\n \n \n \n \n Send Test Lead\n \n\n {/* Result area */}\n \n

\n \n\n {\n document.getElementById('copy-icon').classList.remove('hidden');\n document.getElementById('check-icon').classList.add('hidden');\n document.getElementById('copy-text').textContent = 'Copy';\n }, 2000);\n };\n\n window.toggleTester = function() {\n const content = document.getElementById('tester-content');\n const chevron = document.getElementById('tester-chevron');\n content.classList.toggle('hidden');\n chevron.classList.toggle('rotate-180');\n \n if (!content.classList.contains('hidden')) {\n setTestMode('neutral');\n }\n };\n\n window.setTestMode = function(mode) {\n currentMode = mode;\n \n ['neutral', 'pass', 'fail'].forEach(m => {\n const btn = document.getElementById('mode-' + m);\n if (m === mode) {\n btn.classList.remove('border-gray-200', 'bg-white');\n btn.classList.add('border-gray-300', 'bg-gray-100');\n } else {\n btn.classList.add('border-gray-200', 'bg-white');\n btn.classList.remove('border-gray-300', 'bg-gray-100');\n }\n });\n\n const explainer = document.getElementById('hint-explainer');\n if (mode === 'neutral') {\n explainer.classList.add('hidden');\n } else {\n explainer.classList.remove('hidden');\n explainer.innerHTML = mode === 'pass' \n ? 'Adding _testHint to ask AI to mark as match'\n : 'Adding _testHint to ask AI to reject';\n }\n\n const editor = document.getElementById('json-editor');\n try {\n const current = JSON.parse(editor.value);\n delete current._testHint;\n basePayload = current;\n } catch {\n basePayload = { ...defaultPayload };\n }\n\n let payload = { ...basePayload };\n if (mode === 'pass') payload._testHint = passHint;\n if (mode === 'fail') payload._testHint = failHint;\n\n editor.value = JSON.stringify(payload, null, 2);\n validateJson();\n };\n\n window.validateJson = function() {\n const editor = document.getElementById('json-editor');\n const errorEl = document.getElementById('json-error');\n const sendBtn = document.getElementById('send-btn');\n \n try {\n JSON.parse(editor.value);\n errorEl.classList.add('hidden');\n sendBtn.disabled = false;\n return true;\n } catch (e) {\n errorEl.textContent = 'Invalid JSON: ' + e.message;\n errorEl.classList.remove('hidden');\n sendBtn.disabled = true;\n return false;\n }\n };\n\n window.sendTest = async function() {\n if (!validateJson()) return;\n\n const sendBtn = document.getElementById('send-btn');\n const sendText = document.getElementById('send-text');\n const result = document.getElementById('result');\n const editor = document.getElementById('json-editor');\n\n sendBtn.disabled = true;\n sendText.textContent = 'Sending...';\n result.classList.add('hidden');\n\n try {\n const payload = JSON.parse(editor.value);\n const res = await fetch(webhookUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload)\n });\n\n const responseData = await res.json();\n \n result.classList.remove('hidden', 'bg-red-50', 'border-red-200', 'text-red-700', 'bg-green-50', 'border-green-200', 'text-green-700');\n if (responseData.error) {\n result.classList.add('bg-red-50', 'border', 'border-red-200', 'text-red-700');\n result.textContent = '✗ ' + responseData.error;\n } else {\n result.classList.add('bg-green-50', 'border', 'border-green-200', 'text-green-700');\n result.textContent = '✓ Sent! Refresh in a few seconds to see the lead.';\n }\n } catch (err) {\n result.classList.remove('hidden', 'bg-green-50', 'border-green-200', 'text-green-700');\n result.classList.add('bg-red-50', 'border', 'border-red-200', 'text-red-700');\n result.textContent = '✗ Error: ' + err.message;\n }\n\n sendBtn.disabled = false;\n sendText.textContent = 'Send Test Lead';\n };\n\n document.getElementById('json-editor').addEventListener('input', validateJson);\n })();\n `,\n }}\n />\n \n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/templates/leads/code/welcome-ui.tsx","extension","actionData","errors"]