Email Signature Generator

Create professional HTML email signatures with custom templates, logos, and social links. Compatible with Gmail, Outlook, Apple Mail, and all major email clients.

πŸ“ Design Your Signature

Choose Template

Modern
Modern
Classic
Classic
Minimal
Minimal
Professional
Professional

Personal Information

Contact Information

Images & Logo

Social Media Links

Design Customization

Additional Information

πŸ‘οΈ Live Preview

Fill in your information to see the signature preview

πŸ“„ HTML Code

Copy this HTML code and paste it into your email client's signature settings.

πŸ“š How to Install Your Email Signature

Gmail
Outlook
Apple Mail
Yahoo Mail

Gmail Instructions:

  1. Open Gmail and click the Settings gear icon
  2. Select "See all settings"
  3. Scroll down to the "Signature" section
  4. Click "Create new" and give it a name
  5. Paste your HTML signature in the text box
  6. Scroll down and click "Save Changes"

Outlook Instructions:

  1. Open Outlook and go to File > Options
  2. Select "Mail" from the left sidebar
  3. Click "Signatures..." button
  4. Click "New" to create a new signature
  5. Paste your HTML signature in the editor
  6. Set as default for new messages and replies
  7. Click "OK" to save

Apple Mail Instructions:

  1. Open Apple Mail and go to Mail > Preferences
  2. Click the "Signatures" tab
  3. Select the email account in the left column
  4. Click the "+" button to add a new signature
  5. Paste your HTML signature in the right panel
  6. Choose this signature as default if desired

Yahoo Mail Instructions:

  1. Open Yahoo Mail and click Settings gear icon
  2. Select "More Settings"
  3. Click "Writing email" from the left menu
  4. Scroll down to "Signature" section
  5. Paste your HTML signature in the text area
  6. Click "Save" to apply changes

πŸ’Ό Building Your Professional Brand?

Find business cards, marketing materials, and branding resources

πŸƒ Business Cards 🎨 Design Tools πŸ”— LinkedIn Profile πŸ“§ Email Marketing

Smart Nation's Core Infrastructure: WIA Code

DroneΒ·Robot delivery, autonomous driving, emergency rescue and more - Experience the future in 30 days, completely free for your nation!

Learn More About WIA Code

πŸ€– Choose Your AI Assistant

