The call

00:00

To: {s.to}

Subject: {s.subject}

Waiting for the call to finish Sent

Sample calls from example businesses — illustrative, not recordings.

); } // ----------------------------------------------------------------- HowLine const HOW_STEPS = [ { n: "01", icon: "phonein", title: "A call comes in.", body: "Every call, the ones you miss, or only after hours — however you set it up. OpenLines picks up as your business." }, { n: "02", icon: "speech", title: "It handles the conversation — or connects a person.", body: "Answers from your script, with optional live checks on websites you list. Captures name, number with read-back, and reason. Can connect to a teammate you name." }, { n: "03", icon: "mail", title: "You get a summary by email.", body: "What was asked, handled, and needs follow-up. Conversations aren't fully recorded — the summary is what you keep." }, { n: "04", icon: "dial", title: "You stay in control.", body: "Script, voice, transfer target, voicemail mode, listed websites — built with you and easy to change." }, ]; function HowLine() { const trackRef = React.useRef(null); const spineRef = React.useRef(null); React.useEffect(() => { const track = trackRef.current; if (!track) return; const steps = [...track.querySelectorAll("[data-hs]")]; const io = new IntersectionObserver( (es) => es.forEach((e) => { if (e.isIntersecting) e.target.classList.add("on"); }), { rootMargin: "0px 0px -30% 0px" } ); steps.forEach((el) => io.observe(el)); const draw = () => { const r = track.getBoundingClientRect(); const seen = Math.min(1, Math.max(0, (innerHeight * 0.75 - r.top) / r.height)); if (spineRef.current) spineRef.current.style.strokeDashoffset = String(1000 * (1 - seen)); }; addEventListener("scroll", draw, { passive: true }); addEventListener("resize", draw, { passive: true }); draw(); return () => { io.disconnect(); removeEventListener("scroll", draw); removeEventListener("resize", draw); }; }, []); return (

{HOW_STEPS.map((s) => (

))}

); } // -------------------------------------------------------------- FitsJourney const BEATS = [ { n: "01", icon: "speech", title: "They ask", body: "In words, or by pressing a key — whichever they reach for first.", said: "“Can I talk to someone?”" }, { n: "02", icon: "reroute", title: "It says so plainly", body: "No hold music, no menu tree, no pretending to be a person.", said: "“Of course — connecting you now.”" }, { n: "03", icon: "ring", title: "Your phone rings", body: "A number you name — your cell, the back office, a direct extension. Never a call centre." }, { n: "04", icon: "talking", title: "You're talking", body: "Same call, same caller. You take it from there." }, ]; function FitsJourney() { const [live, setLive] = React.useState(0); React.useEffect(() => { if (prefersReduced()) return; const id = setInterval(() => setLive((i) => (i + 1) % BEATS.length), 2000); return () => clearInterval(id); }, []); return (

Asking for a person

“Is there someone I can talk to?”

{BEATS.map((b, i) => (

))}

