Campaign StudioLANDING PAGE BUILDER

INTERACTIVE DEMOExport & embed ↗

`} let previewTimer;function renderPreview(){clearTimeout(previewTimer);previewTimer=setTimeout(()=>$('preview').srcdoc=pageHTML(p,true),180)} function download(content,name,type='text/html'){const blob=new Blob([content],{type}),u=URL.createObjectURL(blob),a=document.createElement('a');a.href=u;a.download=name;document.body.append(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(u),1500)} function builderHTML(){const clone=document.documentElement.cloneNode(true);clone.querySelector('#bootData').textContent=jsonSafe(p);clone.querySelector('#panel').innerHTML='';clone.querySelector('#preview').removeAttribute('srcdoc');clone.querySelectorAll('dialog').forEach(d=>d.removeAttribute('open'));clone.querySelector('#toast').classList.add('hidden');clone.querySelector('#codeOutput').textContent='';clone.querySelector('#codeBox').classList.add('hidden');return '\n'+clone.outerHTML} function embed(html,height){return ``} function setEmbed(isBuilder){$('codeOutput').value=embed(isBuilder?builderHTML():pageHTML(p),isBuilder?1350:1000);$('codeBox').classList.remove('hidden');$('codeOutput').focus();$('codeOutput').select()} function moveQuestion(delta){if(recording){toast('Stop recording before changing questions.');return}const to=selected+delta;if(to=p.questions.length)return;remember();[p.questions[selected],p.questions[to]]=[p.questions[to],p.questions[selected]];selected=to;panel();changed()} function renderLeads(){$('leadCount').textContent=leads.length;$('leadsList').innerHTML=leads.length?leads.slice().reverse().map(l=>`

No enquiries yet. Use Test flow and complete the journey to see one here.

