/** * Shared chat-style lead capture for Classic View custom-html sections. * Submits via hidden form POST into /api/v1/tenants/{id}/forms/submit * (sandbox allows forms; fetch is blocked by null-origin iframe). */ (function () { function $(root, sel) { return root.querySelector(sel); } function el(tag, className, text) { var node = document.createElement(tag); if (className) node.className = className; if (text != null) node.textContent = text; return node; } function validate(step, value) { var trimmed = (value || "").trim(); if (step.required && !trimmed) return "This field is required."; if (!trimmed) return null; if (step.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) { return "Enter a valid email address."; } if (step.type === "url") { var withScheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed) ? trimmed : "https://" + trimmed; try { // eslint-disable-next-line no-new new URL(withScheme); } catch (e) { return "Enter a valid website URL."; } } if (step.type === "tel" && trimmed.replace(/[^\d]/g, "").length < 7) { return "Enter a valid phone number, or skip."; } return null; } function normalizeUrl(value) { var trimmed = (value || "").trim(); if (!trimmed) return ""; if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed)) { return "https://" + trimmed; } return trimmed; } function mount(config) { var root = document.querySelector(config.rootSelector); if (!root || root.dataset.vxInit) return; root.dataset.vxInit = "1"; var log = $(root, "[data-log]"); var composer = $(root, "[data-composer]"); var errorEl = $(root, "[data-error]"); var form = $(root, "form[data-submit-form]"); var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var typingMs = reduced ? 0 : 380; var answers = {}; var stepIndex = 0; var busy = false; var done = false; function clearError() { if (errorEl) errorEl.textContent = ""; } function setError(msg) { if (errorEl) errorEl.textContent = msg || ""; } function scrollLog() { if (!log) return; log.scrollTop = log.scrollHeight; } function addBubble(role, text) { var row = el("div", "row " + role); var bubble = el("div", "bubble", text); row.appendChild(bubble); log.appendChild(row); scrollLog(); return bubble; } function showTyping(then) { var row = el("div", "row bot"); var bubble = el("div", "bubble"); var dots = el("div", "typing"); dots.setAttribute("aria-label", "Typing"); dots.innerHTML = ""; bubble.appendChild(dots); row.appendChild(bubble); log.appendChild(row); scrollLog(); window.setTimeout(function () { row.remove(); then(); }, typingMs); } function botSay(text, then) { showTyping(function () { addBubble("bot", text); if (then) then(); }); } function currentStep() { return config.steps[stepIndex] || null; } function visibleSteps() { return config.steps.filter(function (step) { if (!step.showWhen) return true; var val = answers[step.showWhen.field]; if (step.showWhen.equals != null) return val === step.showWhen.equals; if (step.showWhen.in) return step.showWhen.in.indexOf(val) >= 0; return true; }); } function advanceToNext() { var steps = visibleSteps(); var current = steps[stepIndex]; var idxInAll = config.steps.indexOf(current); for (var i = idxInAll + 1; i < config.steps.length; i += 1) { var candidate = config.steps[i]; if (!candidate.showWhen) { stepIndex = steps.indexOf(candidate); // recompute visible list index steps = visibleSteps(); stepIndex = steps.indexOf(candidate); return candidate; } var val = answers[candidate.showWhen.field]; var ok = candidate.showWhen.equals != null ? val === candidate.showWhen.equals : candidate.showWhen.in ? candidate.showWhen.in.indexOf(val) >= 0 : true; if (ok) { steps = visibleSteps(); stepIndex = steps.indexOf(candidate); return candidate; } } return null; } // Simpler step model: linear with optional showWhen skips function nextStepAfter(fromIndex) { for (var i = fromIndex + 1; i < config.steps.length; i += 1) { var step = config.steps[i]; if (!step.showWhen) return i; var val = answers[step.showWhen.field]; if (step.showWhen.equals != null && val === step.showWhen.equals) return i; if (step.showWhen.in && step.showWhen.in.indexOf(val) >= 0) return i; } return -1; } function renderComposer(step) { composer.innerHTML = ""; clearError(); if (!step || done) return; if (step.kind === "chips") { var chips = el("div", "chips"); chips.setAttribute("role", "group"); chips.setAttribute("aria-label", step.inputLabel || step.bot); (step.chips || []).forEach(function (chip) { var btn = el("button", "chip", chip.label); btn.type = "button"; btn.addEventListener("click", function () { if (busy || done) return; acceptAnswer(step, chip.value, chip.label); }); chips.appendChild(btn); }); composer.appendChild(chips); if (step.allowSkip) { var skipRow = el("div", "actions"); var skip = el("button", "btn btn-ghost", step.skipLabel || "Skip"); skip.type = "button"; skip.addEventListener("click", function () { if (busy || done) return; acceptAnswer(step, "", step.skipLabel || "Skipped"); }); skipRow.appendChild(skip); composer.appendChild(skipRow); } return; } var row = el("div", "input-row"); var fieldWrap = el("div", "field"); var input; if (step.kind === "textarea") { input = document.createElement("textarea"); input.rows = 3; } else { input = document.createElement("input"); input.type = step.type === "email" ? "email" : step.type === "tel" ? "tel" : step.type === "url" ? "url" : "text"; } input.id = "vxchat-" + step.id; input.placeholder = step.placeholder || ""; input.setAttribute("aria-label", step.inputLabel || step.bot); input.autocomplete = step.field === "email" ? "email" : step.field === "name" ? "name" : step.field === "phone" ? "tel" : step.field === "company" ? "organization" : "on"; fieldWrap.appendChild(input); row.appendChild(fieldWrap); var actions = el("div", "actions"); if (step.allowSkip) { var skipBtn = el("button", "btn btn-ghost", step.skipLabel || "Skip"); skipBtn.type = "button"; skipBtn.addEventListener("click", function () { if (busy || done) return; acceptAnswer(step, "", step.skipLabel || "Skipped"); }); actions.appendChild(skipBtn); } var sendBtn = el("button", "btn btn-primary", step.submitLabel || "Send"); sendBtn.type = "button"; function send() { if (busy || done) return; acceptAnswer(step, input.value, null); } sendBtn.addEventListener("click", send); input.addEventListener("keydown", function (ev) { if (ev.key === "Enter" && step.kind !== "textarea") { ev.preventDefault(); send(); } if (ev.key === "Enter" && step.kind === "textarea" && (ev.metaKey || ev.ctrlKey)) { ev.preventDefault(); send(); } }); actions.appendChild(sendBtn); row.appendChild(actions); composer.appendChild(row); window.setTimeout(function () { input.focus(); }, 30); } function acceptAnswer(step, rawValue, displayOverride) { var err = validate(step, rawValue); if (err) { setError(err); return; } clearError(); var value = (rawValue || "").trim(); if (step.type === "url" && value) value = normalizeUrl(value); answers[step.field] = value; var display = displayOverride != null && displayOverride !== "" ? displayOverride : value || step.skipLabel || "Skipped"; addBubble("user", display); busy = true; composer.innerHTML = ""; var next = nextStepAfter(stepIndex); if (next < 0) { finish(); return; } stepIndex = next; var upcoming = config.steps[stepIndex]; botSay(upcoming.bot, function () { busy = false; renderComposer(upcoming); }); } function fillForm() { if (!form) return; ["name", "email"].forEach(function (key) { var input = form.querySelector('[name="' + key + '"]'); if (input) input.value = answers[key] || ""; }); var msg = form.querySelector('[name="message"]'); if (msg) { msg.value = config.buildMessage ? config.buildMessage(answers) : answers.message || ""; } } function finish() { busy = true; botSay(config.reviewBot || "Thanks — sending that over now.", function () { fillForm(); try { form.submit(); } catch (e) { setError(config.errors.submitFailed); busy = false; return; } window.setTimeout(function () { done = true; busy = false; composer.innerHTML = ""; botSay(config.successMessage(answers), function () {}); }, 450); }); } // Kickoff var first = config.steps[0]; botSay(config.opening || first.bot, function () { if (config.opening && config.opening !== first.bot) { botSay(first.bot, function () { renderComposer(first); }); } else { renderComposer(first); } }); } window.VystoChatBot = { mount: mount }; })(); (function () { if (!window.VystoChatBot) return; var TOPIC_LABELS = { pricing: "Pricing and plans", enterprise: "Enterprise custom quote", support: "Support", technical_help: "Technical help", trial_extension: "Extend my trial", partnership: "Partnership / agency", }; window.VystoChatBot.mount({ rootSelector: '[data-vxchat="contact"]', opening: "Hi — happy to connect you with the Vysto team.", reviewBot: "Perfect. Sending this to the team now.", errors: { submitFailed: "Sorry, something went wrong. Please try again in a moment.", }, successMessage: function (answers) { return ( "Thanks, " + (answers.name || "there").split(" ")[0] + ". We have your note and will reply at " + (answers.email || "your email") + " within one business day." ); }, buildMessage: function (a) { var lines = [ "Topic: " + (TOPIC_LABELS[a.topic] || a.topic || ""), "", "Company: " + (a.company || ""), ]; if (a.notes) { lines.push(""); lines.push("Notes: " + a.notes); } return lines.join("\n"); }, steps: [ { id: "name", field: "name", kind: "text", type: "text", required: true, bot: "What's your first and last name?", placeholder: "First and last name", inputLabel: "First and last name", }, { id: "email", field: "email", kind: "text", type: "email", required: true, bot: "What's your email address?", placeholder: "you@company.com", inputLabel: "Email address", }, { id: "topic", field: "topic", kind: "chips", required: true, bot: "What would you like to discuss?", inputLabel: "Topic", chips: [ { label: "Pricing and plans", value: "pricing" }, { label: "Enterprise custom quote", value: "enterprise" }, { label: "Support", value: "support" }, { label: "Technical help", value: "technical_help" }, { label: "Extend my trial", value: "trial_extension" }, { label: "Partnership / agency", value: "partnership" }, ], }, { id: "company", field: "company", kind: "text", type: "text", required: true, bot: "What's your company name?", placeholder: "Company name", inputLabel: "Company name", }, { id: "notes", field: "notes", kind: "textarea", type: "text", required: false, allowSkip: true, skipLabel: "Skip", bot: "Anything else you'd like us to know? (optional)", placeholder: "Optional notes", inputLabel: "Additional notes", submitLabel: "Continue", }, ], }); })();

Contact Vysto: Talk to the Team