would still eat a flex gap, so it has to be skipped, not blanked. */ function screenDone(root, cfg) { var body = clear(bodyOf(root), 'done'); body.appendChild(el('div', 'fc-cro-eyebrow', cfg.doneEyebrow || 'All done')); body.appendChild(el('h4', null, cfg.doneHeadline || 'Sent. Check your email.')); var sub = cfg.doneSub === undefined ? 'We have sent you what this would do for your business, and what it costs to run.' : cfg.doneSub; if (sub) body.appendChild(el('p', null, sub)); if (cfg.doneLink !== false) { var link = el('a', 'fc-cro-cta2', cfg.ctaSecondary || 'Read how it works'); /* A page with no agent would otherwise ship '/ai-agents/undefined/'. */ link.href = cfg.ctaSecondaryHref || (cfg.agentSlug ? '/ai-agents/' + cfg.agentSlug + '/' : '/ai-agents/'); body.appendChild(link); } } /* ========================================================================= * THE EXIT OFFER. * * The one interruption a page is allowed, and only when every gate agrees. * A badly-gated exit popup is worse than none: it teaches a reader to * dismiss FieldCamp on sight, and it costs the article the engagement * signal it ranks on. So the RULES ARE THE FEATURE: * * 1. opted in the post's `show_exit_popup` ACF toggle. * 2. desktop pointer a mouseout at clientY <= 0 is meaningless on touch; * the same code fires mid scroll-fling. There is * deliberately no mobile trigger. * 3. real exit intent the cursor leaves through the TOP of the viewport, * or the tab is switched away and comes back. * 4. not dismissed the × , ESC and the backdrop all count. * 5. not captured they already gave us their email. * 6. never stacked no Calendly iframe, no other open dialog. * * No time-on-page minimum, and nothing is persisted: gates 4 and 5 live in * variables, so a refresh brings the dialog back. * * The panel is appended to , outside the article React owns, and only * ever after a real gesture — so it cannot affect hydration. * ====================================================================== */ var exitArmed = false; var exitOpen = false; /* Keyed by path, not a bare boolean: this script survives client-side * navigation, and a "no" on one post must not silence the next. */ var exitDismissedOn = null; function exitDismissed() { return exitDismissedOn === location.pathname; } /* Ours is not in the DOM while closed, so this can never match itself. */ function anotherDialogIsOpen() { return Boolean( document.querySelector('iframe[src*="calendly"]') || document.querySelector('[role="dialog"]') ); } var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),' + 'select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'; /* PAD is the panel's padding on all four sides; GAP is the space between every stacked element inside it. */ var PAD = '24px'; var GAP = '12px'; /* White, not the accent orange. On the orange panel the black CTA and the * cream input both fought the background for attention; on white the button * is the only saturated thing in the dialog, which is what a single-action * exit prompt wants. */ var PANEL_BG = '#FFFFFF'; /* A post's content can carry several copies of the block's own `.fc-exit` * CSS, all later in the document than this stylesheet. So every rule is * written one level deeper (`.fc-exit .fc-exit-panel`) to win on specificity * rather than order, with `!important` where the block uses it. */ var EXIT_CSS = /* `align-items:flex-start` + `margin:auto` on the panel, NOT `align-items:center`. A centred flex item that is taller than the viewport overflows in BOTH directions, and the overflow above the container is unreachable — the panel's top, and on a short laptop window its bottom, simply cannot be scrolled to. Auto margins centre it the same way while there is room, and collapse to 0 when there is not, so the whole panel stays inside the scrollable area. `overscroll-behavior` keeps that scroll off the article behind it. */ '.fc-exit{--ink:#0F0E0B;--cream:#F5F2EA;--accent:#E8935A;' + 'position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;' + 'justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain;' + 'background:rgba(15,14,11,.55);font-family:inherit}' + '.fc-exit .fc-exit-panel{position:relative;margin:auto;width:100%;max-width:420px;border-radius:16px;' + 'padding:' + PAD + '!important;background:' + PANEL_BG + '!important;color:var(--ink);' + 'border:0!important;box-shadow:0 24px 60px rgba(0,0,0,.35);' + 'outline:none;font-family:inherit}' + '.fc-exit .fc-exit-close{position:absolute;right:' + PAD + ';top:' + PAD + ';' + 'width:28px;height:28px;' + 'display:flex;align-items:center;justify-content:center;border:0;' + 'border-radius:999px;cursor:pointer;color:rgba(15,14,11,.55);background:transparent}' + '.fc-exit .fc-exit-close:hover{background:rgba(15,14,11,.07);color:var(--ink)}' + '.fc-exit .fc-exit-eyebrow{margin:0!important;' + 'font-family:ui-monospace,SFMono-Regular,Menlo,monospace;' + 'text-transform:uppercase;font-size:10.5px;letter-spacing:.14em;color:rgba(15,14,11,.62)}' + '.fc-exit .fc-exit-title{margin:' + GAP + ' 0 0!important;font-size:21px;font-weight:700;' + 'line-height:1.18;letter-spacing:-.02em;color:var(--ink);padding-right:36px}' + '@media (min-width:768px){.fc-exit .fc-exit-title{font-size:23px}}' + '.fc-exit .fc-exit-sub{margin:' + GAP + ' 0 0!important;padding-bottom:10px;' + 'max-width:42ch;font-size:14.5px;' + 'line-height:1.5;color:rgba(15,14,11,.78)}' + /* Stacked, not side by side. At 420px the old row wrapped anyway on most * phones, so the button's width changed between breakpoints; column makes * both controls full width everywhere and gives the CTA the whole panel. */ '.fc-exit .fc-exit-row{display:flex;flex-direction:column;gap:10px;' + 'margin:' + GAP + ' 0 0!important}' + '.fc-exit .fc-exit-row input[type=email]{width:100%;height:46px;' + 'border-radius:999px;box-sizing:border-box;' + 'padding:0 18px;font-size:14px;background:#fff;' + /* Hairline, not the full-strength ink border the orange panel needed — * on white that read as a second button. */ 'border:1px solid rgba(15,14,11,.22);' + 'color:var(--ink);font-family:inherit;outline:none}' + '.fc-exit .fc-exit-row input[type=email]::placeholder{color:rgba(15,14,11,.45)}' + '.fc-exit .fc-exit-cta{width:100%;height:46px;border-radius:999px;padding:0 20px;border:0;' + 'cursor:pointer;' + 'font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;' + 'display:inline-flex;align-items:center;justify-content:center;' + 'background:var(--ink);color:var(--cream);' + 'font-family:inherit}' + '.fc-exit .fc-exit-cta[disabled]{opacity:.6;cursor:default}' + '.fc-exit .fc-exit-err{margin:' + GAP + ' 0 0!important;font-size:13px;' + 'line-height:1.5;color:#8A2B12}' + '.fc-exit .fc-exit-err:empty{display:none}' + '.fc-cro-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;' + 'overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}' + '.fc-exit :focus-visible{outline:2px solid var(--ink);outline-offset:2px}'; function ensureExitStyles() { if (document.getElementById('fc-exit-css')) return; var style = document.createElement('style'); style.id = 'fc-exit-css'; style.textContent = EXIT_CSS; document.head.appendChild(style); } /* `override` is how a deliberate click — the urgency bar — opens this same panel with its own words. Exit intent passes nothing and keeps the ACF copy. Each field falls back on its own, so a bar that supplies only a title still gets the post's eyebrow and button label. */ function openExit(root, cfg, override) { var acf = acfExit() || {}; var over = override || {}; var copy = { eyebrow: over.eyebrow || acf.eyebrow || 'No call, no signup', title: over.title || acf.title, sub: over.sub || acf.description, cta: over.cta || acf.buttonText || 'Send me the details' }; /* Distinguishes the two ways in, everywhere this panel reports itself. */ var placement = over.placement || 'exit_offer'; ensureExitStyles(); exitOpen = true; var lastFocus = document.activeElement; var wrap = el('div', 'fc-exit'); wrap.setAttribute('data-cta-placement', placement); var panel = el('div', 'fc-exit-panel'); panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-modal', 'true'); panel.setAttribute('aria-labelledby', 'fc-exit-title'); panel.tabIndex = -1; var close = el('button', 'fc-exit-close'); close.type = 'button'; close.setAttribute('aria-label', 'Close'); close.innerHTML = ''; panel.appendChild(close); /* `dismissed` is the × , ESC and the backdrop; the "Sent" screen passes false, since the capture gate already covers it. */ function shut(dismissed) { exitOpen = false; if (dismissed) exitDismissedOn = location.pathname; document.removeEventListener('keydown', onKey, true); if (wrap.parentNode) wrap.parentNode.removeChild(wrap); if (lastFocus) if (lastFocus.focus) lastFocus.focus({ preventScroll: true }); } /* ESC closes; Tab cycles inside the panel and cannot escape it. */ function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); return shut(true); } if (e.key !== 'Tab') return; var items = [].slice.call(panel.querySelectorAll(FOCUSABLE)); if (!items.length) { e.preventDefault(); return panel.focus({ preventScroll: true }); } var first = items[0], last = items[items.length - 1], active = document.activeElement; var inside = panel.contains(active); if (e.shiftKey) { if (!inside || active === first || active === panel) { e.preventDefault(); last.focus(); } } else if (!inside || active === last) { e.preventDefault(); first.focus(); } } function renderAsk() { [].slice.call(panel.querySelectorAll(':scope > *:not(.fc-exit-close)')) .forEach(function (n) { panel.removeChild(n); }); panel.appendChild(el('div', 'fc-cro-eyebrow fc-exit-eyebrow', copy.eyebrow)); var h = el('h2', 'fc-exit-title', copy.title); h.id = 'fc-exit-title'; panel.appendChild(h); panel.appendChild(el('p', 'fc-exit-sub', copy.sub)); var row = el('form', 'fc-exit-row'); var id = 'fc-exit-email-' + Math.random().toString(36).slice(2, 8); var label = el('label', 'fc-cro-sr', 'Work email'); label.htmlFor = id; var input = document.createElement('input'); input.type = 'email'; input.id = id; input.inputMode = 'email'; input.autocomplete = 'email'; input.placeholder = cfg.emailPlaceholder || 'you@company.com'; var send = el('button', 'fc-exit-cta', copy.cta); send.type = 'submit'; row.appendChild(label); row.appendChild(input); row.appendChild(send); panel.appendChild(row); var err = el('p', 'fc-exit-err', ''); panel.appendChild(err); var started = false; input.addEventListener('focus', function () { if (started) return; started = true; track(cfg, 'lead_capture_started', { cta_placement: placement }); }); row.onsubmit = function (e) { e.preventDefault(); var email = (input.value || '').trim(); if (!EMAIL_RE.test(email)) { err.textContent = 'That email address does not look right.'; input.focus(); return; } err.textContent = ''; send.disabled = true; send.textContent = 'Sending…'; sendOffer(cfg, email, false, placement); renderSent(); }; input.focus({ preventScroll: true }); } function renderSent() { [].slice.call(panel.querySelectorAll(':scope > *:not(.fc-exit-close)')) .forEach(function (n) { panel.removeChild(n); }); panel.appendChild(el('div', 'fc-cro-eyebrow fc-exit-eyebrow', '✓ Sent')); var h = el('h2', 'fc-exit-title', 'On its way. Check your inbox.'); h.id = 'fc-exit-title'; panel.appendChild(h); panel.appendChild(el('p', 'fc-exit-sub', 'It has everything above, in one place you can keep.')); var back = el('button', 'fc-exit-cta', 'Back to the article'); back.type = 'button'; back.onclick = function () { shut(false); }; panel.appendChild(back); back.focus({ preventScroll: true }); } close.onclick = function () { track(cfg, 'offer_dismissed', { cta_placement: placement }); shut(true); }; /* backdrop only, never a click that started inside the panel */ wrap.onclick = function (e) { if (e.target !== wrap) return; track(cfg, 'offer_dismissed', { cta_placement: placement }); shut(true); }; renderAsk(); wrap.appendChild(panel); document.body.appendChild(wrap); document.addEventListener('keydown', onKey, true); /* `track`, not `trackOnce`: the dialog can open several times in one page view now, and each of those is a real impression. */ track(cfg, 'exit_offer_viewed', { cta_placement: placement }); } function armExit(root, cfg) { if (exitArmed) return; if (!acfExit()) return; /* gate 1 — show_exit_popup */ try { if (window.matchMedia('(pointer: coarse)').matches) return; } catch (e) {} /* gate 2 */ exitArmed = true; /* GATE 3 — the cursor leaves through the TOP of the window: up past the tab strip, toward the close button or the address bar. Out to the left, right or bottom is not an exit; that is someone reaching for a scrollbar or another window. Two listeners on purpose. `mouseout` is the classic hook but fires for every element boundary inside the page, and a fast flick can report a last position still inside the viewport. `mouseleave` on the root fires once, when the pointer genuinely leaves the document, and catches exactly that miss. `exitOpen` makes the pair idempotent — one gesture cannot open two panels. What stops a SECOND gesture is the dismissal gate below, not this flag. */ function onLeave(e) { if (exitOpen) return; if (exitDismissed()) return; /* gate 4 — said no */ /* relatedTarget is null when the pointer left the document rather than crossing into another element — that is what separates a real exit from ordinary movement across the page. */ var leftTop = e.clientY <= 0; if (!leftTop) if (!e.relatedTarget) if (e.clientY < 10) leftTop = true; if (!leftTop) return; if (stateOf(cfg).captured) return; /* gate 5 */ if (anotherDialogIsOpen()) return; /* gate 6 */ openExit(root, cfg); } document.addEventListener('mouseout', onLeave); document.documentElement.addEventListener('mouseleave', onLeave); /* SWITCHING TABS is the same intent as reaching for the close button, but it produces no mouseleave a page can rely on — a keyboard switch produces none at all. So it is watched separately. The offer is NOT opened while the tab is hidden: painting a dialog into a tab nobody is looking at would record an impression for something never seen, and the reader would come back to a modal they did not summon in a context they have forgotten. The switch away is remembered; the offer opens on the way back, which is the first moment they can act on it. */ var switchedAway = false; document.addEventListener('visibilitychange', function () { if (document.hidden) { switchedAway = true; return; } if (!switchedAway) return; switchedAway = false; onLeave({ clientY: -1, relatedTarget: null }); }); } /* ========================================================================= * THE URGENCY BAR. * * The strip above the header promises a document, so its link opens the * email dialog in place instead of navigating: the reader is one field away * from the thing they were promised, on the page they were already reading. * It is the same panel and the same send path as the exit offer, which means * the same email and the same PDF — a reader who converts here must not get * a thinner reply than one who converts in the article. * * NONE of the exit-intent gates apply. Those exist because the exit panel * interrupts; this one was asked for. So it opens on touch, it opens after a * dismissal, and it opens as many times as it is clicked. * ====================================================================== */ /* The bar's own words become the dialog's. The link text is the promise, so it is the title; the sentence before it is the setup. Splitting the setup at its first full stop or question mark gives the eyebrow and the body — and when there is no split, the whole thing is the body and the eyebrow falls back to the post's ACF copy. Nothing new to author: a bar that reads well as a bar already reads well here. */ function urgencyCopy(link) { var bar = link.closest('.urgency'); var title = (link.textContent || '').trim(); var lead = bar ? (bar.textContent || '').trim() : ''; /* The link's text is inside the bar's, so take it back off the end. */ if (title) if (lead.slice(-title.length) === title) lead = lead.slice(0, -title.length).trim(); var eyebrow = null; var sub = lead; var cut = lead.search(/[?.!]/); if (cut > -1) if (cut < lead.length - 1) { eyebrow = lead.slice(0, cut + 1).trim(); sub = lead.slice(cut + 1).trim(); } return { eyebrow: eyebrow, title: title || null, sub: sub || null, /* No button label of its own — the bar has no field for one, so the post's exit-popup button text (or the default) stands. */ placement: 'urgency_bar' }; } document.addEventListener('click', function (e) { var link = e.target ? (e.target.closest ? e.target.closest('[data-fc-urgency-open]') : null) : null; if (!link) return; if (exitOpen) return; var copy = urgencyCopy(link); /* Nothing to put in the dialog and no ACF copy to fall back on. Better to do nothing than to open an empty panel. */ if (!copy.title) if (!acfExit()) return; openExit(document.body, exitConfig(), copy); }); /* ========================================================================= * DELEGATION. One listener, on document, for the life of the page. * ====================================================================== */ document.addEventListener('click', function (e) { var t = e.target ? (e.target.closest ? e.target.closest('[data-fc-act]') : null) : null; if (!t) return; var root = t.closest('[data-fc-cro]'); if (!root) return; var cfg = configOf(root); if (!cfg) return; var s = stateOf(cfg); var act = t.getAttribute('data-fc-act'); if (act === 'intent') { s.lane = t.getAttribute('data-fc-lane'); /* The intent question is authored per page. On a BOFU comparison post it asks what they are replacing, so the label IS the competitor — the single field that makes the follow-up email writable. The lane vocabulary is deliberately left alone: business/consumer is the contract the sidebar and the exit offer read. */ s.compare = t.textContent.trim(); publish(cfg); track(cfg, 'intent_selected', { intent_lane: s.lane, comparing: s.compare }); if (s.lane === 'consumer') return leave(root, t.getAttribute('data-fc-jump')); return screenPain(root, cfg); } if (act === 'pain') { s.pain = t.textContent.trim(); publish(cfg); /* Each chip names where it goes. Without this every chip led to the same run card, which reads as bait: the answer was recorded but nothing the reader could see changed. A chip with no payload falls back to the run card, so a page with no `payloads` behaves exactly as before. */ var pay = (cfg.payloads || {})[s.pain]; if (pay) { /* Snapshot BEFORE the screen function clears the body. */ if (pay.kind === 'email') { s.stack = []; pushBack(root, s); return screenEmail(root, cfg); } if (pay.kind === 'facts') { s.stack = []; pushBack(root, s); return screenFacts(root, cfg, pay); } } return screenOffer(root, cfg); } if (act === 'back') { var prev = (s.stack || []).pop(); if (!prev) return; var backBody = bodyOf(root); if (!backBody) return; backBody.innerHTML = prev.html; backBody.setAttribute('data-fc-screen', prev.screen); track(cfg, 'offer_back', { pain: s.pain }); return; } if (act === 'replay') { if (s.play) s.play(); return; } if (act === 'approve') { /* `runAction` is the agent's approve verb, so it means the same thing here as the primary CTA: yes, set this up. */ track(cfg, 'offer_clicked', { agent_slug: cfg.agentSlug, pain: s.pain, action: 'run_approve' }); return screenEmail(root, cfg); } if (act === 'dismiss') { /* Stands the card down without costing the reader the offer: the CTAs stay put and the card can be brought back. A dismissal is a no to the demo, not to FieldCamp. */ track(cfg, 'offer_dismissed', { agent_slug: cfg.agentSlug, pain: s.pain }); s.timers.forEach(clearTimeout); s.timers = []; var gone = el('div', 'fc-run-gone'); gone.appendChild(el('p', null, 'Run dismissed. It would have taken one tap in FieldCamp.')); var again = el('button', null, 'Show the run again'); again.type = 'button'; again.setAttribute('data-fc-act', 'restore'); gone.appendChild(again); if (s.runNode) if (s.runNode.parentNode) s.runNode.parentNode.replaceChild(gone, s.runNode); if (s.capNode) if (s.capNode.parentNode) s.capNode.parentNode.removeChild(s.capNode); again.focus(); return; } if (act === 'restore') { track(cfg, 'offer_clicked', { agent_slug: cfg.agentSlug, action: 'run_restore' }); return screenOffer(root, cfg); } if (act === 'secondary') { track(cfg, 'offer_clicked', { agent_slug: cfg.agentSlug, pain: s.pain }); return; /* let the href through */ } if (act === 'to-email') { /* Only the facts screen is safe to snapshot — see pushBack. */ var cur = bodyOf(root); if (cur) if (cur.getAttribute('data-fc-screen') === 'facts') pushBack(root, s); return screenEmail(root, cfg); } if (act === 'send') return submitEmail(root, cfg, t); if (act === 'size') { s.teamSize = t.textContent.trim(); track(cfg, 'offer_clicked', { team_size_bucket: s.teamSize, agent_slug: cfg.agentSlug }); return screenDone(root, cfg); } }); /* ========================================================================= * THE OTHER DIRECTION. The sidebar asks the same question, and a reader who * answers it there has answered it for the whole page — so the block has to * move too. Without this, saying "my own home" in the sidebar swaps the * sidebar to the ordinary CTA while the block carries on asking, which is * the same surface talking to itself that the shared answer exists to stop. * * Only ever moves the block FORWARD, and only from the intent screen: a * reader already deep in the flow is not rewound by a stray event. * ====================================================================== */ document.addEventListener(LANE_EVENT, function (e) { var detail = e ? (e.detail || {}) : {}; if (detail.source === 'block') return; /* our own echo */ var lane = detail.lane; if (!lane) return; var blocks = document.querySelectorAll('[data-fc-cro]'); for (var i = 0; i < blocks.length; i++) { var root = blocks[i]; var cfg = configOf(root); if (!cfg) continue; var s = stateOf(cfg); if (s.lane) continue; /* already answered here */ s.lane = lane; window.fcCro = window.fcCro || {}; window.fcCro.lane = lane; if (lane === 'consumer') { /* The jump target lives on the static consumer button, which is the one place it is authored. */ var opt = root.querySelector('[data-fc-act="intent"][data-fc-lane="consumer"]'); leave(root, opt ? opt.getAttribute('data-fc-jump') : null); continue; } var body = bodyOf(root); if (body) if (body.getAttribute('data-fc-screen') === 'intent') screenPain(root, cfg); } }); /* `focus` does not bubble; `focusin` does. */ document.addEventListener('focusin', function (e) { var input = e.target; if (!input || !input.getAttribute || !input.getAttribute('data-fc-email')) return; var root = input.closest('[data-fc-cro]'); if (!root) return; var cfg = configOf(root); if (!cfg) return; trackOnce(cfg, 'lead_capture_started', { pain: stateOf(cfg).pain }); }); /* ========================================================================= * READY. Runs after `load`, i.e. safely past hydration. It writes nothing * to the DOM — the first screen is already in the static markup — so all it * does is record the impression. A refresh therefore always starts over. * ====================================================================== */ function ready() { var blocks = document.querySelectorAll('[data-fc-cro]'); for (var i = 0; i < blocks.length; i++) { var cfg = configOf(blocks[i]); if (!cfg) continue; trackOnce(cfg, 'intent_prompt_viewed'); } armExit(document.body, exitConfig()); } /* setTimeout, NOT requestAnimationFrame. A background tab — a middle-click, a cmd+click, a restored session — never paints, so rAF never fires and both the impression and the session restore would sit queued until the reader happened to focus the tab. A macrotask after `load` is just as safely past hydration and runs whether or not the tab is visible. */ if (document.readyState === 'complete') { setTimeout(ready, 0); } else { window.addEventListener('load', function () { setTimeout(ready, 0); }); } })();

Test sg