* 4. Edit CONFIG.web3formsKey below with your real Web3Forms key (already public-safe by design). */ (function () { const CONFIG = { companyName: "Capital New York Home Advantage", agentName: "Michael Albano — Capital New York Home Advantage LLC", phone: "(518) 400-1188", email: "malbano@capnyhome.com", chatEndpoint: "/wp-json/capny/v1/chat", // handled by capny-chat-proxy.php web3formsKey: "6d638681-a547-4d66-a0fa-1a1a0c05b2b9", }; const COLORS = { ink: "#14213D", paper: "#F3EDE0", gold: "#C9A24B", green: "#2F5233", text: "#241F1B", muted: "#8A8375", }; let messages = [ { role: "assistant", content: "Hi, I'm Claire — I help get you started with " + CONFIG.companyName + ". First things first: what's your name?", }, ]; let lead = null; let loading = false; let sendStatus = "idle"; let followupStatus = "idle"; let followupChannel = ""; let open = false; // ---------- styles ---------- const style = document.createElement("style"); style.textContent = ` @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap'); #capny-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 999999; } #capny-launcher button { width: 56px; height: 56px; border-radius: 999px; border: none; cursor: pointer; background: ${COLORS.gold}; color: ${COLORS.ink}; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; font-size: 24px; } #capny-panel { width: 360px; max-width: 92vw; height: 600px; max-height: 80vh; background: ${COLORS.paper}; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; font-family: 'Inter', sans-serif; position: fixed; bottom: 24px; right: 24px; z-index: 999999; } #capny-panel.hidden, #capny-launcher.hidden { display: none; } .capny-header { background: ${COLORS.ink}; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px double ${COLORS.gold}; } .capny-eyebrow { font: 11px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: ${COLORS.gold}; } .capny-title { font: 18px 'Fraunces', serif; color: ${COLORS.paper}; } .capny-close { background: none; border: none; color: ${COLORS.paper}; font-size: 18px; cursor: pointer; } .capny-body { flex: 1; overflow-y: auto; padding: 16px; background-image: repeating-linear-gradient(to bottom, transparent, transparent 43px, rgba(20,33,61,0.13) 44px); } .capny-row { display: flex; gap: 8px; margin-bottom: 14px; } .capny-row.user { justify-content: flex-end; } .capny-avatar { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; background: ${COLORS.ink}; color: ${COLORS.gold}; font: 10px 'IBM Plex Mono', monospace; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .capny-bubble { max-width: 78%; padding: 8px 12px; font-size: 14px; line-height: 1.35; border-radius: 3px; } .capny-bubble.user { background: ${COLORS.ink}; color: ${COLORS.paper}; } .capny-bubble.assistant { background: #fff; color: ${COLORS.text}; border: 1px solid rgba(20,33,61,.15); } .capny-lead-card { position: relative; margin-top: 8px; padding: 14px; background: #fff; border: 1px solid rgba(20,33,61,.2); border-radius: 3px; } .capny-stamp { position: absolute; top: -12px; right: -8px; transform: rotate(-8deg); padding: 4px 10px; font: 11px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; border: 2px solid ${COLORS.green}; color: ${COLORS.green}; background: rgba(47,82,51,.06); } .capny-entry { font: 11px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: ${COLORS.muted}; margin-bottom: 6px; } .capny-dl { font-size: 13px; } .capny-dl div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(20,33,61,.13); } .capny-dl div:last-child { border-bottom: none; } .capny-dl dt { color: ${COLORS.muted}; } .capny-followup { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(20,33,61,.1); font-size: 12px; color: ${COLORS.muted}; } .capny-status { margin-top: 8px; font-size: 12px; } .capny-status a { color: ${COLORS.ink}; } .capny-input-row { display: flex; gap: 8px; padding: 10px; background: #EAE3D2; border-top: 1px solid rgba(20,33,61,.15); } .capny-input-row input { flex: 1; padding: 8px 10px; font-size: 14px; border-radius: 3px; border: 1px solid rgba(20,33,61,.2); background: #fff; color: ${COLORS.text}; } .capny-input-row button { width: 36px; height: 36px; border-radius: 3px; border: none; background: ${COLORS.ink}; color: ${COLORS.gold}; cursor: pointer; } .capny-footer { background: ${COLORS.ink}; padding: 8px; display: flex; justify-content: center; gap: 16px; font: 11px 'IBM Plex Mono', monospace; color: rgba(243,237,224,.7); } `; document.head.appendChild(style); // ---------- DOM scaffold ---------- const launcher = document.createElement("div"); launcher.id = "capny-launcher"; launcher.innerHTML = ``; const panel = document.createElement("div"); panel.id = "capny-panel"; panel.className = "hidden"; panel.innerHTML = `