Flo widget demo
The launcher should appear bottom-right.
' + (agent.avatar ? '
' : "") +
"
' +
'';
body = panel.querySelector(".flo-body");
opts = panel.querySelector(".flo-opts");
function open() { panel.classList.add("open"); launch.style.display = "none"; }
function close() { panel.classList.remove("open"); launch.style.display = "flex"; }
launch.onclick = function () { open(); if (!body.children.length) go(flow.start); };
panel.querySelector(".flo-x").onclick = close;
function scroll() { body.scrollTop = body.scrollHeight; }
function bot(txt) { var d = document.createElement("div"); d.className = "flo-msg flo-bot"; d.textContent = txt; body.appendChild(d); scroll(); }
function user(txt) { var d = document.createElement("div"); d.className = "flo-msg flo-user"; d.textContent = txt; body.appendChild(d); scroll(); }
function clearOpts() { opts.innerHTML = ""; }
function go(id) {
var step = (flow.steps || {})[id];
clearOpts();
if (!step) return;
(step.bot || []).forEach(bot);
if (step.capture) { capture(); return; }
if (step.choices) {
step.choices.forEach(function (c) {
var b = document.createElement("button");
b.className = "flo-opt"; b.textContent = c.label;
b.onclick = function () { user(c.label); if (c.field) answers[c.field] = c.label; clearOpts(); go(c.next); };
opts.appendChild(b);
});
} else if (step.input) {
var row = document.createElement("div"); row.className = "flo-inrow";
var inp = document.createElement("input"); inp.className = "flo-in";
inp.placeholder = step.input.placeholder || ""; inp.type = step.input.type || "text";
var snd = document.createElement("button"); snd.className = "flo-send"; snd.textContent = "Send";
function submit() {
var v = inp.value.trim(); if (!v) return;
answers[step.input.field] = v; user(v); opts.innerHTML = ""; go(step.next);
}
snd.onclick = submit; inp.onkeydown = function (e) { if (e.key === "Enter") submit(); };
row.appendChild(inp); row.appendChild(snd); opts.appendChild(row); inp.focus();
}
}
function capture() {
var lead = flow.capture || {};
var rec = Object.assign({ source: "flo_widget", flow_id: flow.flow_id, captured_at: Date.now() }, answers);
if (lead.object) {
api(Object.assign({ action: "create", object_name: lead.object, app: flow.app }, rec))
.catch(function () {});
}
}
el.appendChild(launch);
el.appendChild(panel);
if (flow.autoOpen) launch.click();
}
function start(el) {
var flowId = el.getAttribute("data-flow-id");
if (!flowId || el.getAttribute("data-flo-ready")) return;
el.setAttribute("data-flo-ready", "1");
var app = el.getAttribute("data-app");
var obj = el.getAttribute("data-flow-object") || "pages";
var key = el.getAttribute("data-flow-key") || "slug";
var filter = {}; filter[key] = flowId;
api({ action: "get_v2", app: app, object_name: obj,
filter: filter, fields: ["flow", "content", "contents"], page_size: 1 })
.then(function (res) {
var rec = ((res ? res.data : null) || [])[0] || {};
var raw = rec.flow || rec.content || rec.contents || null;
var flow = (typeof raw === "string") ? JSON.parse(raw) : raw;
if (flow) { flow.app = flow.app || app; new Widget(el, flow); }
})
.catch(function (e) { console.error("flo-widget load failed", e); });
}
function init() { [].forEach.call(document.querySelectorAll("[data-flo-widget]"), start); }
if (document.readyState !== "loading") init();
else document.addEventListener("DOMContentLoaded", init);
})();
" + (agent.name || "Assistant") + "" + (agent.tagline || "Typically replies instantly") + "
" +
'