Interactive Referral Program Landing Page Generator

Interactive Referral Page Generator

Design and generate a landing page for your referral program in real-time.

1. Branding & Content

Company Name

Headline

Sub-headline

2. Offer Details

Referrer's Reward (e.g., "$20 Credit")

Friend's Reward (e.g., "$20 Off")

3. Call to Action

Button Text

4. Styling

Primary Color

Background Color

Live Preview

Referrer's Reward: ${pageConfig.referrerReward}

Friend's Reward: ${pageConfig.friendReward}

Call to Action

Button Text: ${pageConfig.ctaText}

Styling

Primary Color: ${pageConfig.primaryColor}

Background Color: ${pageConfig.bgColor}

`; document.getElementById('pdf-date').textContent = new Date().toLocaleDateString(); const reportEl = document.getElementById('pdf-report'); reportEl.classList.remove('hidden'); const canvas = await html2canvas(reportEl, { scale: 2 }); reportEl.classList.add('hidden'); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'in', format: 'letter' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('Referral-Page-Plan.pdf'); } inputPanel.addEventListener('input', updateConfig); document.getElementById('downloadHtmlBtn').addEventListener('click', downloadHtmlFile); document.getElementById('downloadPdfBtn').addEventListener('click', generatePdf); // Initial Render renderPreview(); });