Install · Verofax Investor Copilot

Copilot-style briefing section with inline answers and AI Investor Host.

Investors ask a question and the answer appears right there in the section — no sidebar popup, no jarring "chat widget opens" transition. Left column: ask experience with inline conversation. Right column: AI Investor Host card featuring Wassim. The floating pill stays as a secondary always-on entry point. Deep-link: #investor-copilot lands the investor directly in the section.

Live preview — the real embedded section is rendered below this paragraph. Click a chip → answer renders inline in the same section. Type a question in the ask input → same. The floating pill bottom-right stays available as an alternative surface.

Investor Q&A · Live

Ask Verofax Investor Copilot

Ask about traction, Verofans, FC Barcelona, sports monetization, round terms and next steps.

Try a prompt

📥 Request Investor Deck 📅 Book a Meeting 🔐 Request Data Room Access

Responses are provided for investor briefing purposes only. Additional materials and detailed diligence information can be shared directly by the Verofax team.

1 The embedded briefing section (primary experience)

Above is the actual live section — same code you'll paste. Section ID: investor-copilot. Placement on the WordPress investor page: after your traction / proof / sports growth sections, before the final CTA section.

Deep-link from an investor email:

https://verofax.com/invest-in-verofax-enterprise-ai-sports-technology-platform/#investor-copilot

Answers render inline in the same card — no sidebar popup, no separate widget. Ask → user bubble on the right → thinking dots → AI answer bubble on the left. "Ask another question" resets the section back to chips. Feels like Microsoft Copilot, not a support chatbot.

Paste this block into a WordPress Custom HTML block:

