https://wata.co/funding-widget.js

1
2(function(){
3 'use strict';
4 
5 
6 
7 
8 
9 const PROD_HOSTS = ['wata.co', 'www.wata.co'];
10 const flag = new URLSearchParams(location.search).get('funding');
11 if (PROD_HOSTS.includes(location.hostname) && flag !== '1') return;
12 const DECK_API = 'https://wata-deck.vercel.app';
13
14 function el(tag, attrs, ...kids) {
15 const e = document.createElement(tag);
16 if (attrs) Object.entries(attrs).forEach(([k, v]) => {
17 if (k === 'style') Object.assign(e.style, v);
18 else if (k.startsWith('on')) e.addEventListener(k.slice(2).toLowerCase(), v);
19 else if (v != null) e.setAttribute(k, v);
20 });
21 kids.forEach(k => k != null && e.append(k.nodeType ? k : document.createTextNode(k)));
22 return e;
23 }
24
25 
26 const css = `
27.wata-fund-pill{
28 /* Bottom-LEFT mirror of #design-toggle (the dev pill). Same bottom
29 value, same z-index, same transition curve so the two pills move
30 in lockstep when the #nudge "free delivery" banner shows/hides.
31 Default: bottom:18px (12px on mobile). Lifts to 74px / 96px when
32 #nudge.show is a sibling earlier in the DOM. */
33 position:fixed;
34 left:18px;
35 bottom:18px;
36 z-index:7000;
37 transition:bottom 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.18s ease, border-color 0.18s ease;
38 display:flex;align-items:center;gap:8px;
39 padding:10px 16px 10px 14px;
40 background:#0a0a0a;color:#f5f3ee;
41 border:1px solid #c5a39b;border-radius:999px;
42 font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
43 font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
44 font-weight:500;cursor:pointer;
45 box-shadow:0 8px 24px -10px rgba(0,0,0,0.4);
46}
47/* Lift exactly the same amount as #design-toggle when the bottom
48 nudge banner is visible. The selectors mirror the dev-pill rules
49 so the two pills land on the same horizontal line. */
50body.alt-design.nudge-on .wata-fund-pill,
51#nudge.show ~ .wata-fund-pill{bottom:74px}
52@media (max-width:720px){
53 .wata-fund-pill{
54 left:12px;
55 bottom:12px;
56 padding:9px 14px 9px 12px;
57 }
58 body.alt-design.nudge-on .wata-fund-pill,
59 #nudge.show ~ .wata-fund-pill{bottom:96px}
60}
61.wata-fund-pill:hover{transform:translateY(-2px);border-color:#fff}
62.wata-fund-pill svg{width:14px;height:14px}
63.wata-fund-modal{
64 position:fixed;inset:0;z-index:10000;
65 background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);
66 display:flex;align-items:center;justify-content:center;
67 padding:20px;
68 font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#f5f3ee;
69}
70.wata-fund-modal[hidden]{display:none}
71.wata-fund-card{
72 background:#111110;border:1px solid rgba(248,245,240,0.12);
73 border-radius:14px;padding:24px 26px;width:100%;max-width:520px;
74 max-height:92vh;overflow:auto;
75}
76.wata-fund-card h2{
77 font-family:'Bebas Neue','Helvetica Neue',Arial,sans-serif;
78 font-size:24px;letter-spacing:0.04em;text-transform:uppercase;
79 margin:0 0 6px;color:#f5f3ee;
80}
81.wata-fund-card .lead{font-size:13px;line-height:1.55;color:rgba(248,245,240,0.7);margin:0 0 18px}
82.wata-fund-row{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
83.wata-fund-row.cols{display:grid;grid-template-columns:1fr 1fr;gap:11px}
84.wata-fund-row.cols > .wata-fund-row{margin:0}
85.wata-fund-row label{
86 font-size:10.5px;letter-spacing:0.20em;text-transform:uppercase;
87 color:rgba(248,245,240,0.55);
88}
89.wata-fund-row input[type=text],
90.wata-fund-row input[type=email],
91.wata-fund-row input[type=tel],
92.wata-fund-row input[type=url],
93.wata-fund-row select,
94.wata-fund-row textarea{
95 background:rgba(248,245,240,0.04);
96 border:1px solid rgba(248,245,240,0.14);
97 border-radius:8px;color:#f5f3ee;
98 padding:9px 12px;font:inherit;font-size:14px;width:100%;box-sizing:border-box;
99}
100/* Force dark background + cream text on the open <option> popup —
101 without this, Chrome / Edge default the popup to white background
102 while the <select>'s color:#f5f3ee inherits, producing an
103 "invisible options" effect (cream text on white). */
104.wata-fund-row select option{
105 background:#0e0e0d;color:#f5f3ee;
106}
107.wata-fund-row select option:checked{
108 background:#1a1a18;color:#fff;
109}
110.wata-fund-row textarea{resize:vertical;min-height:64px;font-family:inherit}
111.wata-fund-row input:focus,.wata-fund-row select:focus,.wata-fund-row textarea:focus{
112 outline:none;border-color:#c5a39b;
113}
114.wata-fund-row.check{flex-direction:row;align-items:center;gap:10px}
115.wata-fund-row.check input{accent-color:#c5a39b;width:16px;height:16px;margin:0}
116.wata-fund-row.check label{
117 text-transform:none;letter-spacing:0.02em;font-size:12.5px;
118 color:rgba(248,245,240,0.85);
119}
120.wata-fund-actions{
121 display:flex;gap:10px;justify-content:flex-end;margin-top:14px;
122 padding-top:14px;border-top:1px solid rgba(248,245,240,0.08);
123}
124.wata-fund-btn{
125 font:inherit;font-size:12px;letter-spacing:0.06em;font-weight:500;
126 padding:10px 18px;border-radius:8px;

126cursor:pointer;
127}
128.wata-fund-btn.primary{background:#c5a39b;color:#0a0a0a;border:0}
129.wata-fund-btn.ghost{background:transparent;color:#f5f3ee;border:1px solid rgba(248,245,240,0.18)}
130.wata-fund-err{color:#ff8a8a;font-size:12px;margin:0;min-height:16px}
131.wata-fund-thanks{text-align:center;padding:24px 8px}
132.wata-fund-thanks h3{
133 font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.04em;
134 text-transform:uppercase;margin:0 0 10px;color:#f5f3ee;
135}
136.wata-fund-thanks p{font-size:13px;color:rgba(248,245,240,0.7);margin:0 0 6px;line-height:1.55}
137@media (max-width:560px){.wata-fund-row.cols{grid-template-columns:1fr}}
138`;
139 document.head.appendChild(el('style', null, css));
140
141 
142 
143 
144 fetch(`${DECK_API}/api/track?info=funding`, { cache: 'no-store' })
145 .then(r => r.ok ? r.json() : null)
146 .then(d => { if (d && d.funding_active) showPill(); })
147 .catch(() => {});
148
149 function showPill() {
150 const pill = el('button', {
151 class: 'wata-fund-pill',
152 type: 'button',
153 'aria-label': 'WATA is funding — request the investor deck',
154 onclick: openModal,
155 },
156 'WE ARE FUNDING',
157 svgArrow(),
158 );
159 document.body.appendChild(pill);
160 }
161
162 function svgArrow() {
163 const ns = 'http://www.w3.org/2000/svg';
164 const s = document.createElementNS(ns, 'svg');
165 s.setAttribute('viewBox', '0 0 24 24');
166 s.setAttribute('fill', 'none');
167 s.setAttribute('stroke', 'currentColor');
168 s.setAttribute('stroke-width', '2.2');
169 s.setAttribute('stroke-linecap', 'round');
170 s.setAttribute('stroke-linejoin', 'round');
171 s.innerHTML = '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/>';
172 return s;
173 }
174
175 function openModal() {
176 const form = el('form', { class: 'wata-fund-form', onsubmit: submit },
177 el('div', { class: 'wata-fund-row' },
178 el('label', { for: 'wf-name' }, 'Full name *'),
179 el('input', { id: 'wf-name', name: 'full_name', type: 'text', required: '', maxlength: '120' }),
180 ),
181 el('div', { class: 'wata-fund-row cols' },
182 el('div', { class: 'wata-fund-row' },
183 el('label', { for: 'wf-email' }, 'Email *'),
184 el('input', { id: 'wf-email', name: 'email', type: 'email', required: '', maxlength: '120' }),
185 ),
186 el('div', { class: 'wata-fund-row' },
187 el('label', { for: 'wf-mobile' }, 'Mobile'),
188 el('input', { id: 'wf-mobile', name: 'mobile', type: 'tel', maxlength: '40', placeholder: '+44…' }),
189 ),
190 ),
191 el('div', { class: 'wata-fund-row cols' },
192 el('div', { class: 'wata-fund-row' },
193 el('label', { for: 'wf-level' }, 'Investment level *'),
194 (() => {
195 const sel = el('select', { id: 'wf-level', name: 'level', required: '' });
196 ['', '£25k–£50k', '£50k–£100k', '£100k–£250k', '£250k–£500k', '£500k+', 'Just exploring']
197 .forEach(v => sel.appendChild(el('option', { value: v }, v || 'Pick one…')));
198 return sel;
199 })(),
200 ),
201 el('div', { class: 'wata-fund-row' },
202 el('label', { for: 'wf-type' }, 'Type'),
203 (() => {
204 const sel = el('select', { id: 'wf-type', name: 'type' });
205 [['', 'Pick one…'], ['solo', 'Solo angel'], ['group', 'Angel group / syndicate'], ['vc', 'VC / fund'], ['family-office', 'Family office'], ['other', 'Other']]
206 .forEach(([v, l]) => sel.appendChild(el('option', { value: v }, l)));
207 return sel;
208 })(),
209 ),
210 ),
211 el('div', { class: 'wata-fund-row' },
212 el('label', { for: 'wf-linkedin' }, 'LinkedIn'),
213 el('input', { id: 'wf-linkedin', name: 'linkedin', type: 'url', maxlength: '200', placeholder: 'https://linkedin.com/in/…' }),
214 ),
215 el('div', { class: 'wata-fund-row' },
216 el('label', { for: 'wf-experience' }, 'Investment experience'),
217 el('textarea', { id: 'wf-experience', name: 'experience', rows: '2', maxlength: '600', placeholder: 'Sectors, recent rounds, anything we should know…' }),
218 ),
219 el('div', { class: 'wata-fund-row check' },
220 el('input', { id: 'wf-eis', name: 'eis', type: 'checkbox' }),
221 el('label', { for: 'wf-eis' }, 'I am interested in EIS tax relief on this investment.'),
222 ),
223 el('div', { class: 'wata-fund-row' },
224 el('label', { for: 'wf-notes' }, 'Anything else?'),
225 el('textarea', { id: 'wf-notes', name: 'notes', rows: '2', maxlength: '600', placeholder: 'Optional…' }),
226 ),
227 el('p', { class: 'wata-fund-err' }),
228 el('div', { class: 'wata-fund-actions' },
229 el('button', { type: 'button', class: 'wata-fund-btn ghost', onclick: closeModal }, 'Cancel'),
230 el('button', { type: 'submit', class: 'wata-fund-btn primary' }, 'Send request'),
231 ),
232 );
233 const card = el('div', { class: 'wata-fund-card' },
234 el('p', { style: { fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(248,245,240,0.55)', margin: '0 0 6px' } }, '— WATA · Seed Round'),
235 el('h2', null, 'Request the investor deck'),
236 el('p', { class: 'lead' }, 'WATA is currently raising. Drop the basics below and we’ll send the deck through within 24h. EIS-eligible.'),
237 form,
238 );
239 const modal = el('div', {
240 class: 'wata-fund-modal',
241 role: 'dialog',
242 'aria-label': 'Request the WATA investor deck',
243 onclick: (e) => { if (e.target === modal) closeModal(); },
244 }, card);
245 document.body.appendChild(modal);
246 setTimeout(() => modal.querySelector('input')?.focus(), 50);
247
248 function closeModal() { modal.remove(); }
249
250 async function submit(e) {
251 e.preventDefault();
252 const fd = new FormData(form);
253 const errEl = form.querySelector('.wata-fund-err');
254 errEl.textContent = '';
255 const submitBtn = form.querySelector('.wata-fund-btn.primary');
256 submitBtn.disabled = true;
257 submitBtn.textContent = 'Sending…';
258 try {
259 const r = await fetch(`${DECK_API}/api/auth/login`, {
260 method: 'POST',
261 headers: { 'Content-Type': 'application/json' },
262 body: JSON.stringify({
263 intent: 'funding',
264 email: String(fd.get('email') || '').trim(),
265 full_name: fd.get('full_name'),
266 mobile: fd.get('mobile'),
267 level: fd.get('level'),
268 type: fd.get('type'),
269 linkedin: fd.get('linkedin'),
270 experience: fd.get('experience'),
271 eis: fd.get('eis') === 'on',
272 notes: fd.get('notes'),
273 }),
274 });
275 if (!r.ok) {
276 errEl.textContent = 'Couldn’t send. Please try again or email [email protected] directly.';
277 submitBtn.disabled = false;
278 submitBtn.textContent = 'Send request';
279 return;
280 }
281 
282 card.innerHTML = '';
283 card.appendChild(el('div', { class: 'wata-fund-thanks' },
284 el('h3', null, 'Cheers — request received.'),
285 el('p', null, 'We’ll review and email you the deck within 24h.'),
286 el('p', null, ''),
287 el('button', { type: 'button', class: 'wata-fund-btn primary', onclick: closeModal }, 'Close'),
288 ));

289 } catch {
290 errEl.textContent = 'Network error. Try again.';
291 submitBtn.disabled = false;
292 submitBtn.textContent = 'Send request';
293 }
294 }
295 }
296})();