feat: add sales-agent chat widget with 15s probe, visitor info, scroll-close
This commit is contained in:
Oliver
+339
@@ -970,6 +970,157 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ── Chat Widget ─────────────────────────────────────────── */
|
||||
.chat-widget {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.chat-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 60px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 20px rgba(79, 142, 247, 0.35);
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
}
|
||||
.chat-toggle:hover {
|
||||
opacity: 0.9;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.chat-toggle svg { flex-shrink: 0; }
|
||||
.chat-panel {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 24px;
|
||||
width: 360px;
|
||||
max-height: 520px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
animation: chatSlideUp 0.28s ease;
|
||||
}
|
||||
.chat-panel.open { display: flex; }
|
||||
@keyframes chatSlideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: var(--accent-dim);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.chat-header button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
.chat-header button:hover { color: var(--text); }
|
||||
.chat-msgs {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 200px;
|
||||
max-height: 340px;
|
||||
}
|
||||
.chat-msg {
|
||||
max-width: 85%;
|
||||
padding: 10px 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 1.45;
|
||||
word-wrap: break-word;
|
||||
font-size: 13px;
|
||||
}
|
||||
.chat-msg-bot {
|
||||
align-self: flex-start;
|
||||
background: var(--bg-inner);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.chat-msg-user {
|
||||
align-self: flex-end;
|
||||
background: var(--accent-dim);
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.chat-msg-thinking {
|
||||
align-self: flex-start;
|
||||
background: var(--bg-inner);
|
||||
border-bottom-left-radius: 4px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.chat-input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-inner);
|
||||
}
|
||||
.chat-input-row input {
|
||||
flex: 1;
|
||||
padding: 9px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
.chat-input-row input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
|
||||
}
|
||||
.chat-input-row button {
|
||||
padding: 9px 18px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chat-input-row button:hover { opacity: 0.9; }
|
||||
.chat-input-row button:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chat-panel {
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
width: auto;
|
||||
bottom: 72px;
|
||||
max-height: 60vh;
|
||||
}
|
||||
.chat-widget { bottom: 14px; right: 14px; }
|
||||
.chat-toggle { padding: 10px 16px; font-size: 13px; }
|
||||
}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1702,7 +1853,195 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Chat Widget ──────────────────────────────────────────── */
|
||||
const CHAT_URL = "https://n8n.derez.ai/webhook/a58d00c4-f0c9-40cd-bb50-4f45f0442ef0";
|
||||
let chatId = null;
|
||||
let chatOpen = false;
|
||||
let chatBusy = false;
|
||||
let greeted = false;
|
||||
|
||||
function chatToggle() {
|
||||
chatOpen = !chatOpen;
|
||||
document.getElementById("chat-panel").classList.toggle("open", chatOpen);
|
||||
document.getElementById("chat-toggle-btn").classList.toggle("active", chatOpen);
|
||||
if (chatOpen) {
|
||||
if (!chatId) {
|
||||
chatId = String(Math.floor(100000 + Math.random() * 900000));
|
||||
chatAppendMsg("bot", "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.");
|
||||
}
|
||||
document.getElementById("chat-input").focus();
|
||||
}
|
||||
}
|
||||
|
||||
function chatClose() {
|
||||
if (chatOpen) chatToggle();
|
||||
}
|
||||
|
||||
function chatAppendMsg(role, text) {
|
||||
const msgs = document.getElementById("chat-msgs");
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-msg chat-msg-" + role;
|
||||
div.textContent = text;
|
||||
msgs.appendChild(div);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
return div;
|
||||
}
|
||||
|
||||
function chatKey(e) {
|
||||
if (e.key === "Enter") chatSend();
|
||||
}
|
||||
|
||||
async function chatSend() {
|
||||
const input = document.getElementById("chat-input");
|
||||
const btn = document.getElementById("chat-send-btn");
|
||||
const msg = input.value.trim();
|
||||
if (!msg || chatBusy) return;
|
||||
chatBusy = true;
|
||||
chatAppendMsg("user", msg);
|
||||
input.value = "";
|
||||
btn.disabled = true;
|
||||
btn.textContent = "…";
|
||||
|
||||
const think = chatAppendMsg("bot", "…");
|
||||
think.className = "chat-msg chat-msg-thinking";
|
||||
|
||||
try {
|
||||
const res = await fetch(CHAT_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: msg, sessionId: chatId }),
|
||||
});
|
||||
const json = await res.json();
|
||||
const first = Array.isArray(json) ? json[0] : json;
|
||||
const reply =
|
||||
typeof json === "string"
|
||||
? json
|
||||
: (first && (first.output || first.message || first.reply || first.response || first.text)) ||
|
||||
JSON.stringify(json);
|
||||
think.remove();
|
||||
chatAppendMsg("bot", reply);
|
||||
} catch (err) {
|
||||
think.remove();
|
||||
chatAppendMsg("bot", "Sorry, I couldn't connect right now. Please try again later.");
|
||||
} finally {
|
||||
chatBusy = false;
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Send";
|
||||
document.getElementById("chat-input").focus();
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Visitor Probe — auto-open after 15s ────────────────── */
|
||||
(function () {
|
||||
let fired = false;
|
||||
setTimeout(function () {
|
||||
fetch("https://ipinfo.io/json")
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (geo) { fireProbe(geo); })
|
||||
.catch(function () { fireProbe(null); });
|
||||
}, 15000);
|
||||
|
||||
function fireProbe(geo) {
|
||||
if (fired) return;
|
||||
fired = true;
|
||||
const cid = chatId || String(Math.floor(100000 + Math.random() * 900000));
|
||||
const ua = navigator.userAgent;
|
||||
|
||||
let lines = [
|
||||
"NEW VISITOR — 15s Probe",
|
||||
"========================================",
|
||||
"",
|
||||
"- Page section: hero",
|
||||
"- Scroll depth: " + Math.min(100, Math.round((window.pageYOffset / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)) + "%",
|
||||
"- Time on page: 15 seconds",
|
||||
"- Timestamp: " + new Date().toUTCString(),
|
||||
"",
|
||||
"--- BROWSER & DEVICE ---",
|
||||
"- Browser: " + (/Edg\/([\d.]+)/.test(ua) ? "Edge " + RegExp.$1 : /Chrome\/([\d.]+)/.test(ua) ? "Chrome " + RegExp.$1 : /Firefox\/([\d.]+)/.test(ua) ? "Firefox " + RegExp.$1 : /Version\/([\d.]+).*Safari/.test(ua) ? "Safari " + RegExp.$1 : "Unknown"),
|
||||
"- OS: " + (/Windows NT 10/.test(ua) ? "Windows 10/11" : /Mac OS X/.test(ua) ? "macOS" : /Android/.test(ua) ? "Android" : /iPhone/.test(ua) ? "iOS" : /Linux/.test(ua) ? "Linux" : "Unknown"),
|
||||
"- Device: " + (/Mobi|Android|iPhone/.test(ua) ? "Mobile" : "Desktop"),
|
||||
"- Screen: " + screen.width + "x" + screen.height,
|
||||
"- Language: " + navigator.language,
|
||||
"- User Agent: " + ua,
|
||||
"",
|
||||
"--- PAGE ---",
|
||||
"- URL: " + window.location.href,
|
||||
"- Referrer: " + (document.referrer || "direct / none"),
|
||||
"- Title: " + document.title,
|
||||
];
|
||||
if (geo) {
|
||||
lines.push("");
|
||||
lines.push("--- LOCATION ---");
|
||||
if (geo.country) lines.push("- Country: " + geo.country);
|
||||
if (geo.city) lines.push("- City: " + geo.city);
|
||||
if (geo.org) lines.push("- ISP: " + geo.org);
|
||||
}
|
||||
lines.push("");
|
||||
lines.push("- Chat ID: " + cid);
|
||||
|
||||
const payload = {
|
||||
message: lines.join("\n"),
|
||||
sessionId: cid,
|
||||
};
|
||||
|
||||
fetch(CHAT_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(function (r) {
|
||||
const ct = r.headers.get("content-type") || "";
|
||||
if (ct.indexOf("json") !== -1) return r.json();
|
||||
return r.text().then(function (t) { return { output: t }; });
|
||||
})
|
||||
.then(function (d) {
|
||||
const item = Array.isArray(d) ? d[0] : d;
|
||||
const reply = (item && (item.output || item.message || item.reply || item.response || item.text)) || null;
|
||||
if (reply) {
|
||||
if (!chatId) chatId = cid;
|
||||
chatAppendMsg("bot", reply);
|
||||
greeted = true;
|
||||
if (!chatOpen) chatToggle();
|
||||
}
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
})();
|
||||
|
||||
/* ── Scroll-close ────────────────────────────────────────── */
|
||||
(function () {
|
||||
let scrolled = false;
|
||||
window.addEventListener("scroll", function () {
|
||||
if (chatOpen && !scrolled) {
|
||||
scrolled = true;
|
||||
setTimeout(function () { scrolled = false; }, 500);
|
||||
chatClose();
|
||||
}
|
||||
}, { passive: true });
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- ── Chat Widget ───────────────────────────────────────────── -->
|
||||
<div class="chat-widget" id="chat-widget">
|
||||
<button class="chat-toggle" id="chat-toggle-btn" onclick="chatToggle()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
Talk to Us
|
||||
</button>
|
||||
<div class="chat-panel" id="chat-panel">
|
||||
<div class="chat-header">
|
||||
<span>Sales Agent</span>
|
||||
<button onclick="chatClose()">✕</button>
|
||||
</div>
|
||||
<div class="chat-msgs" id="chat-msgs"></div>
|
||||
<div class="chat-input-row">
|
||||
<input id="chat-input" type="text" placeholder="Ask about plans, setup, pricing…" onkeydown="chatKey(event)" />
|
||||
<button id="chat-send-btn" onclick="chatSend()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user