<section id="investor-copilot"> <style> #investor-copilot * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } #investor-copilot { display: block; margin: 80px auto; max-width: 1240px; padding: 0 24px; scroll-margin-top: 80px; } #investor-copilot .vic-card { background: radial-gradient(ellipse at top left, rgba(74,158,255,0.18), transparent 55%), radial-gradient(ellipse at bottom right, rgba(96,165,250,0.10), transparent 55%), linear-gradient(180deg, #0a1130 0%, #050a1a 100%); border: 1px solid rgba(74,158,255,0.28); border-radius: 32px; padding: 64px 56px; color: #fff; box-shadow: 0 40px 100px rgba(0,0,0,0.5); transition: border-color 0.5s ease, box-shadow 0.5s ease; } #investor-copilot.vic-highlight .vic-card { border-color: rgba(74,158,255,0.7); box-shadow: 0 0 0 3px rgba(74,158,255,0.35), 0 40px 100px rgba(74,158,255,0.28); } @media (max-width: 720px) { #investor-copilot .vic-card { padding: 40px 26px; border-radius: 22px; } } #investor-copilot .vic-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; } @media (min-width: 900px) { #investor-copilot .vic-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; } } #investor-copilot .vic-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #4A9EFF; margin: 0 0 24px; } #investor-copilot .vic-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); } #investor-copilot .vic-title { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 18px; color: #fff; max-width: 640px; } #investor-copilot .vic-sub { font-size: 16.5px; line-height: 1.6; color: #94a3b8; margin: 0 0 36px; max-width: 580px; } #investor-copilot .vic-ask { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(74,158,255,0.22); border-radius: 20px; padding: 14px 18px; margin: 0 0 32px; transition: all 0.2s ease; } #investor-copilot .vic-ask:focus-within { border-color: rgba(74,158,255,0.6); background: rgba(74,158,255,0.06); box-shadow: 0 24px 44px -22px rgba(74,158,255,0.5); } #investor-copilot .vic-ask-orb { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 45%), linear-gradient(135deg, #002060, #4A9EFF); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; box-shadow: 0 8px 22px rgba(74,158,255,0.45); position: relative; } #investor-copilot .vic-ask-orb::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #10B981; border: 2px solid #050a1a; } #investor-copilot .vic-ask-input { flex: 1; background: transparent; border: none; color: #fff; font-size: 15.5px; padding: 12px 0; outline: none; font-family: inherit; } #investor-copilot .vic-ask-input::placeholder { color: #64748b; } #investor-copilot .vic-ask-send { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #002060, #4A9EFF); border: none; color: #fff; cursor: pointer; display: grid; place-items: center; transition: all 0.2s ease; flex-shrink: 0; } #investor-copilot .vic-ask-send:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(74,158,255,0.45); } #investor-copilot .vic-ask-send svg { width: 17px; height: 17px; } #investor-copilot .vic-chip-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #64748b; margin: 0 0 14px; } #investor-copilot .vic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 44px; } #investor-copilot .vic-chip { padding: 9px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.18s ease; line-height: 1.2; font-family: inherit; } #investor-copilot .vic-chip:hover { background: rgba(74,158,255,0.12); border-color: rgba(74,158,255,0.45); transform: translateY(-1px); } #investor-copilot .vic-chip.special { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.3); color: #FBBF24; } #investor-copilot .vic-chip.special:hover { background: rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.5); } #investor-copilot .vic-conv { margin: 0 0 44px; display: flex; flex-direction: column; gap: 12px; } #investor-copilot .vic-conv[hidden] { display: none; } #investor-copilot .vic-msg { display: flex; gap: 12px; align-items: flex-start; animation: vicIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes vicIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #investor-copilot .vic-msg.user { justify-content: flex-end; } #investor-copilot .vic-msg-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #002060, #4A9EFF); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex-shrink: 0; box-shadow: 0 6px 16px rgba(74,158,255,0.35); } #investor-copilot .vic-msg-bubble { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px 16px 16px 16px; padding: 16px 20px; font-size: 14.5px; line-height: 1.65; color: #fff; max-width: 88%; } #investor-copilot .vic-msg.user .vic-msg-bubble { background: linear-gradient(135deg, #002060, #4A9EFF); border-color: transparent; color: #fff; border-radius: 16px 6px 16px 16px; font-weight: 500; max-width: 78%; } #investor-copilot .vic-msg-bubble b, #investor-copilot .vic-msg-bubble strong { color: #60A5FA; font-weight: 700; } #investor-copilot .vic-msg-bubble a { color: #60A5FA; text-decoration: underline; } #investor-copilot .vic-msg-title { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #60A5FA; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } #investor-copilot .vic-msg-title::before { content: "✦"; } #investor-copilot .vic-thinking { display: flex; gap: 5px; padding: 16px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px 16px 16px 16px; width: 68px; } #investor-copilot .vic-thinking span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: vicThink 1.4s infinite; } #investor-copilot .vic-thinking span:nth-child(2) { animation-delay: 0.2s; } #investor-copilot .vic-thinking span:nth-child(3) { animation-delay: 0.4s; } @keyframes vicThink { 0%, 60%, 100% { transform: scale(1); opacity: 0.4; } 30% { transform: scale(1.25); opacity: 1; } } #investor-copilot .vic-conv-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; padding-left: 46px; } #investor-copilot .vic-conv-reset { background: rgba(255,255,255,0.04); border: 1px solid rgba(74,158,255,0.25); color: #4A9EFF; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 5px; } #investor-copilot .vic-conv-reset:hover { background: rgba(74,158,255,0.12); border-color: rgba(74,158,255,0.5); } #investor-copilot .vic-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 28px; } @media (min-width: 640px) { #investor-copilot .vic-ctas { grid-template-columns: repeat(3, 1fr); } } #investor-copilot .vic-cta { padding: 14px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; transition: all 0.18s ease; display: block; font-family: inherit; } #investor-copilot .vic-cta:hover { background: rgba(74,158,255,0.14); border-color: rgba(74,158,255,0.4); transform: translateY(-1px); } #investor-copilot .vic-cta.primary { background: linear-gradient(135deg, #002060, #4A9EFF); border-color: transparent; } #investor-copilot .vic-cta.primary:hover { box-shadow: 0 12px 26px rgba(74,158,255,0.4); } #investor-copilot .vic-disclaimer { font-size: 12px; color: #64748b; line-height: 1.6; text-align: left; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); margin: 0; } #investor-copilot .vic-host { position: relative; background: radial-gradient(ellipse at top, rgba(74,158,255,0.15), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(74,158,255,0.22); border-radius: 24px; padding: 32px 28px 28px; text-align: center; } #investor-copilot .vic-host-live { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #10B981; background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.3); padding: 4px 10px; border-radius: 999px; } #investor-copilot .vic-host-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10B981; animation: vicPulse 1.6s infinite; } @keyframes vicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.5);} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0);} } #investor-copilot .vic-host-portrait { width: 160px; height: 160px; margin: 20px auto; border-radius: 50%; position: relative; background: linear-gradient(155deg, #002060 0%, #4A9EFF 100%); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 3px rgba(74,158,255,0.15), 0 20px 50px -14px rgba(74,158,255,0.5), inset 0 0 60px rgba(255,255,255,0.05); } #investor-copilot .vic-host-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } #investor-copilot .vic-host-portrait .vic-host-svg { width: 100%; height: 100%; position: relative; z-index: 1; display: none; } #investor-copilot .vic-host-portrait.fallback img { display: none; } #investor-copilot .vic-host-portrait.fallback .vic-host-svg { display: block; } #investor-copilot .vic-host-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: #fff; } #investor-copilot .vic-host-title { font-size: 12.5px; font-weight: 600; color: #94a3b8; margin: 0 0 18px; } #investor-copilot .vic-host-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(74,158,255,0.15)); border: 1px solid rgba(251,191,36,0.35); color: #FBBF24; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; } #investor-copilot .vic-host-badge::before { content: "✦"; font-size: 12px; } #investor-copilot .vic-host-sub { font-size: 13.5px; line-height: 1.6; color: #94a3b8; margin: 0 auto; max-width: 260px; } </style> <div class="vic-card"> <div class="vic-grid">  <div> <div class="vic-eyebrow">Investor Q&A · Live</div> <h2 class="vic-title">Ask Verofax Investor Copilot</h2> <p class="vic-sub">Ask about traction, Verofans, FC Barcelona, sports monetization, round terms and next steps.</p> <form class="vic-ask" data-vic-ask-form autocomplete="off"> <div class="vic-ask-orb">V</div> <input class="vic-ask-input" type="text" placeholder="Ask a question about Verofax, Verofans or the current round"> <button type="submit" class="vic-ask-send" aria-label="Send"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> </button> </form> <div class="vic-chip-label" data-vic-chips-label>Try a prompt</div> <div class="vic-chips" data-vic-chips> <button type="button" class="vic-chip" data-vic-ask="opportunity">Investment Case</button> <button type="button" class="vic-chip" data-vic-ask="traction">Traction</button> <button type="button" class="vic-chip" data-vic-ask="verofans">Verofans</button> <button type="button" class="vic-chip" data-vic-ask="sportsMoney">Sports Growth</button> <button type="button" class="vic-chip" data-vic-ask="barca">FC Barcelona</button> <button type="button" class="vic-chip" data-vic-ask="round">Round Terms</button> <button type="button" class="vic-chip" data-vic-ask="demos">Demos</button> <button type="button" class="vic-chip special" data-vic-capture="meeting">Book Meeting</button> </div>  <div class="vic-conv" data-vic-conv hidden></div> <div class="vic-ctas"> <a class="vic-cta primary" href="#" data-vic-capture="deck">📥 Request Investor Deck</a> <a class="vic-cta" href="https://calendly.com/verofax-ai-talk-to-us/30min" target="_blank" rel="noopener">📅 Book a Meeting</a> <a class="vic-cta" href="#" data-vic-capture="dataroom">🔐 Request Data Room Access</a> </div> <p class="vic-disclaimer">Responses are provided for investor briefing purposes only. Additional materials and detailed diligence information can be shared directly by the Verofax team.</p> </div>  <aside class="vic-host"> <div class="vic-host-live">Live</div> <div class="vic-host-portrait"> <img alt="Wassim Merheby" src="https://cdn.prod.website-files.com/69554112f09d4a3da335320a/696e17b7575ab3b8f802d567_SEF-Speakers---Web-197.png" onerror="this.parentNode.classList.add('fallback')"> <svg class="vic-host-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="hostBg" cx="30%" cy="25%" r="80%"><stop offset="0" stop-color="#60A5FA" stop-opacity=".6"/><stop offset="1" stop-color="#002060" stop-opacity="0"/></radialGradient> <linearGradient id="hostSil" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#0a1a3d"/><stop offset="1" stop-color="#050a1a"/></linearGradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#hostBg)"/><circle cx="100" cy="82" r="30" fill="url(#hostSil)"/> <path d="M42 200 Q42 138 100 138 Q158 138 158 200 Z" fill="url(#hostSil)"/><text x="100" y="88" font-family="Inter,sans-serif" font-size="24" font-weight="800" fill="#4A9EFF" text-anchor="middle">WM</text> </svg> </div> <div class="vic-host-name">Wassim Merheby</div> <div class="vic-host-title">CEO & Founder · Verofax</div> <div class="vic-host-badge">AI Investor Host</div> <p class="vic-host-sub">Ask about Verofax, Verofans and the current round.</p> </aside> </div> </div> </section>  <script> window.VerofaxInvestorCopilotConfig = { apiUrl: null, // backend endpoint (null → mailto fallback) calendly: "https://calendly.com/verofax-ai-talk-to-us/30min", dataRoomEmail: "wassim@verofax.com" }; </script>  <script src="https://growth.verofax.com/verofax-copilot.js" defer></script>  <script> (function() { function ready(fn) { if (window.VerofaxCopilot && typeof VerofaxCopilot.getAnswer === 'function') return fn(); setTimeout(function() { ready(fn); }, 100); } ready(function() { var root = document.getElementById('investor-copilot'); if (!root) return; var conv = root.querySelector('[data-vic-conv]'); var chipsWrap = root.querySelector('[data-vic-chips]'); var chipsLabel = root.querySelector('[data-vic-chips-label]'); function esc(s) { return String(s || '').replace(/[<>]/g, function(c) { return c === '<' ? '<' : '>'; }); } function showThread() { chipsWrap.style.display = 'none'; chipsLabel.style.display = 'none'; conv.hidden = false; } function resetThread() { conv.innerHTML = ''; conv.hidden = true; chipsWrap.style.display = ''; chipsLabel.style.display = ''; } function appendUser(text) { var m = document.createElement('div'); m.className = 'vic-msg user'; m.innerHTML = '<div class="vic-msg-bubble">' + esc(text) + '</div>'; conv.appendChild(m); } function appendThinking() { var m = document.createElement('div'); m.className = 'vic-msg'; m.innerHTML = '<div class="vic-msg-avatar">V</div><div class="vic-thinking"><span></span><span></span><span></span></div>'; conv.appendChild(m); return m; } function appendAnswer(kb) { var m = document.createElement('div'); m.className = 'vic-msg'; m.innerHTML = '<div class="vic-msg-avatar">V</div><div class="vic-msg-bubble"><div class="vic-msg-title">' + esc(kb.title) + '</div>' + kb.body + '</div>'; conv.appendChild(m); } function appendReset() { var a = document.createElement('div'); a.className = 'vic-conv-actions'; a.innerHTML = '<button type="button" class="vic-conv-reset">← Ask another question</button>'; a.querySelector('.vic-conv-reset').addEventListener('click', resetThread); conv.appendChild(a); } function askInline(key, questionText) { var kb = VerofaxCopilot.getAnswer(key); if (!kb) return; showThread(); appendUser(questionText || key); var t = appendThinking(); setTimeout(function() { t.remove(); appendAnswer(kb); appendReset(); }, 700); } function askInlineFree(query) { var key = VerofaxCopilot.matchIntent(query); if (key) return askInline(key, query); showThread(); appendUser(query); var t = appendThinking(); setTimeout(function() { t.remove(); appendAnswer({ title: 'One for Wassim', body: 'Not something I have solid detail on. Wassim can go deeper on it directly — happy to route you. Try <b>Investment Case</b>, <b>Traction</b>, <b>Verofans</b>, <b>FC Barcelona</b> or <b>Round Terms</b>.' }); appendReset(); }, 700); } // Chip click → inline answer root.querySelectorAll('[data-vic-ask]').forEach(function(el) { el.addEventListener('click', function(e) { e.preventDefault(); askInline(el.dataset.vicAsk, el.textContent); }); }); // CTAs / Book Meeting chip → open lead capture in floating panel root.querySelectorAll('[data-vic-capture]').forEach(function(el) { el.addEventListener('click', function(e) { e.preventDefault(); VerofaxCopilot.openLeadCapture(el.dataset.vicCapture); }); }); // Free-text ask input → inline answer var form = root.querySelector('[data-vic-ask-form]'); if (form) { form.addEventListener('submit', function(e) { e.preventDefault(); var inp = form.querySelector('.vic-ask-input'); var q = (inp.value || '').trim(); if (!q) return; askInlineFree(q); inp.value = ''; }); } // #investor-copilot anchor function handleAnchor() { if (window.location.hash !== '#investor-copilot') return; setTimeout(function() { root.scrollIntoView({ behavior: 'smooth', block: 'start' }); root.classList.add('vic-highlight'); setTimeout(function() { root.classList.remove('vic-highlight'); }, 2800); setTimeout(function() { var inp = root.querySelector('.vic-ask-input'); if (inp) inp.focus({ preventScroll: true }); }, 900); }, 400); } handleAnchor(); window.addEventListener('hashchange', handleAnchor); }); })(); </script>