πŸ’¬ ChatGPT
Best for email signature design tips
β†’ chat.openai.com
🧠 Claude
Perfect for professional communication advice
β†’ claude.ai
✨ Gemini FREE
Free help with business branding
β†’ gemini.google.com
Get AI help with your email signature design
`; const blob = new Blob([fullHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `email-signature-${signatureData.fullName.replace(/\s+/g, '-').toLowerCase()}.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showNotification('Signature downloaded!', 'success'); trackEvent('signature_downloaded'); } // Download HTML file function downloadHTML() { const htmlCode = document.getElementById('htmlOutput').value; if (!htmlCode.trim()) { showNotification('Please generate a signature first', 'error'); return; } const blob = new Blob([htmlCode], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `signature-code-${Date.now()}.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showNotification('HTML file downloaded!', 'success'); trackEvent('html_downloaded'); } // ========== UTILITY FUNCTIONS ========== // Show notification toast function showNotification(message, type = 'success') { const toast = document.createElement('div'); toast.className = `toast ${type}`; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.remove(); }, 3000); } // Show OTA section function showOTA() { const otaContainer = document.getElementById('otaContainer'); if (otaContainer && (otaContainer.style.display === 'none' || !otaContainer.style.display)) { otaContainer.style.display = 'block'; } } // Analytics tracking function trackEvent(eventName, data = {}) { if (typeof gtag !== 'undefined') { gtag('event', eventName, { 'event_category': TOOL_CONFIG.category, 'event_label': TOOL_CONFIG.name, ...data }); } } // ========== AI ASSISTANT FUNCTIONS ========== function openAIModal() { const modal = document.getElementById('aiModal'); modal.classList.add('show'); } function closeAIModal() { const modal = document.getElementById('aiModal'); modal.classList.remove('show'); } function selectAI(aiType) { switch(aiType) { case 'chatgpt': const toolContext = `I'm using an Email Signature Generator tool. I need help with professional email signature design, business communication, or branding advice.`; const chatUrl = `https://chat.openai.com/?q=${encodeURIComponent(toolContext)}`; window.open(chatUrl, '_blank'); closeAIModal(); trackEvent('ai_selection', { ai_type: 'chatgpt' }); break; case 'claude': const claudeContext = `I'm using an Email Signature Generator tool. I need help with professional email signature design, business communication, or branding advice.`; const claudeUrl = `https://claude.ai/chat?q=${encodeURIComponent(claudeContext)}`; window.open(claudeUrl, '_blank'); closeAIModal(); trackEvent('ai_selection', { ai_type: 'claude' }); break; case 'gemini': const geminiContext = `I'm using an Email Signature Generator tool. I need help with professional email signature design, business communication, or branding advice.`; const geminiUrl = `https://gemini.google.com/?q=${encodeURIComponent(geminiContext)}`; window.open(geminiUrl, '_blank'); closeAIModal(); trackEvent('ai_selection', { ai_type: 'gemini' }); break; } } // ========== EVENT LISTENERS ========== document.addEventListener('DOMContentLoaded', function() { // Template selection document.querySelectorAll('.template-option').forEach(option => { option.addEventListener('click', function() { document.querySelectorAll('.template-option').forEach(opt => opt.classList.remove('active')); this.classList.add('active'); generateSignature(); }); }); // Form field changes const formFields = [ 'fullName', 'jobTitle', 'company', 'department', 'email', 'phone', 'website', 'address', 'linkedin', 'twitter', 'facebook', 'instagram', 'primaryColor', 'fontFamily', 'quote', 'disclaimer' ]; formFields.forEach(fieldId => { const field = document.getElementById(fieldId); if (field) { field.addEventListener('input', generateSignature); field.addEventListener('change', generateSignature); } }); // File uploads document.getElementById('profilePhoto').addEventListener('change', generateSignature); document.getElementById('companyLogo').addEventListener('change', generateSignature); // Color picker sync document.getElementById('primaryColor').addEventListener('input', function() { document.getElementById('primaryColorText').value = this.value; generateSignature(); }); document.getElementById('primaryColorText').addEventListener('input', function() { if (/^#[0-9A-F]{6}$/i.test(this.value)) { document.getElementById('primaryColor').value = this.value; generateSignature(); } }); // Instruction tabs document.querySelectorAll('.instruction-tab').forEach(tab => { tab.addEventListener('click', function() { const tabId = this.dataset.tab; // Update active tab document.querySelectorAll('.instruction-tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); // Update active content document.querySelectorAll('.instruction-content').forEach(content => { content.classList.remove('active'); }); document.getElementById(`${tabId}-instructions`).classList.add('active'); }); }); // AI modal events document.getElementById('aiBtn').addEventListener('click', openAIModal); document.getElementById('aiModal').addEventListener('click', function(e) { if (e.target === this) closeAIModal(); }); // ESC key to close modal document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeAIModal(); }); // Initialize updateCurrentYear(); updateToolCount(); trackEvent('page_view', { tool: TOOL_CONFIG.name, category: TOOL_CONFIG.category }); }); // ========== DYNAMIC TOOL COUNT ========== async function updateToolCount() { try { const response = await fetch('/api/tool-count.php'); const data = await response.json(); document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${data.count}+ free online tools in 206 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${data.count}+ ${suffix}`; }); } catch (error) { const fallbackCount = 333; document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${fallbackCount}+ free online tools in 206 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${fallbackCount}+ ${suffix}`; }); } } function updateCurrentYear() { const currentYear = new Date().getFullYear(); document.querySelectorAll('.current-year').forEach(el => { el.textContent = currentYear; }); } // ========== ANALYTICS ========== window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXX');