Client Brief Template Embed
Brief Questions (Editable)
HTML Embed Code
`;
return `${styles.trim()}\n${html.trim()}\n${script.trim()}`;
}
function handleGenerate() {
const { config } = getElements();
state.recipientEmail = config.email.value;
state.widgetTitle = config.title.value;
config.questionsEditor.querySelectorAll('input').forEach(input => {
const index = parseInt(input.dataset.index, 10);
state.questions[index].label = input.value;
});
const fullCode = generateEmbedCode();
const { preview, embedCode } = getElements().output;
preview.innerHTML = fullCode;
embedCode.value = fullCode;
const scriptTag = preview.querySelector('script');
if(scriptTag) {
const newScript = document.createElement('script');
newScript.textContent = scriptTag.textContent;
preview.appendChild(newScript);
scriptTag.remove();
}
changeTab('output');
}
function changeTab(tabName) {
state.currentTab = tabName;
const { tabs, tabContents } = getElements();
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === tabName));
Object.values(tabContents).forEach(content => content.classList.remove('active'));
tabContents[tabName].classList.add('active');
updateNavButtons();
}
function updateNavButtons() {
const { prev, next } = getElements().nav;
prev.style.visibility = state.currentTab === 'output' ? 'visible' : 'hidden';
next.style.visibility = state.currentTab === 'config' ? 'visible' : 'hidden';
const outputTabBtn = document.querySelector('.cbt-tab-button[data-tab="output"]');
if (getElements().output.embedCode.value) {
outputTabBtn.classList.add('enabled');
}
}
async function downloadPdf() {
const { pdfBtn, pdfExportContent, preview, embedCode } = getElements().output;
pdfBtn.textContent = 'Generating...'; pdfBtn.disabled = true;
let configSummary = `
Configuration
Email: ${state.recipientEmail}
Title: ${state.widgetTitle}
Questions:
`;
const sections = [...new Set(state.questions.map(q => q.section))];
sections.forEach(section => {
configSummary += `
${section}
`;
state.questions.filter(q => q.section === section).forEach(q => configSummary += `- ${q.label}
`);
configSummary += `
`;
});
pdfExportContent.innerHTML = `
${configSummary}
Preview
${preview.innerHTML}
Code
${embedCode.value.replace(/`;
document.getElementById('cbt-app-container').classList.add('cbt-pdf-mode');
try {
const canvas = await html2canvas(pdfExportContent, { scale: 1.5, useCORS: true });
const pdf = new jsPDF({ orientation: 'p', unit: 'px', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(canvas.toDataURL('image/png', 0.9), 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Client-Brief-Template.pdf');
} catch (error) { console.error('PDF Error:', error); }
finally {
document.getElementById('cbt-app-container').classList.remove('cbt-pdf-mode');
pdfBtn.textContent = 'Download Template & Code as PDF'; pdfBtn.disabled = false;
}
}
function init() {
if (!document.getElementById('cbt-app-container')) return;
const elements = getElements();
setInitialContent();
elements.tabs.forEach(tab => tab.addEventListener('click', e => { if (e.target.classList.contains('enabled')) changeTab(e.target.dataset.tab); }));
elements.nav.next.addEventListener('click', handleGenerate);
elements.nav.prev.addEventListener('click', () => changeTab('config'));
elements.output.copyBtn.addEventListener('click', () => navigator.clipboard.writeText(elements.output.embedCode.value));
elements.output.pdfBtn.addEventListener('click', downloadPdf);
updateNavButtons();
}
return { init };
})();
document.addEventListener('DOMContentLoaded', cbtApp.init);