Where to paste this in WordPress: Open the investor page in the editor → click + Add block → search for Custom HTML → paste the entire block above → click Update. Preview the page.

Placement: after your traction / proof / sports growth sections, before the final CTA.

2 What's different from a typical chat widget

Answers render inline, not in a sidebar

Investor asks → the ask input stays where it is → chips fade out → a conversation thread appears in the same section with user bubble (navy gradient, right-aligned) and AI answer (with the "V" avatar + eyebrow title + body copy). "← Ask another question" resets back to chips. Feels like Microsoft Copilot, not like a customer-support chatbot.

Floating pill still available

The bottom-right pill still works as a secondary voice-first surface. It uses the same knowledge base. Some investors prefer the floating panel; both are supported.

AI Investor Host on the right

Wassim's photo (loaded from your Webflow CDN URL) in a circular frame with subtle glow. Below: name, title, gold "AI Investor Host" badge, subline. If the image fails to load for any reason, an on-brand SVG placeholder with WM initials shows instead.

Careful language + human tone preserved

"MOU signed" not "signed partnership" · "projected $9M+" not "$9M booked" · "seven active LOIs / commercial discussions" not "seven signed clubs" · "up to 50× performance" as historical reference · Sharp investor-relations voice, not chatbot voice

3 Configuration

4 JavaScript API

// Open / close the floating panel VerofaxCopilot.open(); VerofaxCopilot.close(); // Open the floating panel + auto-ask a KB topic VerofaxCopilot.ask('opportunity'); // 14 topics available // INLINE helpers (used by the embedded section — no panel open) VerofaxCopilot.getAnswer('barca'); // returns { key, title, body } VerofaxCopilot.matchIntent('Why FC Barca?'); // returns 'barca' or null VerofaxCopilot.getChipLabel('barca'); // returns the widget's default question label // Lead capture form (opens in the floating panel) VerofaxCopilot.openLeadCapture('meeting'); // meeting | deck | dataroom | partnership // Send free-text into the floating panel (with voice/text output) VerofaxCopilot.handleFreeText('What is Verofans?');