And if you can't pick up? It doesn't dump them into a dead line. The agent comes back on, takes their name, number and reason, reads it back to confirm, and emails it to you — so a missed handoff is still a captured lead. Transfer stays off entirely until you give it a number.

); } // ------------------------------------------------------------ LanguagesGlobe // // three.js is pulled in at runtime with `new Function("return import(...)")`. // A bare `import()` here would be rewritten by @babel/standalone (the page has // no build step and compiles JSX in the browser), so the indirection is what // keeps it a real dynamic import. The URL is fully qualified — no import map // needed — and unpkg is already the origin serving React and Babel. // // If the fetch fails, the greeting card still animates over an empty canvas: // the section reads fine without the globe, so there's no fallback branch. const NAMED = [ { n: "English", g: "Hello", lat: 40, lon: -95 }, { n: "Spanish", g: "Hola", lat: 23, lon: -102 }, { n: "Russian", g: "Привет", lat: 61, lon: 100 }, ]; const OTHERS = [ { lat: 40, lon: -4 }, { lat: 47, lon: 2 }, { lat: 51, lon: 10 }, { lat: 42, lon: 13 }, { lat: -14, lon: -52 }, { lat: 39, lon: -8 }, { lat: 27, lon: 30 }, { lat: 24, lon: 45 }, { lat: 24, lon: 54 }, { lat: 21, lon: 78 }, { lat: 24, lon: 90 }, { lat: 35, lon: 105 }, { lat: 36, lon: 138 }, { lat: 36, lon: 128 }, { lat: -1, lon: 114 }, { lat: 39, lon: 35 }, { lat: 14, lon: 108 }, ]; function LanguagesGlobe() { const stageRef = React.useRef(null); const canvasRef = React.useRef(null); const gRef = React.useRef(null); const nRef = React.useRef(null); React.useEffect(() => { let disposed = false; let raf = 0; let onResize = null; const swaps = []; // Text cycles on its own timer so the section still reads if three fails. let active = 0; const setText = (i) => { const l = NAMED[i]; if (!gRef.current || !nRef.current) return; gRef.current.classList.add("out"); nRef.current.classList.add("out"); swaps.push(setTimeout(() => { if (!gRef.current || !nRef.current) return; gRef.current.textContent = l.g; nRef.current.textContent = l.n; gRef.current.classList.remove("out"); nRef.current.classList.remove("out"); }, 500)); }; new Function('return import("https://unpkg.com/three@0.169.0/build/three.module.js")')() .then((THREE) => { if (disposed || !canvasRef.current) return; const INK = 0x241c12, ACCENT = 0xa04936; const reduced = prefersReduced(); const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(36, 1, 0.1, 100); camera.position.set(0, 0, 13); const globe = new THREE.Group(); scene.add(globe); const R = 4; for (let i = 0; i < 5; i++) { const t = new THREE.Mesh( new THREE.TorusGeometry(R, 0.0045, 6, 140), new THREE.MeshBasicMaterial({ color: INK, transparent: true, opacity: 0.18 }) ); t.rotation.y = (i / 5) * Math.PI; globe.add(t); } [-0.55, 0, 0.55].forEach((y) => { const r = Math.sqrt(Math.max(0.02, 1 - y * y)) * R; const t = new THREE.Mesh( new THREE.TorusGeometry(r, 0.0045, 6, 140), new THREE.MeshBasicMaterial({ color: INK, transparent: true, opacity: 0.14 }) ); t.rotation.x = Math.PI / 2; t.position.y = y * R; globe.add(t); }); const toXYZ = (lat, lon, r = R) => { const phi = ((90 - lat) * Math.PI) / 180, th = ((lon + 180) * Math.PI) / 180; return new THREE.Vector3( -r * Math.sin(phi) * Math.cos(th), r * Math.cos(phi), r * Math.sin(phi) * Math.sin(th) ); }; const others = OTHERS.map((o, i) => { const p = toXYZ(o.lat, o.lon); const d = new THREE.Mesh( new THREE.SphereGeometry(0.052, 8, 6), new THREE.MeshBasicMaterial({ color: INK, transparent: true, opacity: 0.3 }) ); d.position.copy(p); globe.add(d); return { d, p, phase: i * 0.7 }; }); const named = NAMED.map((l) => { const p = toXYZ(l.lat, l.lon); const d = new THREE.Mesh( new THREE.SphereGeometry(0.085, 12, 10), new THREE.MeshBasicMaterial({ color: INK, transparent: true, opacity: 0.55 }) ); d.position.copy(p); const ring = new THREE.Mesh( new THREE.TorusGeometry(0.26, 0.008, 6, 40), new THREE.MeshBasicMaterial({ color: ACCENT, transparent: true, opacity: 0 }) ); ring.position.copy(p); ring.lookAt(p.clone().multiplyScalar(2)); globe.add(d); globe.add(ring); return { d, ring, p }; }); let spin = 0, target = 0, tilt = 0, t0 = 0; const select = (i) => { active = i; const l = NAMED[i]; setText(i); target = -(((l.lon + 180) * Math.PI) / 180) + Math.PI / 2; tilt = THREE.MathUtils.clamp(((l.lat * Math.PI) / 180) * 0.38, -0.38, 0.38); }; const fwd = new THREE.Vector3(0, 0, 1); const size = () => { const el = stageRef.current; if (!el) return; const w = el.clientWidth, h = el.clientHeight; renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); }; const frame = (now) => { if (disposed) return; if (now - t0 > 3400) { t0 = now; select((active + 1) % NAMED.length); } spin += (target - spin) * 0.04; globe.rotation.y = spin; globe.rotation.x += (tilt - globe.rotation.x) * 0.04; others.forEach((o) => { const f = Math.max(0.04, o.p.clone().applyMatrix4(globe.matrixWorld).normalize().dot(fwd)); const br = reduced ? 1 : 0.82 + Math.sin(now * 0.0011 + o.phase) * 0.18; o.d.material.opacity = f * 0.42 * br; }); named.forEach((m, i) => { const f = Math.max(0.04, m.p.clone().applyMatrix4(globe.matrixWorld).normalize().dot(fwd)); const on = i === active; m.d.material.color.setHex(on ? ACCENT : INK); m.d.material.opacity = on ? 1 : f * 0.5; m.d.scale.setScalar(on ? 1.5 : 1); m.ring.material.opacity = on ? 0.75 * f : 0; m.ring.scale.setScalar(on ? 1 + Math.sin(now * 0.003) * 0.12 : 1); }); renderer.render(scene, camera); raf = requestAnimationFrame(frame); }; onResize = size; size(); select(0); raf = requestAnimationFrame(frame); addEventListener("resize", onResize, { passive: true }); }) .catch(() => { // No globe. Keep the greeting rotating so the section still says // something rather than freezing on "Hello". const id = setInterval(() => { active = (active + 1) % NAMED.length; setText(active); }, 3400); swaps.push(id); }); return () => { disposed = true; cancelAnimationFrame(raf); swaps.forEach(clearTimeout); swaps.forEach(clearInterval); if (onResize) removeEventListener("resize", onResize); }; }, []); return (

Languages

English, Spanish, Russian
and more.

Your caller speaks. The agent answers in the same language — mid‑sentence, on the same number.

Detected automatically · nothing to set up

); } // -------------------------------------------------------------- WhoMarquee const MARQUEE_A = [ "Independent shops", "Family-run businesses", "Service businesses", "Trades", "Salons", "Personal-care studios", "Multi-location teams", "Growing teams", ]; const MARQUEE_B = [ "bakeries", "heating & air", "barbers", "auto shops", "florists", "law offices", "gyms", "event venues", "landscapers", "delis", "roofers", "cafés", ]; function Band({ items, rev }) { const doubled = items.concat(items); return ( ); } function WhoMarquee() { return (

{/* The bands are decorative duplicates; this is what a screen reader gets. */}

Independent shops, family-run businesses, service businesses and trades, salons and personal-care studios, and growing multi-location teams — bakeries, heating and air, barbers, auto shops, florists, law offices, gyms, event venues, landscapers, delis, roofers and cafés.

); } Object.assign(window, { CallStory, HowLine, FitsJourney, LanguagesGlobe, WhoMarquee, OL_CALL_SCENARIOS: SCENARIOS }); })();

The call

{s.title}

Asking for a person

{b.title}

English, Spanish, Russian
and more.

The call

Asking for a person

English, Spanish, Russian and more.

English, Spanish, Russian
and more.