{content.eyebrow}
{content.subheadline}
{content.description}
{content.ctaText}
{step.description}
{email_capture.subheadline}
{email_capture.privacy_text}
Crafting your vision board...
{loading_text from reveal page copy}
${service.description}
${service.matchReason} Learn More `; grid.appendChild(card); }); } // ============================================================ // DOWNLOAD BUTTON // ============================================================ document.getElementById('download-btn').addEventListener('click', async () => { const img = document.getElementById('board-graphic'); const imageUrl = img.src; try { // Fetch image as blob for reliable download const response = await fetch(imageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `vision-board-${Date.now()}.jpg`; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); trackEvent('board_downloaded', { profileId: getProfileId() }); } catch (err) { // Fallback: open image in new tab window.open(imageUrl, '_blank'); trackEvent('board_downloaded', { profileId: getProfileId(), method: 'fallback' }); } }); // ============================================================ // SHARE BUTTON // ============================================================ document.getElementById('share-btn').addEventListener('click', async () => { const resultStr = sessionStorage.getItem('vb_result'); const result = resultStr ? JSON.parse(resultStr) : {}; const profileId = result.profileId || ''; const variation = REVEAL_CONFIG.profileVariations[profileId] || {}; const shareText = variation.shareText || `I just built my vision board. Build yours:`; const shareUrl = window.location.origin + '/builder/'; // Try Web Share API first (mobile) if (navigator.share) { try { await navigator.share({ title: `My ${result.profileName || ''} Vision Board`, text: shareText, url: shareUrl }); trackEvent('board_shared', { profileId, method: 'native' }); } catch (err) { // User cancelled or share failed -- no action needed } } else { // Fallback: copy to clipboard (desktop) const copyText = `${shareText} ${shareUrl}`; try { await navigator.clipboard.writeText(copyText); // Show "Copied!" feedback const btn = document.getElementById('share-btn'); const originalText = btn.textContent; btn.textContent = 'Copied!'; setTimeout(() => { btn.textContent = originalText; }, 2000); trackEvent('board_shared', { profileId, method: 'clipboard' }); } catch (err) { // Fallback: prompt with text prompt('Copy this link to share:', copyText); trackEvent('board_shared', { profileId, method: 'prompt' }); } } }); // ============================================================ // CONSULTATION CTA TRACKING // ============================================================ document.getElementById('cta-btn').addEventListener('click', () => { trackEvent('cta_clicked', { profileId: getProfileId(), destination: REVEAL_CONFIG.consultationUrl }); }); // ============================================================ // HELPERS // ============================================================ function getProfileId() { const resultStr = sessionStorage.getItem('vb_result'); return resultStr ? JSON.parse(resultStr).profileId : ''; } // Analytics tracker (same as builder.js -- duplicated because these are independent scripts) function trackEvent(eventType, eventData = {}) { const sessionId = localStorage.getItem('vb_session_id') || crypto.randomUUID(); const utms = JSON.parse(localStorage.getItem('vb_utm_params') || '{}'); fetch('/api/analytics-event', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ session_id: sessionId, event_type: eventType, event_data: eventData, utm_source: utms.utm_source || null, utm_medium: utms.utm_medium || null, utm_campaign: utms.utm_campaign || null, utm_term: utms.utm_term || null, utm_content: utms.utm_content || null, page_url: window.location.href, referrer: document.referrer, user_agent: navigator.userAgent }) }).catch(() => {}); } ``` **Analytics events tracked by reveal.js:** | Event Type | event_data | When | |-----------|-----------|------| | `page_view` | `{ page: 'reveal', profileId }` | Page load | | `board_generated` | `{ profileId, cached }` | Graphic API returns successfully | | `board_downloaded` | `{ profileId, method }` | Download button clicked | | `board_shared` | `{ profileId, method }` | Share button clicked | | `cta_clicked` | `{ profileId, destination }` | Consultation CTA clicked | --- ### deploy/api/visionboard-submit.js (API Endpoint) Vercel Edge Function that saves the lead, stores selections, inserts recommended services, schedules email sequence, sends Day 0 email immediately, and fires webhooks. ```javascript export const config = { runtime: 'edge' }; import { createClient } from '@supabase/supabase-js'; const TABLE_PREFIX = process.env.TABLE_PREFIX || ''; const table = (name) => `${TABLE_PREFIX}${name}`; export default async function handler(req) { // CORS preflight if (req.method === 'OPTIONS') { return new Response(null, { status: 200 }); } if (req.method !== 'POST') { return new Response(JSON.stringify({ error: 'Method not allowed' }), { status: 405 }); } const supabase = createClient( process.env.SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY ); const { email, name, selections, tags, profileId, profileName, qualificationSignal } = await req.json(); // 1. Upsert lead const { data: lead, error: leadError } = await supabase .from(table('leads')) .upsert({ email, name, profile_id: profileId, profile_name: profileName, qualification_signal: qualificationSignal, tags, source: 'vision-board', status: 'active' }, { onConflict: 'email,source' }) .select() .single(); if (leadError) { return new Response(JSON.stringify({ error: 'Lead insert failed', details: leadError.message }), { status: 500 }); } // 2. Store selections (one row per dimension) let selectionsError = null; try { const selectionRows = Object.entries(selections).map(([dimension, data]) => ({ lead_id: lead.id, step_id: dimension, dimension, selected_options: data.selectedOptions, // JSONB selected_labels: data.selectedOptions.map(o => o.label || o.id), tags: data.tags || [] })); const { error } = await supabase .from(table('selections')) .insert(selectionRows); if (error) selectionsError = error.message; } catch (err) { selectionsError = err.message; } // 3. Insert recommended services based on profile let recommendedServices = []; try { // Service recommendations are stored in the REVEAL_CONFIG on the client // but the API receives the profileId and can look up recommendations // For now, the client-side sends the profileId and the email templates // reference the profile for recommendations } catch (err) { // Non-critical -- continue } // 4. Schedule email sequence based on qualification signal await scheduleEmails(supabase, lead.id, qualificationSignal); // 5. Send Day 0 email immediately (if RESEND_API_KEY configured) const RESEND_API_KEY = process.env.RESEND_API_KEY; if (RESEND_API_KEY) { try { const { data: template } = await supabase .from(table('email_templates')) .select('subject, body_html, sender_name') .eq('email_id', 'WELCOME-01') .single(); if (template) { const firstName = name?.split(' ')[0] || 'there'; const subject = interpolate(template.subject, { first_name: firstName, profile_name: profileName }); const bodyHtml = interpolate(template.body_html, { first_name: firstName, profile_name: profileName, profile_description: getProfileDescription(profileName), board_url: `${process.env.SITE_URL || ''}/reveal/?leadId=${lead.id}`, consultation_url: process.env.CONSULTATION_URL || '', cta_based_on_qualification: getQualificationCTA(qualificationSignal) }); const resendResponse = await fetch('https://api.resend.com/emails', { method: 'POST', headers: { 'Authorization': `Bearer ${RESEND_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ from: `${template.sender_name || 'Vision Board'} <${process.env.EMAIL_FROM || 'hello@yourdomain.com'}>`, to: [email], subject, html: wrapEmailHtml(bodyHtml) }) }); const emailStatus = resendResponse.ok ? 'sent' : 'failed'; await supabase.from(table('email_log')) .update({ status: emailStatus, sent_at: emailStatus === 'sent' ? new Date().toISOString() : null }) .eq('lead_id', lead.id) .eq('email_id', 'WELCOME-01'); } } catch (emailSendError) { console.error('Immediate email send error:', emailSendError); await supabase.from(table('email_log')) .update({ status: 'failed', error_message: emailSendError.message }) .eq('lead_id', lead.id) .eq('email_id', 'WELCOME-01'); } } // 6. Fire Gumloop webhook (non-blocking) const GUMLOOP_WEBHOOK_URL = process.env.GUMLOOP_WEBHOOK_URL; if (GUMLOOP_WEBHOOK_URL) { fetch(GUMLOOP_WEBHOOK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ event: 'vision_board_completed', leadId: lead.id, email, name, profileId, profileName, qualificationSignal, tags, completedAt: new Date().toISOString() }) }).catch(err => console.error('Gumloop webhook error:', err)); } // 7. Return response return new Response(JSON.stringify({ success: true, leadId: lead.id, profileId, profileName, qualification: qualificationSignal, _debug: { selectionsError, tablePrefix: TABLE_PREFIX } }), { status: 200, headers: { 'Content-Type': 'application/json' } }); } // ============================================================ // HELPER FUNCTIONS (must be defined here, not shared modules) // Vercel Edge Functions are independently bundled. // ============================================================ function interpolate(template, data) { let result = template; for (const [key, value] of Object.entries(data)) { result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), value || ''); } return result; } function getProfileDescription(profileName) { // Return profile-specific description from embedded config // (populated from architecture.md during build) const descriptions = { // '{Profile Name}': '{description}' }; return descriptions[profileName] || ''; } function getQualificationCTA(qualification) { // Return HTML button appropriate for qualification level const ctas = { hot: 'Book Your Consultation', warm: 'Explore Our Portfolio', cool: 'Get More Inspiration' }; return ctas[qualification] || ctas.warm; } function wrapEmailHtml(bodyHtml) { // Wrap body in styled HTML email template with inline CSS return `