Work Videographer Editing Blog Contact Call or Text 480.400.0156 Book My Free Call
Used for canonical URL and footer link.

Headline & Pitch

The hero copy. Keep the headline punchy — 6-10 words.

Contact & CTAs

Where prospects go when they want to work with you.

Calendly, Cal.com, GHL booking widget, or any URL. The hero CTA button links here.

Track Record

Defaults are Maken Media's actual delivery numbers — true if you white-label with us. Replace any stat with your own to keep it clean.

Testimonials

3 client quotes. Leave any blank to hide that slot. You can paste in your own clients' words, or borrow framing from real Maken Media reviews.

Testimonial 1

Testimonial 2

Testimonial 3

Footer Attribution

Small line at the bottom of the generated page. Keep it on to support continued white-label support; turn it off if you'd rather it look like 100% in-house work.

Page generated.
`; const TESTIMONIAL_CARD = `
"{{QUOTE}}"
{{NAME}}
{{ROLE}}
`; const TESTIMONIALS_WRAPPER = `
What clients say

Don't take our word for it.

{{CARDS}}
`; // Trivial token substitution. Tokens that aren't in the map become ''. function substituteAll(template, map) { return template.replace(/\{\{(\w+)\}\}/g, (_, key) => (map[key] ?? '')); } function escapeHtml(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); } function escapeAttr(s) { return escapeHtml(s); } function readForm() { const v = id => document.getElementById(id).value.trim(); const checked = id => document.getElementById(id).checked; return { agencyName: v('agency_name'), logoUrl: v('logo_url'), accent: v('accent_color') || '#e11418', siteUrl: v('site_url'), headline: v('headline'), subhead: v('subhead'), contactEmail: v('contact_email'), phone: v('phone'), bookingUrl: v('booking_url') || `mailto:${v('contact_email')}`, statVideos: v('stat_videos'), statClients: v('stat_clients'), statViews: v('stat_views'), statTurnaround: v('stat_turnaround'), statIndustries: v('stat_industries'), testimonials: [1,2,3].map(i => ({ name: v(`t${i}_name`), role: v(`t${i}_role`), quote: v(`t${i}_quote`) })).filter(t => t.quote), showAttribution: checked('show_attribution'), }; } // Builds the final HTML by filling the template tokens. function buildHtml(f) { const logoHtml = f.logoUrl ? `${escapeAttr(f.agencyName)}` : escapeHtml(f.agencyName); // Last word of the headline gets the accent color const words = f.headline.split(' '); const headlineHtml = words.length > 1 ? `${escapeHtml(words.slice(0, -1).join(' '))} ${escapeHtml(words[words.length - 1])}` : escapeHtml(f.headline); const cards = f.testimonials.map(t => substituteAll(TESTIMONIAL_CARD, { QUOTE: escapeHtml(t.quote), NAME: escapeHtml(t.name) || 'Anonymous', ROLE: escapeHtml(t.role), })).join('\n '); const testimonialsBlock = f.testimonials.length ? substituteAll(TESTIMONIALS_WRAPPER, { CARDS: cards }) : ''; const contactBits = []; if (f.contactEmail) contactBits.push(`${escapeHtml(f.contactEmail)}`); if (f.phone) contactBits.push(escapeHtml(f.phone)); const contactFooter = contactBits.length ? ` · ${contactBits.join(' · ')}` : ''; const contactLine = f.contactEmail ? `Email ${escapeHtml(f.contactEmail)} or book a call directly.` : 'Book a free call below.'; const attribution = f.showAttribution ? `Production powered by Maken Media` : ''; return substituteAll(TEMPLATE, { SITE_URL: escapeAttr(f.siteUrl || '#'), AGENCY_NAME: escapeHtml(f.agencyName), SUBHEAD: escapeHtml(f.subhead), ACCENT: escapeAttr(f.accent), LOGO_HTML: logoHtml, BOOKING_URL: escapeAttr(f.bookingUrl), HEADLINE_HTML: headlineHtml, STAT_VIDEOS: escapeHtml(f.statVideos), STAT_CLIENTS: escapeHtml(f.statClients), STAT_VIEWS: escapeHtml(f.statViews), STAT_TURNAROUND: escapeHtml(f.statTurnaround), STAT_INDUSTRIES: escapeHtml(f.statIndustries), TESTIMONIALS_BLOCK: testimonialsBlock, CONTACT_LINE: contactLine, CONTACT_FOOTER: contactFooter, YEAR: new Date().getFullYear(), ATTRIBUTION: attribution, }); } function slugify(s) { return String(s || 'agency').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'').slice(0, 50); } function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2400); } document.getElementById('builder').addEventListener('submit', (e) => { e.preventDefault(); const f = readForm(); if (!f.agencyName) { document.getElementById('agency_name').focus(); return; } const html = buildHtml(f); const blob = new Blob([html], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${slugify(f.agencyName)}-video-editing.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast('Downloaded. Open the file or upload to your site.'); }); document.getElementById('preview-btn').addEventListener('click', () => { const f = readForm(); if (!f.agencyName) { document.getElementById('agency_name').focus(); return; } const html = buildHtml(f); const blob = new Blob([html], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); window.open(url, '_blank'); }); // Live-update the accent color for the builder page itself so users see what // the brand color choice looks like before downloading. document.getElementById('accent_color').addEventListener('input', (e) => { document.documentElement.style.setProperty('--accent', e.target.value); }); // Pre-fill from query params so the onboarding flow can deep-link an agency // straight into a half-filled form (e.g. ?agency=Acme&email=...&booking=...). (function prefillFromQuery() { const q = new URLSearchParams(window.location.search); const map = { agency: 'agency_name', name: 'agency_name', logo: 'logo_url', color: 'accent_color', site: 'site_url', headline: 'headline', subhead: 'subhead', email: 'contact_email', phone: 'phone', booking: 'booking_url', }; let touched = false; for (const [key, fieldId] of Object.entries(map)) { const val = q.get(key); if (val == null) continue; const el = document.getElementById(fieldId); if (!el) continue; el.value = val; touched = true; } const color = q.get('color'); if (color) document.documentElement.style.setProperty('--accent', color); if (touched) showToast('Form pre-filled from your onboarding info.'); })();