'} function saveLeads(){try{localStorage.setItem(LEADS,JSON.stringify(leads))}catch{toast('Enquiry is available this session. Export CSV to keep a copy.')}renderLeads()} async function recordAudio(button){const key=button.dataset.record,scope=button.dataset.scope;if(recording){recording.recorder.stop();return}if(!navigator.mediaDevices?.getUserMedia||!window.MediaRecorder){toast('Recording is unavailable here. Upload an audio file instead.');return}const target=scope==='q'?p.questions[selected]:p;let stream;try{stream=await navigator.mediaDevices.getUserMedia({audio:true});const chunks=[],r=new MediaRecorder(stream);recording={key,scope,recorder:r};button.textContent='■ Stop recording';button.classList.add('recording');r.ondataavailable=e=>{if(e.data.size)chunks.push(e.data)};r.onstop=()=>{stream.getTracks().forEach(t=>t.stop());const reader=new FileReader();reader.onload=()=>{remember();target[key]=reader.result;recording=null;panel();changed();toast('Voice note added.')};reader.readAsDataURL(new Blob(chunks,{type:r.mimeType||'audio/webm'}))};r.start();toast('Recording. Press Stop recording when finished.')}catch(err){stream?.getTracks().forEach(t=>t.stop());recording=null;toast('Microphone access is unavailable. You can upload a voice note instead.')}} $('panel').addEventListener('focusin',ev=>{if(ev.target.matches('[data-key],[data-media-url]'))remember()}); $('panel').addEventListener('input',ev=>{const el=ev.target;if(el.dataset.key){const o=el.dataset.scope==='q'?p.questions[selected]:p;let val=el.type==='checkbox'?el.checked:el.value;if(el.dataset.key==='options')val=val.split('\n').map(x=>x.trim()).filter(Boolean);if(['radius','headlineSize','mediaHeight','contentWidth','sectionPadding'].includes(el.dataset.key))val=Number(val);o[el.dataset.key]=val;if(['radius','headlineSize','mediaHeight','contentWidth','sectionPadding'].includes(el.dataset.key))$(el.dataset.key+'Value').textContent=val+'px';changed()}}); $('panel').addEventListener('change',async ev=>{const el=ev.target;if(el.dataset.key&&['type','layout','font','heroType','mediaType'].includes(el.dataset.key))panel();if(el.dataset.mediaUrl){const url=el.value.trim();if(url&&!safeMedia(url)){toast('Use a direct http or https media URL.');return}remember();(el.dataset.scope==='q'?p.questions[selected]:p)[el.dataset.mediaUrl]=url;panel();changed()}if(el.dataset.upload){const f=el.files[0];if(!f)return;if(f.size>15*1024*1024){toast('Please choose a file smaller than 15 MB or use a direct media URL.');return}const key=el.dataset.upload,scope=el.dataset.scope,typ=el.dataset.typekey,o=scope==='q'?p.questions[selected]:p;const expected=key==='logo'?'image/':['introAudio','audio'].includes(key)?'audio/':null;if((expected&&!f.type.startsWith(expected))||(!expected&&!/^(image|video)\//.test(f.type))){toast('Choose a compatible image, video or audio file.');return}const r=new FileReader();r.onload=()=>{remember();o[key]=r.result;if(typ)o[typ]=f.type.startsWith('video/')?'video':'image';panel();changed();toast('Media added. Export a backup to preserve uploaded files.')};r.onerror=()=>toast('Could not read that file. Please try again.');r.readAsDataURL(f)}}); $('panel').addEventListener('click',ev=>{const el=ev.target.closest('button');if(!el)return;if(recording&&!el.dataset.record){toast('Stop recording before changing the project.');return}if(el.dataset.question!==undefined){if(recording){toast('Stop recording before selecting another question.');return}selected=Number(el.dataset.question);panel()}if(el.dataset.clear){remember();(el.dataset.scope==='q'?p.questions[selected]:p)[el.dataset.clear]='';panel();changed()}if(el.dataset.record)recordAudio(el);if(el.dataset.palette){remember();const palettes={izparo:['#f6f5ef','#ffffff','#151815','#f6e64a'],sage:['#edf0e7','#ffffff','#213026','#d8f36a'],night:['#151c19','#25332c','#f3f5ed','#e8df72'],rose:['#f8efeb','#ffffff','#3c282d','#eab2b7']};[p.background,p.surface,p.text,p.accent]=palettes[el.dataset.palette];panel();changed()}switch(el.id){case 'addQ':if(p.questions.length>=50){toast('This demo supports up to 50 questions.');break}remember();p.questions.push({id:uid(),label:'What else would you like us to know?',type:'textarea',options:[],required:false,help:'',placeholder:'Share a few details…',media:'',mediaType:'image',audio:''});selected=p.questions.length-1;panel();changed();break;case 'upQ':moveQuestion(-1);break;case 'downQ':moveQuestion(1);break;case 'copyQ':if(p.questions.length>=50)break;remember();const copy=structuredClone(p.questions[selected]);copy.id=uid();p.questions.splice(selected+1,0,copy);selected++;panel();changed();break;case 'deleteQ':if(p.questions.lengthb.onclick=()=>{if(recording){toast('Stop recording before changing tabs.');return}tab=b.dataset.tab;panel()}); document.querySelectorAll('[data-device]').forEach(b=>b.onclick=()=>{$('device').className='device '+(b.dataset.device==='desktop'?'':b.dataset.device);document.querySelectorAll('[data-device]').forEach(x=>x.classList.toggle('on',x===b))}); $('undo').onclick=()=>{if(recording){toast('Stop recording before changing the project.');return}if(!undoStack.length)return;redoStack.push(JSON.stringify(p));p=JSON.parse(undoStack.pop());selected=Math.min(selected,p.questions.length-1);panel();changed()};$('redo').onclick=()=>{if(recording){toast('Stop recording before changing the project.');return}if(!redoStack.length)return;undoStack.push(JSON.stringify(p));p=JSON.parse(redoStack.pop());selected=Math.min(selected,p.questions.length-1);panel();changed()}; $('reset').onclick=()=>{if(recording){toast('Stop recording before changing the project.');return}if(confirm('Reset this project to the original demo? Export a backup first if you want to keep your changes.')){remember();p=structuredClone(seed);selected=0;panel();changed()}}; $('testFlow').onclick=()=>{$('preview').contentWindow.postMessage({type:'izparo-start'},'*');if(innerWidth$('exportModal').showModal();document.querySelectorAll('[data-close]').forEach(b=>b.onclick=()=>$(b.dataset.close).close()); $('downloadBuilder').onclick=()=>download(builderHTML(),'IZPARO-Dynamic-Landing-Page-Builder.html');$('downloadPage').onclick=()=>download(pageHTML(p),'IZPARO-Landing-Experience.html');$('embedBuilder').onclick=()=>setEmbed(true);$('embedPage').onclick=()=>setEmbed(false); $('copyCode').onclick=async()=>{try{await navigator.clipboard.writeText($('codeOutput').value);toast('Embed code copied. Paste it into a Brizy Embed element.')}catch{$('codeOutput').focus();$('codeOutput').select();toast('Code selected. Press Ctrl+C or Command+C to copy.')}}; $('backup').onclick=()=>download(JSON.stringify(p,null,2),'IZPARO-Studio-Project.json','application/json');$('importProject').onclick=()=>$('jsonFile').click();$('jsonFile').onchange=async ev=>{if(recording){toast('Stop recording before changing the project.');return}const f=ev.target.files[0];if(!f)return;try{if(f.size>60*1024*1024)throw Error('This project is too large for the demo.');const v=JSON.parse(await f.text());if(!validProject(v))throw Error('This file is not a compatible IZPARO Studio project.');if(new Set(v.questions.map(q=>q.id)).size!==v.questions.length)throw Error('Question IDs must be unique.');remember();p={...seed,...v};selected=0;panel();changed();toast('Project imported.')}catch(e){toast(e.message||'Could not import this project.')}ev.target.value=''}; $('leadsOpen').onclick=()=>{renderLeads();$('leadsModal').showModal()};$('clearLeads').onclick=()=>{if(confirm('Clear the demo enquiries stored in this builder?')){leads=[];saveLeads()}}; $('exportLeads').onclick=()=>{if(!leads.length){toast('Complete a demo enquiry first.');return}const quote=v=>'"'+String(v??'').replace(/"/g,'""')+'"';const clean=v=>/^[=+\-@\t\r]/.test(String(v))?"'"+v:v;const rows=[['ID','Date','Brand','Question','Answer'],...leads.flatMap(l=>l.answers.map(a=>[l.id,l.date,l.brand,a.question,Array.isArray(a.value)?a.value.join('; '):a.value]))];download('\ufeff'+rows.map(r=>r.map(v=>quote(clean(v))).join(',')).join('\r\n'),'IZPARO-Demo-Enquiries.csv','text/csv;charset=utf-8')}; window.addEventListener('message',ev=>{if(ev.source!==$('preview').contentWindow||ev.data?.type!=='izparo-demo-lead')return;const l=ev.data.lead;if(!l||!Array.isArray(l.answers)||!l.date)return;leads.push(l);saveLeads();toast('Demo enquiry captured. View it in Enquiries.')}); panel();renderPreview();renderLeads();historyButtons();$('stepCount').textContent=p.questions.length+' questions'; })();