Create a Professional HTML Email Signature

' + '';frame.onload = function () { try { var doc = frame.contentDocument || frame.contentWindow.document; var height = Math.max( 180, doc.documentElement.scrollHeight || 0, doc.body ? doc.body.scrollHeight : 0 ); frame.style.height = (height + 8) + 'px'; } catch (e) { frame.style.height = '360px'; } };frame.srcdoc = previewContent; }if (code) { code.value = html; }if (status) { status.textContent = 'Preview updated — ' + new Date().toLocaleTimeString(); } }function setTemplate(templateName, clickedButton) { currentTemplate = templateName;root.querySelectorAll('[data-template]').forEach(function (button) { button.classList.remove('as-esb-tab-active'); });if (clickedButton) { clickedButton.classList.add('as-esb-tab-active'); }render(); }function fallbackCopySignature(html) { var holder = document.createElement('div'); holder.setAttribute('contenteditable', 'true'); holder.style.position = 'fixed'; holder.style.left = '-99999px'; holder.style.top = '0'; holder.innerHTML = html; document.body.appendChild(holder);var range = document.createRange(); range.selectNodeContents(holder); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range);var success = false; try { success = document.execCommand('copy'); } catch (e) {}selection.removeAllRanges(); holder.remove(); return success; }function copySignature() { render();var html = generatedHTML(); var status = output('status'); var temp = document.createElement('div'); temp.innerHTML = html; var plain = temp.innerText || temp.textContent || '';if (navigator.clipboard && window.ClipboardItem && navigator.clipboard.write) { var item = new ClipboardItem({ 'text/html': new Blob([html], { type: 'text/html' }), 'text/plain': new Blob([plain], { type: 'text/plain' }) });navigator.clipboard.write([item]).then(function () { if (status) status.textContent = 'Signature copied. Paste it into your email signature settings.'; }).catch(function () { var ok = fallbackCopySignature(html); if (status) status.textContent = ok ? 'Signature copied. Paste it into your email signature settings.' : 'Copy failed. Use Copy HTML instead.'; }); } else { var ok = fallbackCopySignature(html); if (status) status.textContent = ok ? 'Signature copied. Paste it into your email signature settings.' : 'Copy failed. Use Copy HTML instead.'; } }function toggleCode(button) { var code = output('code'); if (!code) return;var hidden = code.classList.toggle('as-esb-codebox-hidden'); if (button) button.textContent = hidden ? 'View HTML' : 'Hide HTML'; }function copyHTML() { render();var code = output('code'); var status = output('status');if (!code) { return; }if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(code.value).then(function () { if (status) status.textContent = 'Signature HTML copied.'; }).catch(function () { code.select(); document.execCommand('copy'); if (status) status.textContent = 'Signature HTML copied.'; }); } else { code.select(); document.execCommand('copy'); if (status) status.textContent = 'Signature HTML copied.'; } }function downloadHTML() { render();var html = output('code') ? output('code').value : ''; var company = value('company') || 'Client'; var safeCompany = company.replace(/[^a-z0-9]+/gi, '_'); var full = '' + html + '';var blob = new Blob([full], { type: 'text/html' }); var url = URL.createObjectURL(blob); var link = document.createElement('a');link.href = url; link.download = safeCompany + '_Email_Signature_' + currentTemplate + '.html';document.body.appendChild(link); link.click(); link.remove();URL.revokeObjectURL(url); }function loadDemo() { var demo = { name: 'Alex Morgan', title: 'Managing Director', company: 'Example Company', tagline: 'Professional services', phone: '+353 1 234 5678', email: 'alex@example.ie', website: 'https://www.example.ie/', webdisplay: 'www.example.ie', address: '10 Example Street, Dublin, Ireland', maps: '', brand: '#2257D6', accent: '#F2F4F7', logo: '', logowidth: '110', logoalt: 'Example Company', cta1label: 'Book a Consultation', cta1url: 'https://www.example.ie/contact/', cta2label: 'View Our Work', cta2url: 'https://www.example.ie/portfolio/', footer: 'Helping clients move forward with confidence.', banner: '', bannerurl: 'https://www.example.ie/', bannerwidth: '520', banneralt: 'Promotional banner' };Object.keys(demo).forEach(function (name) { var el = field(name); if (el) { el.value = demo[name]; } });render(); }function clearAll() { root.querySelectorAll('[data-field]').forEach(function (el) { if (el.getAttribute('data-field') === 'brand') { el.value = '#2257D6'; } else if (el.getAttribute('data-field') === 'accent') { el.value = '#F2F4F7'; } else if (el.getAttribute('data-field') === 'logowidth') { el.value = '110'; } else if (el.getAttribute('data-field') === 'bannerwidth') { el.value = '520'; } else { el.value = ''; } });render(); }root.addEventListener('click', function (event) { var templateButton = event.target.closest('[data-template]'); if (templateButton && root.contains(templateButton)) { setTemplate(templateButton.getAttribute('data-template'), templateButton); return; }var actionButton = event.target.closest('[data-action]'); if (!actionButton || !root.contains(actionButton)) { return; }var action = actionButton.getAttribute('data-action');if (action === 'copy-signature') copySignature(); if (action === 'render') render(); if (action === 'copy') copyHTML(); if (action === 'download') downloadHTML(); if (action === 'toggle-code') toggleCode(actionButton); if (action === 'demo') loadDemo(); if (action === 'clear') clearAll(); });root.addEventListener('input', function (event) { if (event.target.matches('[data-field]')) { window.clearTimeout(root._asEsbTimer); root._asEsbTimer = window.setTimeout(render, 180); } });render(); })();