Online Tiered Pricing Structure Tool

Online Tiered Pricing Structure Tool

Design and visualize your pricing plans with ease.

Please configure at least one pricing tier.

`; return; } forms.forEach(form => { const name = form.querySelector('.tier-name').value; const price = form.querySelector('.tier-price').value; const freq = form.querySelector('.tier-freq').value; const features = form.querySelector('.tier-features').value.split('\n').filter(f => f.trim() !== ''); const cta = form.querySelector('.tier-cta').value; const highlight = form.querySelector('.tier-highlight').value; let featureList = features.map(f => `
  • ${f}
  • `).join(''); const card = `

    ${name}

    $${price} ${freq}
      ${featureList}
    `; pricingCardsWrapper.innerHTML += card; }); }; const downloadPDF = () => { const displayContainer = document.getElementById('pricing-display-container'); const { jsPDF } = window.jspdf; // Temporarily make the container wider for better PDF capture on narrow screens const originalWidth = displayContainer.style.width; displayContainer.style.width = '1000px'; html2canvas(displayContainer, { scale: 2 }).then(canvas => { // Restore original width displayContainer.style.width = originalWidth; const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [canvas.width, canvas.height] }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('pricing-tiers.pdf'); }); }; // --- EVENT LISTENERS --- tabButtonsContainer.addEventListener('click', (e) => { if (e.target.matches('.tab-button')) { switchTab(e.target.dataset.tab); } }); prevButton.addEventListener('click', () => { if(currentTab === 'display') switchTab('configure'); }); nextButton.addEventListener('click', () => { if(currentTab === 'configure') switchTab('display'); }); addTierButton.addEventListener('click', () => createTierForm()); generateButton.addEventListener('click', () => { generateDisplay(); switchTab('display'); }); downloadPdfButton.addEventListener('click', downloadPDF); // --- INITIALIZATION --- sampleData.forEach(createTierForm); generateDisplay(); switchTab('configure'); // Start on the first tab });
    Scroll to Top