{"id":48208,"date":"2025-09-26T16:03:18","date_gmt":"2025-09-26T14:03:18","guid":{"rendered":"https:\/\/www.investglass.com\/?page_id=48208"},"modified":"2025-10-28T11:35:44","modified_gmt":"2025-10-28T10:35:44","slug":"sjabloon-voor-e-mailhandtekening-generator","status":"publish","type":"page","link":"https:\/\/www.investglass.com\/nl\/email-signature-template-generator\/","title":{"rendered":"Sjabloongenerator voor e-mailhandtekeningen"},"content":{"rendered":"<h1>Email Signature Template Generator<\/h1>\n<div>Create your free email signature with our easy-to-use signature generator<\/div>\n<div>\n<div id=\"ig-main-content\" style=\"display: grid; grid-template-columns: 300px 1fr 1fr; gap: 0; min-height: 800px;\">\n<p>        <!-- Sidebar Navigation --><\/p>\n<div id=\"ig-sidebar\" style=\"background: #6B7280; color: white; padding: 0;\">\n<div class=\"ig-sidebar-item ig-active\" onclick=\"igShowStep('details')\" style=\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; background: #374151; border-left: 4px solid #10B981;\">\n                <span>Details<\/span>\n            <\/div>\n<div class=\"ig-sidebar-item\" onclick=\"igShowStep('images')\" style=\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px;\">\n                <span>Images<\/span>\n            <\/div>\n<div class=\"ig-sidebar-item\" onclick=\"igShowStep('templates')\" style=\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px;\">\n                <span>Templates<\/span>\n            <\/div>\n<div class=\"ig-sidebar-item\" onclick=\"igShowStep('styles')\" style=\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px;\">\n                <span>Styles<\/span>\n            <\/div>\n<\/p><\/div>\n<p>        <!-- Form Section --><\/p>\n<div id=\"ig-form-section\" style=\"padding: 40px; background: #F8FAFC; border-right: 1px solid #E2E8F0; overflow-y: auto; max-height: 800px;\">\n<p>            <!-- Step 1: Details --><\/p>\n<div id=\"ig-details\" class=\"ig-step-content ig-active\" style=\"display: block;\">\n<h2 style=\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\">Enter Your Signature Details<\/h2>\n<p style=\"color: #64748B; margin-bottom: 24px; font-size: 14px;\">* Indicates a required field<\/p>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\">\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">First Name <span style=\"color: #EF4444;\">*<\/span><\/label><br \/>\n                        <input type=\"text\" id=\"ig-firstName\" placeholder=\"Alexandre\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Last Name <span style=\"color: #EF4444;\">*<\/span><\/label><br \/>\n                        <input type=\"text\" id=\"ig-lastName\" placeholder=\"Gaillard\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Job Title<\/label><br \/>\n                    <input type=\"text\" id=\"ig-jobTitle\" placeholder=\"Senior Investment Advisor\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Department<\/label><br \/>\n                    <input type=\"text\" id=\"ig-department\" placeholder=\"Wealth Management\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Company Name<\/label><br \/>\n                    <input type=\"text\" id=\"ig-company\" placeholder=\"InvestGlass\" value=\"InvestGlass\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\">\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Office Phone Number<\/label><br \/>\n                        <input type=\"tel\" id=\"ig-officePhone\" placeholder=\"+41 22 123 4567\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Mobile Phone Number<\/label><br \/>\n                        <input type=\"tel\" id=\"ig-mobilePhone\" placeholder=\"+41 79 123 4567\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Website URL<\/label><br \/>\n                    <input type=\"url\" id=\"ig-website\" placeholder=\"www.investglass.com\" value=\"www.investglass.com\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Email Address<\/label><br \/>\n                    <input type=\"email\" id=\"ig-email\" placeholder=\"alexandre.gaillard@investglass.com\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<h3 style=\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\">Address<\/h3>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Address Line 1<\/label><br \/>\n                    <input type=\"text\" id=\"ig-address1\" placeholder=\"5 Rue des Alpes\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\">\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">City<\/label><br \/>\n                        <input type=\"text\" id=\"ig-city\" placeholder=\"Geneva\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">State\/Province<\/label><br \/>\n                        <input type=\"text\" id=\"ig-state\" placeholder=\"Geneva\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\">\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">ZIP\/Postal Code<\/label><br \/>\n                        <input type=\"text\" id=\"ig-zipCode\" placeholder=\"1201\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Country<\/label><br \/>\n                        <input type=\"text\" id=\"ig-country\" placeholder=\"Switzerland\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<h3 style=\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\">Enter Your Social Links<\/h3>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">LinkedIn<\/label><br \/>\n                    <input type=\"url\" id=\"ig-linkedin\" placeholder=\"https:\/\/www.linkedin.com\/in\/yourprofile\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Facebook<\/label><br \/>\n                    <input type=\"url\" id=\"ig-facebook\" placeholder=\"https:\/\/www.facebook.com\/yourprofile\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">X \/ Twitter<\/label><br \/>\n                    <input type=\"url\" id=\"ig-twitter\" placeholder=\"https:\/\/www.x.com\/yourprofile\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Instagram<\/label><br \/>\n                    <input type=\"url\" id=\"ig-instagram\" placeholder=\"https:\/\/www.instagram.com\/yourprofile\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">WhatsApp<\/label><br \/>\n                    <input type=\"url\" id=\"ig-whatsapp\" placeholder=\"https:\/\/wa.me\/41791234567\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<h3 style=\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\">Custom Fields<\/h3>\n<div id=\"ig-customFields\"><\/div>\n<div onclick=\"igAddCustomField()\" style=\"background: #F0F9FF; color: #0369A1; border: 2px dashed #BAE6FD; padding: 12px; border-radius: 8px; cursor: pointer; text-align: center; margin-top: 12px;\">\n                    + Add a field\n                <\/div>\n<h3 style=\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\">Email Signature Footer<\/h3>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Legal Content<\/label><br \/>\n                    <textarea id=\"ig-legalContent\" rows=\"3\" placeholder=\"This email and any attachments are confidential...\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box; resize: vertical;\"><\/textarea>\n                <\/div>\n<\/p><\/div>\n<p>            <!-- Step 2: Images --><\/p>\n<div id=\"ig-images\" class=\"ig-step-content\" style=\"display: none;\">\n<h2 style=\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\">Signature Images<\/h2>\n<p style=\"color: #64748B; margin-bottom: 24px;\">Add your profile photo or logo to enhance your email signature! Use images from your own hosted website.<\/p>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Profile Picture<\/label><br \/>\n                    <input type=\"url\" id=\"ig-profilePicture\" placeholder=\"https:\/\/example.com\/images\/myphoto.jpg\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\"><br \/>\n                    <small style=\"color: #64748B; font-size: 12px;\">Recommended size: 80x80px<\/small>\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Company Logo<\/label><br \/>\n                    <input type=\"url\" id=\"ig-companyLogo\" placeholder=\"https:\/\/example.com\/images\/logo.jpg\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\"><br \/>\n                    <small style=\"color: #64748B; font-size: 12px;\">Recommended size: 120x40px<\/small>\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Handwritten Signature<\/label><br \/>\n                    <input type=\"url\" id=\"ig-handwrittenSignature\" placeholder=\"https:\/\/example.com\/images\/signature.jpg\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\"><br \/>\n                    <small style=\"color: #64748B; font-size: 12px;\">Use your signature image from your own hosted website<\/small>\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Custom CTA Image<\/label><br \/>\n                    <input type=\"url\" id=\"ig-customCTA\" placeholder=\"https:\/\/example.com\/images\/cta-button.jpg\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\"><br \/>\n                    <small style=\"color: #64748B; font-size: 12px;\">Upload a custom call-to-action button image<\/small>\n                <\/div>\n<\/p><\/div>\n<p>            <!-- Step 3: Templates --><\/p>\n<div id=\"ig-templates\" class=\"ig-step-content\" style=\"display: none;\">\n<h2 style=\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\">Select Your Template<\/h2>\n<div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;\">\n                    <!-- Template 1: Classic with divider --><\/p>\n<div class=\"ig-template-card ig-selected\" onclick=\"igSelectTemplate(1)\" data-template=\"1\" style=\"border: 2px solid #6366F1; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: #F0F9FF;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; flex-direction: column; gap: 6px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40%;\"><\/div>\n<div style=\"height: 1px; background: #FF4500; border-radius: 1px; width: 80%; margin: 4px 0;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 1<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Classic layout with divider<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 2: Photo with contact info --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(2)\" data-template=\"2\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; gap: 12px; align-items: flex-start;\">\n<div style=\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 4px; flex-shrink: 0;\"><\/div>\n<div style=\"flex: 1; display: flex; flex-direction: column; gap: 4px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 2<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Photo with contact info<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 3: Horizontal layout --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(3)\" data-template=\"3\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; gap: 12px; align-items: center;\">\n<div style=\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 4px; flex-shrink: 0;\"><\/div>\n<div style=\"flex: 1; display: flex; flex-direction: column; gap: 3px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40%;\"><\/div>\n<\/p><\/div>\n<div style=\"display: flex; flex-direction: column; gap: 2px;\">\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 30px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 25px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 3<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Horizontal layout<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 4: Logo on right --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(4)\" data-template=\"4\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; justify-content: space-between; align-items: flex-start;\">\n<div style=\"display: flex; flex-direction: column; gap: 4px; flex: 1;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\"><\/div>\n<\/p><\/div>\n<div style=\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 4px; margin-left: 12px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 4<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Logo on right<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 5: Minimal left --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(5)\" data-template=\"5\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; justify-content: space-between; align-items: center;\">\n<div style=\"display: flex; flex-direction: column; gap: 4px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70px;\"><\/div>\n<\/p><\/div>\n<div style=\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 50%;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 5<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Minimal left<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 6: Two column --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(6)\" data-template=\"6\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; gap: 12px;\">\n<div style=\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 4px; flex-shrink: 0; margin-top: 2px;\"><\/div>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1;\">\n<div style=\"display: flex; flex-direction: column; gap: 3px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 100%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70%;\"><\/div>\n<\/p><\/div>\n<div style=\"display: flex; flex-direction: column; gap: 3px;\">\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 60%;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 6<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Two column<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 7: Photo left with CTA --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(7)\" data-template=\"7\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; gap: 12px; align-items: flex-start;\">\n<div style=\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%; flex-shrink: 0;\"><\/div>\n<div style=\"flex: 1; display: flex; flex-direction: column; gap: 4px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\"><\/div>\n<div style=\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px; margin-top: 4px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 7<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Photo left with CTA<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 8: Centered with photo --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(8)\" data-template=\"8\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;\">\n<div style=\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%; margin-bottom: 4px;\"><\/div>\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70%;\"><\/div>\n<div style=\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px; margin-top: 4px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 8<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Centered with photo<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 9: Right aligned --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(9)\" data-template=\"9\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; justify-content: space-between; align-items: flex-start;\">\n<div style=\"display: flex; flex-direction: column; gap: 4px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70px;\"><\/div>\n<div style=\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 30px; margin-top: 4px;\"><\/div>\n<\/p><\/div>\n<div style=\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 9<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Right aligned<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 10: Compact with photo --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(10)\" data-template=\"10\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; flex-direction: column; gap: 6px;\">\n<div style=\"display: flex; gap: 8px; align-items: center;\">\n<div style=\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 50%; flex-shrink: 0;\"><\/div>\n<div style=\"display: flex; flex-direction: column; gap: 2px; flex: 1;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 10<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Compact with photo<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 11: Minimal right --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(11)\" data-template=\"11\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; justify-content: space-between; align-items: flex-start;\">\n<div style=\"display: flex; flex-direction: column; gap: 4px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40px;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70px;\"><\/div>\n<\/p><\/div>\n<div style=\"display: flex; flex-direction: column; align-items: center; gap: 4px;\">\n<div style=\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 50%;\"><\/div>\n<div style=\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 25px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 11<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Minimal right<\/p>\n<\/p><\/div>\n<p>                    <!-- Template 12: Stacked layout --><\/p>\n<div class=\"ig-template-card\" onclick=\"igSelectTemplate(12)\" data-template=\"12\" style=\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\">\n<div style=\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\">\n<div style=\"width: 100%; display: flex; gap: 12px; align-items: flex-start;\">\n<div style=\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%; flex-shrink: 0;\"><\/div>\n<div style=\"flex: 1; display: flex; flex-direction: column; gap: 4px;\">\n<div style=\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 90%;\"><\/div>\n<div style=\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 60%;\"><\/div>\n<div style=\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px; margin-top: 4px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h4>Template 12<\/h4>\n<p style=\"font-size: 12px; color: #64748B;\">Stacked layout<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>            <!-- Step 4: Styles --><\/p>\n<div id=\"ig-styles\" class=\"ig-step-content\" style=\"display: none;\">\n<h2 style=\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\">Style Your Signature<\/h2>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Select Theme Color<\/label><\/p>\n<div style=\"display: flex; align-items: center; gap: 12px;\">\n                        <input type=\"color\" id=\"ig-themeColor\" value=\"#6366F1\" style=\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\"><br \/>\n                        <input type=\"text\" id=\"ig-themeColorText\" value=\"#6366F1\" style=\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Select Text Color<\/label><\/p>\n<div style=\"display: flex; align-items: center; gap: 12px;\">\n                        <input type=\"color\" id=\"ig-textColor\" value=\"#6B7280\" style=\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\"><br \/>\n                        <input type=\"text\" id=\"ig-textColorText\" value=\"#6B7280\" style=\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Select Link Color<\/label><\/p>\n<div style=\"display: flex; align-items: center; gap: 12px;\">\n                        <input type=\"color\" id=\"ig-linkColor\" value=\"#6366F1\" style=\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\"><br \/>\n                        <input type=\"text\" id=\"ig-linkColorText\" value=\"#6366F1\" style=\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<h3 style=\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\">Customize Font<\/h3>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\">\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Font Family<\/label><br \/>\n                        <select id=\"ig-fontFamily\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\"><option value=\"Arial, sans-serif\">Arial<\/option><option value=\"Helvetica, sans-serif\">Helvetica<\/option><option value=\"Georgia, serif\">Georgia<\/option><option value=\"Times New Roman, serif\">Times New Roman<\/option><option value=\"Verdana, sans-serif\">Verdana<\/option><\/select>\n                    <\/div>\n<div>\n                        <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">Font Size<\/label><br \/>\n                        <select id=\"ig-fontSize\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\"><option value=\"12px\">Small<\/option><option value=\"14px\" selected>Medium<\/option><option value=\"16px\">Large<\/option><\/select>\n                    <\/div>\n<\/p><\/div>\n<h3 style=\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\">Add Call to Action<\/h3>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">CTA Button Text<\/label><br \/>\n                    <input type=\"text\" id=\"ig-ctaText\" placeholder=\"Schedule a Meeting\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">CTA Button URL<\/label><br \/>\n                    <input type=\"url\" id=\"ig-ctaUrl\" placeholder=\"https:\/\/calendly.com\/yourlink\" style=\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                <\/div>\n<div style=\"margin-bottom: 24px;\">\n                    <label style=\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\">CTA Button Color<\/label><\/p>\n<div style=\"display: flex; align-items: center; gap: 12px;\">\n                        <input type=\"color\" id=\"ig-ctaColor\" value=\"#6366F1\" style=\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\"><br \/>\n                        <input type=\"text\" id=\"ig-ctaColorText\" value=\"#6366F1\" style=\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\">\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>        <!-- Preview Section --><\/p>\n<div style=\"padding: 40px; background: white; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; max-height: 800px;\">\n<h2 style=\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\">Preview<\/h2>\n<div style=\"background: #F8FAFC; border-radius: 12px; padding: 24px; border: 1px solid #E2E8F0; margin-bottom: 24px;\">\n<div style=\"background: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\">\n<div style=\"border-bottom: 1px solid #E2E8F0; padding-bottom: 12px; margin-bottom: 20px; font-size: 14px; color: #64748B;\">\n                        To: <span style=\"color: #6366F1;\">Your Recipient<\/span><br \/>\n                        Subject: <strong>Check out my new Email Signature<\/strong>\n                    <\/div>\n<div id=\"ig-signaturePreview\" style=\"font-family: Arial, sans-serif; line-height: 1.4;\">\n                        <!-- Signature will be generated here -->\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"display: flex; gap: 12px; margin-bottom: 24px;\">\n                <button type=\"button\" onclick=\"igGenerateSignature()\" style=\"padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%); color: white; transition: all 0.2s ease;\">Generate Signature<\/button><br \/>\n                <button type=\"button\" onclick=\"igClearAllFields()\" style=\"padding: 12px 24px; border: 2px solid #6366F1; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: white; color: #6366F1; transition: all 0.2s ease;\">Clear All<\/button>\n            <\/div>\n<div style=\"padding: 20px; background: #F0F9FF; border-radius: 8px; border: 1px solid #BAE6FD;\">\n<h3 style=\"color: #0369A1; margin: 0 0 12px 0; font-size: 16px;\">Ready to use your signature?<\/h3>\n<p style=\"color: #0369A1; font-size: 14px; margin: 0 0 12px 0;\">Click the button below to copy your signature and paste it into your email client.<\/p>\n<p>                <button type=\"button\" onclick=\"igCopySignature()\" style=\"padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%); color: white;\">Copy Signature HTML<\/button>\n            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><!-- Responsive CSS for mobile --><\/p>\n<style>\n@media (max-width: 1200px) {\n    #ig-main-content {\n        grid-template-columns: 1fr !important;\n    }<\/p>\n<p>    #ig-sidebar {\n        display: flex !important;\n        overflow-x: auto !important;\n    }<\/p>\n<p>    .ig-sidebar-item {\n        white-space: nowrap !important;\n        border-bottom: none !important;\n        border-right: 1px solid #334155 !important;\n    }\n}<\/p>\n<p>@media (max-width: 768px) {\n    #ig-advanced-signature-generator h1 {\n        font-size: 2rem !important;\n    }<\/p>\n<p>    #ig-advanced-signature-generator [style*=\"grid-template-columns: 1fr 1fr\"] {\n        grid-template-columns: 1fr !important;\n    }<\/p>\n<p>    #ig-advanced-signature-generator [style*=\"grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))\"] {\n        grid-template-columns: 1fr !important;\n    }\n}<\/p>\n<p>.ig-sidebar-item:hover {\n    background: #334155 !important;\n}<\/p>\n<p>.ig-template-card:hover {\n    border-color: #6366F1 !important;\n    transform: translateY(-2px) !important;\n}\n<\/style>\n<p><script>\n\/\/ InvestGlass Advanced Signature Generator JavaScript\nlet igSelectedTemplate = 1;\nlet igCustomFieldCount = 0;<\/p>\n<p>\/\/ Navigation\nfunction igShowStep(stepId) {\n    \/\/ Hide all steps\n    document.querySelectorAll('.ig-step-content').forEach(step => {\n        step.style.display = 'none';\n    });<\/p>\n<p>    \/\/ Remove active class from all sidebar items\n    document.querySelectorAll('.ig-sidebar-item').forEach(item => {\n        item.classList.remove('ig-active');\n        item.style.background = '';\n        item.style.borderLeft = '';\n    });<\/p>\n<p>    \/\/ Show selected step\n    document.getElementById('ig-' + stepId).style.display = 'block';<\/p>\n<p>    \/\/ Add active class to clicked sidebar item\n    event.target.closest('.ig-sidebar-item').classList.add('ig-active');\n    event.target.closest('.ig-sidebar-item').style.background = '#374151';\n    event.target.closest('.ig-sidebar-item').style.borderLeft = '4px solid #10B981';<\/p>\n<p>    igUpdatePreview();\n}<\/p>\n<p>\/\/ Template selection\nfunction igSelectTemplate(templateId) {\n    igSelectedTemplate = templateId;<\/p>\n<p>    document.querySelectorAll('.ig-template-card').forEach(card => {\n        card.classList.remove('ig-selected');\n        card.style.borderColor = '#E2E8F0';\n        card.style.background = 'white';\n    });<\/p>\n<p>    const selectedCard = document.querySelector(`[data-template=\"${templateId}\"]`);\n    selectedCard.classList.add('ig-selected');\n    selectedCard.style.borderColor = '#6366F1';\n    selectedCard.style.background = '#F0F9FF';<\/p>\n<p>    igUpdatePreview();\n}<\/p>\n<p>\/\/ Custom fields\nfunction igAddCustomField() {\n    igCustomFieldCount++;\n    const customFieldsContainer = document.getElementById('ig-customFields');\n    const fieldDiv = document.createElement('div');\n    fieldDiv.className = 'ig-custom-field';\n    fieldDiv.style.cssText = 'display: flex; gap: 8px; align-items: center; margin-bottom: 12px;';\n    fieldDiv.innerHTML = `\n        <input type=\"text\" placeholder=\"Field Label\" id=\"ig-customLabel${igCustomFieldCount}\" style=\"flex: 1; padding: 8px 12px; border: 2px solid #E2E8F0; border-radius: 6px; font-size: 14px; background: white; box-sizing: border-box;\">\n        <input type=\"text\" placeholder=\"Field Value\" id=\"ig-customValue${igCustomFieldCount}\" style=\"flex: 1; padding: 8px 12px; border: 2px solid #E2E8F0; border-radius: 6px; font-size: 14px; background: white; box-sizing: border-box;\">\n        <button type=\"button\" onclick=\"igRemoveCustomField(this)\" style=\"background: #FEE2E2; color: #DC2626; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px;\">Remove<\/button>\n    `;\n    customFieldsContainer.appendChild(fieldDiv);<\/p>\n<p>    \/\/ Add event listeners\n    document.getElementById(`ig-customLabel${igCustomFieldCount}`).addEventListener('input', igUpdatePreview);\n    document.getElementById(`ig-customValue${igCustomFieldCount}`).addEventListener('input', igUpdatePreview);\n}<\/p>\n<p>function igRemoveCustomField(button) {\n    button.parentElement.remove();\n    igUpdatePreview();\n}<\/p>\n<p>\/\/ Color picker synchronization\nfunction igSetupColorPickers() {\n    const colorPairs = [\n        ['ig-themeColor', 'ig-themeColorText'],\n        ['ig-textColor', 'ig-textColorText'],\n        ['ig-linkColor', 'ig-linkColorText'],\n        ['ig-ctaColor', 'ig-ctaColorText']\n    ];<\/p>\n<p>    colorPairs.forEach(([pickerId, textId]) => {\n        const picker = document.getElementById(pickerId);\n        const text = document.getElementById(textId);<\/p>\n<p>        if (picker && text) {\n            picker.addEventListener('input', () => {\n                text.value = picker.value;\n                igUpdatePreview();\n            });<\/p>\n<p>            text.addEventListener('input', () => {\n                picker.value = text.value;\n                igUpdatePreview();\n            });\n        }\n    });\n}<\/p>\n<p>\/\/ Generate signature based on template\nfunction igGenerateSignatureHTML() {\n    const data = {\n        firstName: document.getElementById('ig-firstName').value || 'Alexandre',\n        lastName: document.getElementById('ig-lastName').value || 'Gaillard',\n        jobTitle: document.getElementById('ig-jobTitle').value || 'Senior Investment Advisor',\n        department: document.getElementById('ig-department').value || 'Wealth Management',\n        company: document.getElementById('ig-company').value || 'InvestGlass',\n        officePhone: document.getElementById('ig-officePhone').value,\n        mobilePhone: document.getElementById('ig-mobilePhone').value,\n        email: document.getElementById('ig-email').value || 'alexandre.gaillard@investglass.com',\n        website: document.getElementById('ig-website').value || 'www.investglass.com',\n        address1: document.getElementById('ig-address1').value,\n        city: document.getElementById('ig-city').value,\n        state: document.getElementById('ig-state').value,\n        zipCode: document.getElementById('ig-zipCode').value,\n        country: document.getElementById('ig-country').value,\n        linkedin: document.getElementById('ig-linkedin').value,\n        facebook: document.getElementById('ig-facebook').value,\n        twitter: document.getElementById('ig-twitter').value,\n        instagram: document.getElementById('ig-instagram').value,\n        whatsapp: document.getElementById('ig-whatsapp').value,\n        profilePicture: document.getElementById('ig-profilePicture').value,\n        companyLogo: document.getElementById('ig-companyLogo').value,\n        handwrittenSignature: document.getElementById('ig-handwrittenSignature').value,\n        legalContent: document.getElementById('ig-legalContent').value,\n        themeColor: document.getElementById('ig-themeColor').value,\n        textColor: document.getElementById('ig-textColor').value,\n        linkColor: document.getElementById('ig-linkColor').value,\n        fontFamily: document.getElementById('ig-fontFamily').value,\n        fontSize: document.getElementById('ig-fontSize').value,\n        ctaText: document.getElementById('ig-ctaText').value,\n        ctaUrl: document.getElementById('ig-ctaUrl').value,\n        ctaColor: document.getElementById('ig-ctaColor').value\n    };<\/p>\n<p>    \/\/ Build address\n    let address = '';\n    if (data.address1) address += data.address1;\n    if (data.city) address += (address ? ', ' : '') + data.city;\n    if (data.state) address += (address ? ', ' : '') + data.state;\n    if (data.zipCode) address += (address ? ' ' : '') + data.zipCode;\n    if (data.country) address += (address ? ', ' : '') + data.country;<\/p>\n<p>    \/\/ Build contact info\n    let contactInfo = '';\n    if (data.officePhone) contactInfo += `\ud83d\udcde <a href=\"tel:${data.officePhone.replace(\/\\s\/g, '')}\" style=\"color: ${data.linkColor}; text-decoration: none;\">${data.officePhone}<\/a>`;\n    if (data.mobilePhone) contactInfo += `${data.officePhone ? ' | ' : ''}\ud83d\udcf1 <a href=\"tel:${data.mobilePhone.replace(\/\\s\/g, '')}\" style=\"color: ${data.linkColor}; text-decoration: none;\">${data.mobilePhone}<\/a>`;\n    if (data.officePhone || data.mobilePhone) contactInfo += '<br \/>';\n    if (data.email) contactInfo += `\u2709\ufe0f <a href=\"mailto:${data.email}\" style=\"color: ${data.linkColor}; text-decoration: none;\">${data.email}<\/a><br \/>`;\n    if (data.website) contactInfo += `\ud83c\udf10 <a href=\"https:\/\/${data.website.replace(\/^https?:\\\/\\\/\/, '')}\" style=\"color: ${data.linkColor}; text-decoration: none;\">${data.website}<\/a><br \/>`;\n    if (address) contactInfo += `\ud83d\udccd ${address}`;<\/p>\n<p>    \/\/ Build social links\n    let socialLinks = '';\n    const socials = [\n        { url: data.linkedin, style: 'background: #0077B5;', text: 'in' },\n        { url: data.facebook, style: 'background: #1877F2;', text: 'f' },\n        { url: data.twitter, style: 'background: #1DA1F2;', text: '\ud835\udd4f' },\n        { url: data.instagram, style: 'background: #E4405F;', text: '\ud83d\udcf7' },\n        { url: data.whatsapp, style: 'background: #25D366;', text: '\ud83d\udcac' }\n    ];<\/p>\n<p>    socials.forEach(social => {\n        if (social.url) {\n            socialLinks += `${social.text}`;\n        }\n    });<\/p>\n<p>    \/\/ Build custom fields\n    let customFields = '';\n    document.querySelectorAll('.ig-custom-field').forEach((field, index) => {\n        const labelInput = field.querySelector('input[id^=\"ig-customLabel\"]');\n        const valueInput = field.querySelector('input[id^=\"ig-customValue\"]');\n        if (labelInput && valueInput) {\n            const label = labelInput.value;\n            const value = valueInput.value;\n            if (label && value) {\n                customFields += `<\/p>\n<div style=\"font-size: 13px; margin: 4px 0;\">${label}: ${value}<\/div>\n<p>`;\n            }\n        }\n    });<\/p>\n<p>    \/\/ Build CTA button\n    let ctaButton = '';\n    if (data.ctaText && data.ctaUrl) {\n        ctaButton = `${data.ctaText}`;\n    }<\/p>\n<p>    \/\/ Template-specific layouts\n    let signatureHTML = '';<\/p>\n<p>    switch (igSelectedTemplate) {\n        case 1: \/\/ Classic layout with divider\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor};\">\n                    ${data.profilePicture ? `` : ''}<\/p>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 2px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 14px; color: #64748B; margin-bottom: 12px;\">${data.department} | ${data.company}<\/div>\n<div style=\"height: 2px; background: linear-gradient(90deg, ${data.themeColor}, #10B981); margin: 12px 0; border-radius: 1px; clear: both;\"><\/div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                    ${socialLinks ? `<\/p>\n<div style=\"margin: 12px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                    ${customFields}\n                    ${ctaButton}\n                    ${data.handwrittenSignature ? `<\/p>\n<div style=\"margin-top: 12px;\"><\/div>\n<p>` : ''}\n                    ${data.companyLogo ? `<\/p>\n<div style=\"margin-top: 12px;\"><\/div>\n<p>` : ''}\n                    ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 12px; border-top: 1px solid #E2E8F0; padding-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 2: \/\/ Photo with contact info\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: flex-start; gap: 16px;\">\n                    ${data.profilePicture ? `` : ''}<\/p>\n<div>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${customFields}\n                        ${ctaButton}\n                        ${data.handwrittenSignature ? `<\/p>\n<div style=\"margin-top: 8px;\"><\/div>\n<p>` : ''}\n                        ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 3: \/\/ Horizontal layout\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: center; gap: 16px;\">\n                    ${data.profilePicture ? `` : ''}<\/p>\n<div style=\"flex: 1;\">\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 4px;\">${data.jobTitle}<\/div>\n<\/p><\/div>\n<div style=\"font-size: 13px; line-height: 1.6; text-align: right;\">\n                        ${contactInfo}\n                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0; justify-content: flex-end; display: flex;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${ctaButton}\n                    <\/p><\/div>\n<p>                    ${data.companyLogo ? `` : ''}\n                <\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 4: \/\/ Logo on right\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: flex-start;\">\n<div style=\"flex: 1;\">\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${customFields}\n                        ${ctaButton}\n                        ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<p>                    ${data.companyLogo ? `<\/p>\n<div style=\"margin-left: 20px;\"><\/div>\n<p>` : ''}\n                <\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 5: \/\/ Minimal left\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: center;\">\n<div>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${ctaButton}\n                    <\/p><\/div>\n<p>                    ${data.profilePicture ? `` : ''}\n                <\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 6: \/\/ Two column\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; gap: 20px;\">\n                    ${data.profilePicture ? `` : ''}<\/p>\n<div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1;\">\n<div>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<p>                            ${customFields}\n                        <\/p><\/div>\n<div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                            ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                            ${ctaButton}\n                        <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 7: \/\/ Photo left with CTA\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: flex-start; gap: 16px;\">\n                    ${data.profilePicture ? `` : ''}<\/p>\n<div style=\"flex: 1;\">\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6; margin-bottom: 8px;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${ctaButton}\n                        ${customFields}\n                        ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 8: \/\/ Centered with photo\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; text-align: center;\">\n                    ${data.profilePicture ? `<\/p>\n<div style=\"margin-bottom: 12px;\"><\/div>\n<p>` : ''}<\/p>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6; margin-bottom: 12px;\">${contactInfo}<\/div>\n<p>                    ${socialLinks ? `<\/p>\n<div style=\"margin: 12px 0; justify-content: center; display: flex;\">${socialLinks}<\/div>\n<p>` : ''}\n                    ${ctaButton}\n                    ${customFields}\n                    ${data.companyLogo ? `<\/p>\n<div style=\"margin: 12px 0;\"><\/div>\n<p>` : ''}\n                    ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 12px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 9: \/\/ Right aligned\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: flex-start;\">\n<div style=\"text-align: left;\">\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6; margin-bottom: 8px;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${ctaButton}\n                        ${customFields}\n                        ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<p>                    ${data.profilePicture ? `` : ''}\n                <\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 10: \/\/ Compact with photo\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor};\">\n<div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                        ${data.profilePicture ? `` : ''}<\/p>\n<div>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 2px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 4px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.4;\">${contactInfo}<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                    ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                    ${ctaButton}\n                    ${customFields}\n                    ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 11: \/\/ Minimal right\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: flex-start;\">\n<div>\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${customFields}\n                        ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<div style=\"text-align: center; margin-left: 20px;\">\n                        ${data.profilePicture ? `` : ''}\n                        ${ctaButton}\n                    <\/div>\n<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        case 12: \/\/ Stacked layout\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: flex-start; gap: 16px;\">\n                    ${data.profilePicture ? `` : ''}<\/p>\n<div style=\"flex: 1;\">\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle} | ${data.company}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6; margin-bottom: 8px;\">${contactInfo}<\/div>\n<p>                        ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                        ${ctaButton}\n                        ${customFields}\n                        ${data.handwrittenSignature ? `<\/p>\n<div style=\"margin-top: 8px;\"><\/div>\n<p>` : ''}\n                        ${data.companyLogo ? `<\/p>\n<div style=\"margin-top: 8px;\"><\/div>\n<p>` : ''}\n                        ${data.legalContent ? `<\/p>\n<div style=\"font-size: 11px; color: #94A3B8; margin-top: 8px;\">${data.legalContent}<\/div>\n<p>` : ''}<\/p><\/div>\n<\/p><\/div>\n<p>            `;\n            break;<\/p>\n<p>        default:\n            signatureHTML = `<\/p>\n<div style=\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor};\">\n<div style=\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\">${data.firstName} ${data.lastName}<\/div>\n<div style=\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\">${data.jobTitle}<\/div>\n<div style=\"font-size: 13px; line-height: 1.6;\">${contactInfo}<\/div>\n<p>                    ${socialLinks ? `<\/p>\n<div style=\"margin: 8px 0;\">${socialLinks}<\/div>\n<p>` : ''}\n                    ${ctaButton}<\/p><\/div>\n<p>            `;\n    }<\/p>\n<p>    return signatureHTML.trim();\n}<\/p>\n<p>function igUpdatePreview() {\n    const preview = document.getElementById('ig-signaturePreview');\n    if (preview) {\n        preview.innerHTML = igGenerateSignatureHTML();\n    }\n}<\/p>\n<p>function igGenerateSignature() {\n    igUpdatePreview();\n}<\/p>\n<p>function igCopySignature() {\n    const signatureHTML = igGenerateSignatureHTML();<\/p>\n<p>    if (navigator.clipboard && window.isSecureContext) {\n        navigator.clipboard.writeText(signatureHTML).then(() => {\n            alert('Signature HTML copied to clipboard! You can now paste it into your email client.');\n        }).catch(() => {\n            igFallbackCopy(signatureHTML);\n        });\n    } else {\n        igFallbackCopy(signatureHTML);\n    }\n}<\/p>\n<p>function igFallbackCopy(text) {\n    const tempDiv = document.createElement('div');\n    tempDiv.innerHTML = text;\n    tempDiv.style.position = 'fixed';\n    tempDiv.style.left = '-9999px';\n    document.body.appendChild(tempDiv);<\/p>\n<p>    const range = document.createRange();\n    range.selectNode(tempDiv);\n    window.getSelection().removeAllRanges();\n    window.getSelection().addRange(range);<\/p>\n<p>    try {\n        document.execCommand('copy');\n        alert('Signature HTML copied to clipboard! You can now paste it into your email client.');\n    } catch (err) {\n        alert('Please manually copy the signature from the preview above.');\n    }<\/p>\n<p>    document.body.removeChild(tempDiv);\n    window.getSelection().removeAllRanges();\n}<\/p>\n<p>function igClearAllFields() {\n    const inputs = document.querySelectorAll('#ig-advanced-signature-generator input, #ig-advanced-signature-generator textarea, #ig-advanced-signature-generator select');\n    inputs.forEach(input => {\n        if (input.id !== 'ig-company' && input.id !== 'ig-website' && !input.id.includes('Color')) {\n            input.value = '';\n        }\n    });<\/p>\n<p>    \/\/ Clear custom fields\n    const customFieldsContainer = document.getElementById('ig-customFields');\n    if (customFieldsContainer) {\n        customFieldsContainer.innerHTML = '';\n    }\n    igCustomFieldCount = 0;<\/p>\n<p>    igUpdatePreview();\n}<\/p>\n<p>\/\/ Initialize\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Add event listeners to all form inputs\n    const inputs = document.querySelectorAll('input[id^=\"ig-\"], textarea[id^=\"ig-\"], select[id^=\"ig-\"]');\n    inputs.forEach(input => {\n        input.addEventListener('input', igUpdatePreview);\n    });<\/p>\n<p>    \/\/ Setup color pickers\n    igSetupColorPickers();<\/p>\n<p>    \/\/ Initial preview\n    igUpdatePreview();\n});\n<\/script><\/p>\n<\/div>\n<h1>\n<h1 data-start=\"103\" data-end=\"144\">FAQ: What Makes a Good Email Signature?<\/h1>\n<\/h1>\n<div>\n<h3 data-start=\"146\" data-end=\"191\">1. Why is an email signature important?<\/h3>\n<p data-start=\"192\" data-end=\"346\">Your email signature acts like a digital business card. It helps establish professionalism, builds trust, and makes it easy for recipients to contact you.<\/p>\n<hr data-start=\"348\" data-end=\"351\" \/>\n<h3 data-start=\"353\" data-end=\"404\">2. What should every email signature include?<\/h3>\n<p data-start=\"405\" data-end=\"418\">At minimum:<\/p>\n<ul data-start=\"419\" data-end=\"532\">\n<li data-start=\"419\" data-end=\"436\">\n<p data-start=\"421\" data-end=\"436\"><strong data-start=\"421\" data-end=\"434\">Full name<\/strong><\/p>\n<\/li>\n<li data-start=\"437\" data-end=\"464\">\n<p data-start=\"439\" data-end=\"464\"><strong data-start=\"439\" data-end=\"462\">Job title &amp; company<\/strong><\/p>\n<\/li>\n<li data-start=\"465\" data-end=\"508\">\n<p data-start=\"467\" data-end=\"508\"><strong data-start=\"467\" data-end=\"506\">Phone number or main contact method<\/strong><\/p>\n<\/li>\n<li data-start=\"509\" data-end=\"532\">\n<p data-start=\"511\" data-end=\"532\"><strong data-start=\"511\" data-end=\"530\">Company website<\/strong><\/p>\n<\/li>\n<\/ul>\n<p data-start=\"534\" data-end=\"589\">Optional: social media links, logo, or scheduling link.<\/p>\n<hr data-start=\"591\" data-end=\"594\" \/>\n<h3 data-start=\"596\" data-end=\"647\">3. Should I include my photo or company logo?<\/h3>\n<p data-start=\"648\" data-end=\"802\">Yes, but only if it looks professional and doesn\u2019t make the signature too large. A clean logo reinforces branding, while a headshot adds a personal touch.<\/p>\n<hr data-start=\"804\" data-end=\"807\" \/>\n<h3 data-start=\"809\" data-end=\"856\">4. How long should an email signature be?<\/h3>\n<p data-start=\"857\" data-end=\"979\">Keep it concise <strong data-start=\"873\" data-end=\"904\">3\u20135 lines of text is ideal.<\/strong> Too much information can overwhelm readers and distract from your message.<\/p>\n<hr data-start=\"981\" data-end=\"984\" \/>\n<h3 data-start=\"986\" data-end=\"1024\">5. Can I add social media links?<\/h3>\n<p data-start=\"1025\" data-end=\"1157\">Yes, but limit them to <strong data-start=\"1048\" data-end=\"1073\">1\u20133 relevant profiles<\/strong> (e.g., LinkedIn, Twitter). Use icons instead of long URLs to keep the design clean.<\/p>\n<hr data-start=\"1159\" data-end=\"1162\" \/>\n<h3 data-start=\"1164\" data-end=\"1216\">6. What design best practices should I follow?<\/h3>\n<ul data-start=\"1217\" data-end=\"1365\">\n<li data-start=\"1217\" data-end=\"1243\">\n<p data-start=\"1219\" data-end=\"1243\">Stick to <strong data-start=\"1228\" data-end=\"1241\">1\u20132 fonts<\/strong><\/p>\n<\/li>\n<li data-start=\"1244\" data-end=\"1282\">\n<p data-start=\"1246\" data-end=\"1282\">Use company brand colors sparingly<\/p>\n<\/li>\n<li data-start=\"1283\" data-end=\"1324\">\n<p data-start=\"1285\" data-end=\"1324\">Ensure readability with good contrast<\/p>\n<\/li>\n<li data-start=\"1325\" data-end=\"1365\">\n<p data-start=\"1327\" data-end=\"1365\">Avoid excessive images or animations<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1367\" data-end=\"1370\" \/>\n<h3 data-start=\"1372\" data-end=\"1427\">7. Should I include a disclaimer or legal notice?<\/h3>\n<p data-start=\"1428\" data-end=\"1538\">Only if required by your company or industry. Keep it short and place it <strong data-start=\"1501\" data-end=\"1537\">below the main signature content<\/strong>.<\/p>\n<hr data-start=\"1540\" data-end=\"1543\" \/>\n<h3 data-start=\"1545\" data-end=\"1603\">8. How do I make my email signature mobile-friendly?<\/h3>\n<ul data-start=\"1604\" data-end=\"1758\">\n<li data-start=\"1604\" data-end=\"1638\">\n<p data-start=\"1606\" data-end=\"1638\">Use a <strong data-start=\"1612\" data-end=\"1636\">single-column layout<\/strong><\/p>\n<\/li>\n<li data-start=\"1639\" data-end=\"1660\">\n<p data-start=\"1641\" data-end=\"1660\">Avoid wide images<\/p>\n<\/li>\n<li data-start=\"1661\" data-end=\"1714\">\n<p data-start=\"1663\" data-end=\"1714\">Use <strong data-start=\"1667\" data-end=\"1686\">clickable links<\/strong> instead of long text URLs<\/p>\n<\/li>\n<li data-start=\"1715\" data-end=\"1758\">\n<p data-start=\"1717\" data-end=\"1758\">Test on both desktop and mobile devices<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1760\" data-end=\"1763\" \/>\n<h3 data-start=\"1765\" data-end=\"1814\">9. Can I promote something in my signature?<\/h3>\n<p data-start=\"1815\" data-end=\"1849\">Yes, but do it subtly. Examples:<\/p>\n<ul data-start=\"1850\" data-end=\"1996\">\n<li data-start=\"1850\" data-end=\"1882\">\n<p data-start=\"1852\" data-end=\"1882\">A <strong data-start=\"1854\" data-end=\"1880\">link to book a meeting<\/strong><\/p>\n<\/li>\n<li data-start=\"1883\" data-end=\"1936\">\n<p data-start=\"1885\" data-end=\"1936\">A <strong data-start=\"1887\" data-end=\"1900\">short CTA<\/strong> like \u201cDownload our latest report\u201d<\/p>\n<\/li>\n<li data-start=\"1937\" data-end=\"1996\">\n<p data-start=\"1939\" data-end=\"1996\">A <strong data-start=\"1941\" data-end=\"1964\">banner for an event<\/strong> (kept small and professional)<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1998\" data-end=\"2001\" \/>\n<h3 data-start=\"2003\" data-end=\"2042\">10. What mistakes should I avoid?<\/h3>\n<ul data-start=\"2043\" data-end=\"2196\">\n<li data-start=\"2043\" data-end=\"2077\">\n<p data-start=\"2045\" data-end=\"2077\">Using too many fonts or colors<\/p>\n<\/li>\n<li data-start=\"2078\" data-end=\"2116\">\n<p data-start=\"2080\" data-end=\"2116\">Adding unnecessary quotes or jokes<\/p>\n<\/li>\n<li data-start=\"2117\" data-end=\"2152\">\n<p data-start=\"2119\" data-end=\"2152\">Including outdated contact info<\/p>\n<\/li>\n<li data-start=\"2153\" data-end=\"2196\">\n<p data-start=\"2155\" data-end=\"2196\">Using huge images that break formatting<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"animation\":\"slide-bottom-medium\",\"animation_delay\":\"100\",\"header_transparent\":true,\"header_transparent_text_color\":\"dark\",\"image_position\":\"center-center\",\"image_size\":\"width-1-1\",\"image_width\":\"2560\",\"media_visibility\":\"m\",\"padding\":\"large\",\"padding_remove_bottom\":false,\"padding_remove_top\":false,\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"\",\"width\":\"small\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Email Signature Template Generator\",\"text_align\":\"center\",\"title_element\":\"h1\",\"title_style\":\"heading-small\"}},{\"type\":\"text\",\"props\":{\"block_align\":\"center\",\"column_breakpoint\":\"m\",\"content\":\"Create your free email signature with our easy-to-use signature generator\",\"margin\":\"default\",\"margin_remove_bottom\":true,\"maxwidth\":\"xlarge\",\"text_align\":\"center\",\"text_style\":\"lead\"}}]}]}],\"name\":\"Hero\",\"modified\":\"2021-01-11T16:17:32.664Z\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"muted\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"expand\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\" \\n    \n\n<div id=\\\"ig-main-content\\\" style=\\\"display: grid; grid-template-columns: 300px 1fr 1fr; gap: 0; min-height: 800px;\\\">\\n        \\n        <!-- Sidebar Navigation -->\\n        <\/p>\n<div id=\\\"ig-sidebar\\\" style=\\\"background: #6B7280; color: white; padding: 0;\\\">\\n            <\/p>\n<div class=\\\"ig-sidebar-item ig-active\\\" onclick=\\\"igShowStep('details')\\\" style=\\\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; background: #374151; border-left: 4px solid #10B981;\\\">\\n                <span>Details<\\\/span>\\n            <\\\/div>\\n            <\/p>\n<div class=\\\"ig-sidebar-item\\\" onclick=\\\"igShowStep('images')\\\" style=\\\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px;\\\">\\n                <span>Images<\\\/span>\\n            <\\\/div>\\n            <\/p>\n<div class=\\\"ig-sidebar-item\\\" onclick=\\\"igShowStep('templates')\\\" style=\\\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px;\\\">\\n                <span>Templates<\\\/span>\\n            <\\\/div>\\n            <\/p>\n<div class=\\\"ig-sidebar-item\\\" onclick=\\\"igShowStep('styles')\\\" style=\\\"padding: 20px 24px; border-bottom: 1px solid #9CA3AF; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px;\\\">\\n                <span>Styles<\\\/span>\\n            <\\\/div>\\n        <\\\/div>\\n\\n        <!-- Form Section -->\\n        <\/p>\n<div id=\\\"ig-form-section\\\" style=\\\"padding: 40px; background: #F8FAFC; border-right: 1px solid #E2E8F0; overflow-y: auto; max-height: 800px;\\\">\\n            \\n            <!-- Step 1: Details -->\\n            <\/p>\n<div id=\\\"ig-details\\\" class=\\\"ig-step-content ig-active\\\" style=\\\"display: block;\\\">\\n                <\/p>\n<h2 style=\\\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\\\">Enter Your Signature Details<\\\/h2>\\n                <\/p>\n<p style=\\\"color: #64748B; margin-bottom: 24px; font-size: 14px;\\\">* Indicates a required field<\\\/p>\\n                \\n                <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\\\">\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">First Name <span style=\\\"color: #EF4444;\\\">*<\\\/span><\\\/label>\\n                        <input type=\\\"text\\\" id=\\\"ig-firstName\\\" placeholder=\\\"Alexandre\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Last Name <span style=\\\"color: #EF4444;\\\">*<\\\/span><\\\/label>\\n                        <input type=\\\"text\\\" id=\\\"ig-lastName\\\" placeholder=\\\"Gaillard\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Job Title<\\\/label>\\n                    <input type=\\\"text\\\" id=\\\"ig-jobTitle\\\" placeholder=\\\"Senior Investment Advisor\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Department<\\\/label>\\n                    <input type=\\\"text\\\" id=\\\"ig-department\\\" placeholder=\\\"Wealth Management\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Company Name<\\\/label>\\n                    <input type=\\\"text\\\" id=\\\"ig-company\\\" placeholder=\\\"InvestGlass\\\" value=\\\"InvestGlass\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\\\">\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Office Phone Number<\\\/label>\\n                        <input type=\\\"tel\\\" id=\\\"ig-officePhone\\\" placeholder=\\\"+41 22 123 4567\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Mobile Phone Number<\\\/label>\\n                        <input type=\\\"tel\\\" id=\\\"ig-mobilePhone\\\" placeholder=\\\"+41 79 123 4567\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Website URL<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-website\\\" placeholder=\\\"www.investglass.com\\\" value=\\\"www.investglass.com\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Email Address<\\\/label>\\n                    <input type=\\\"email\\\" id=\\\"ig-email\\\" placeholder=\\\"alexandre.gaillard@investglass.com\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n\\n                <\/p>\n<h3 style=\\\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\\\">Address<\\\/h3>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Address Line 1<\\\/label>\\n                    <input type=\\\"text\\\" id=\\\"ig-address1\\\" placeholder=\\\"5 Rue des Alpes\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\\\">\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">City<\\\/label>\\n                        <input type=\\\"text\\\" id=\\\"ig-city\\\" placeholder=\\\"Geneva\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">State\\\/Province<\\\/label>\\n                        <input type=\\\"text\\\" id=\\\"ig-state\\\" placeholder=\\\"Geneva\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\\\">\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">ZIP\\\/Postal Code<\\\/label>\\n                        <input type=\\\"text\\\" id=\\\"ig-zipCode\\\" placeholder=\\\"1201\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Country<\\\/label>\\n                        <input type=\\\"text\\\" id=\\\"ig-country\\\" placeholder=\\\"Switzerland\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<h3 style=\\\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\\\">Enter Your Social Links<\\\/h3>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">LinkedIn<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-linkedin\\\" placeholder=\\\"https:\\\/\\\/www.linkedin.com\\\/in\\\/yourprofile\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Facebook<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-facebook\\\" placeholder=\\\"https:\\\/\\\/www.facebook.com\\\/yourprofile\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">X \\\/ Twitter<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-twitter\\\" placeholder=\\\"https:\\\/\\\/www.x.com\\\/yourprofile\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Instagram<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-instagram\\\" placeholder=\\\"https:\\\/\\\/www.instagram.com\\\/yourprofile\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">WhatsApp<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-whatsapp\\\" placeholder=\\\"https:\\\/\\\/wa.me\\\/41791234567\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n\\n                <\/p>\n<h3 style=\\\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\\\">Custom Fields<\\\/h3>\\n                <\/p>\n<div id=\\\"ig-customFields\\\"><\\\/div>\\n                <\/p>\n<div onclick=\\\"igAddCustomField()\\\" style=\\\"background: #F0F9FF; color: #0369A1; border: 2px dashed #BAE6FD; padding: 12px; border-radius: 8px; cursor: pointer; text-align: center; margin-top: 12px;\\\">\\n                    + Add a field\\n                <\\\/div>\\n\\n                <\/p>\n<h3 style=\\\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\\\">Email Signature Footer<\\\/h3>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Legal Content<\\\/label>\\n                    <textarea id=\\\"ig-legalContent\\\" rows=\\\"3\\\" placeholder=\\\"This email and any attachments are confidential...\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box; resize: vertical;\\\"><\\\/textarea>\\n                <\\\/div>\\n            <\\\/div>\\n\\n            <!-- Step 2: Images -->\\n            <\/p>\n<div id=\\\"ig-images\\\" class=\\\"ig-step-content\\\" style=\\\"display: none;\\\">\\n                <\/p>\n<h2 style=\\\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\\\">Signature Images<\\\/h2>\\n                <\/p>\n<p style=\\\"color: #64748B; margin-bottom: 24px;\\\">Add your profile photo or logo to enhance your email signature! Use images from your own hosted website.<\\\/p>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Profile Picture<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-profilePicture\\\" placeholder=\\\"https:\\\/\\\/example.com\\\/images\\\/myphoto.jpg\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <small style=\\\"color: #64748B; font-size: 12px;\\\">Recommended size: 80x80px<\\\/small>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Company Logo<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-companyLogo\\\" placeholder=\\\"https:\\\/\\\/example.com\\\/images\\\/logo.jpg\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <small style=\\\"color: #64748B; font-size: 12px;\\\">Recommended size: 120x40px<\\\/small>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Handwritten Signature<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-handwrittenSignature\\\" placeholder=\\\"https:\\\/\\\/example.com\\\/images\\\/signature.jpg\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <small style=\\\"color: #64748B; font-size: 12px;\\\">Use your signature image from your own hosted website<\\\/small>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Custom CTA Image<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-customCTA\\\" placeholder=\\\"https:\\\/\\\/example.com\\\/images\\\/cta-button.jpg\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <small style=\\\"color: #64748B; font-size: 12px;\\\">Upload a custom call-to-action button image<\\\/small>\\n                <\\\/div>\\n            <\\\/div>\\n\\n            <!-- Step 3: Templates -->\\n            <\/p>\n<div id=\\\"ig-templates\\\" class=\\\"ig-step-content\\\" style=\\\"display: none;\\\">\\n                <\/p>\n<h2 style=\\\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\\\">Select Your Template<\\\/h2>\\n                \\n                <\/p>\n<div style=\\\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;\\\">\\n                    <!-- Template 1: Classic with divider -->\\n                    <\/p>\n<div class=\\\"ig-template-card ig-selected\\\" onclick=\\\"igSelectTemplate(1)\\\" data-template=\\\"1\\\" style=\\\"border: 2px solid #6366F1; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: #F0F9FF;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; flex-direction: column; gap: 6px;\\\">\\n                                <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60%;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40%;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 1px; background: #FF4500; border-radius: 1px; width: 80%; margin: 4px 0;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70%;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\\\"><\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 1<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Classic layout with divider<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 2: Photo with contact info -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(2)\\\" data-template=\\\"2\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; gap: 12px; align-items: flex-start;\\\">\\n                                <\/p>\n<div style=\\\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 4px; flex-shrink: 0;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"flex: 1; display: flex; flex-direction: column; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\\\"><\\\/div>\\n                                <\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 2<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Photo with contact info<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 3: Horizontal layout -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(3)\\\" data-template=\\\"3\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; gap: 12px; align-items: center;\\\">\\n                                <\/p>\n<div style=\\\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 4px; flex-shrink: 0;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"flex: 1; display: flex; flex-direction: column; gap: 3px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40%;\\\"><\\\/div>\\n                                <\\\/div>\\n                                <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 2px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 30px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 25px;\\\"><\\\/div>\\n                                <\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 3<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Horizontal layout<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 4: Logo on right -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(4)\\\" data-template=\\\"4\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; justify-content: space-between; align-items: flex-start;\\\">\\n                                <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 4px; flex: 1;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\\\"><\\\/div>\\n                                <\\\/div>\\n                                <\/p>\n<div style=\\\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 4px; margin-left: 12px;\\\"><\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 4<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Logo on right<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 5: Minimal left -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(5)\\\" data-template=\\\"5\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; justify-content: space-between; align-items: center;\\\">\\n                                <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70px;\\\"><\\\/div>\\n                                <\\\/div>\\n                                <\/p>\n<div style=\\\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 50%;\\\"><\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 5<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Minimal left<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 6: Two column -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(6)\\\" data-template=\\\"6\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; gap: 12px;\\\">\\n                                <\/p>\n<div style=\\\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 4px; flex-shrink: 0; margin-top: 2px;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1;\\\">\\n                                    <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 3px;\\\">\\n                                        <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 100%;\\\"><\\\/div>\\n                                        <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70%;\\\"><\\\/div>\\n                                    <\\\/div>\\n                                    <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 3px;\\\">\\n                                        <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\\\"><\\\/div>\\n                                        <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 60%;\\\"><\\\/div>\\n                                    <\\\/div>\\n                                <\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 6<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Two column<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 7: Photo left with CTA -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(7)\\\" data-template=\\\"7\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; gap: 12px; align-items: flex-start;\\\">\\n                                <\/p>\n<div style=\\\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%; flex-shrink: 0;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"flex: 1; display: flex; flex-direction: column; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 80%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px; margin-top: 4px;\\\"><\\\/div>\\n                                <\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 7<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Photo left with CTA<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 8: Centered with photo -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(8)\\\" data-template=\\\"8\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;\\\">\\n                                <\/p>\n<div style=\\\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%; margin-bottom: 4px;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60%;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40%;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70%;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px; margin-top: 4px;\\\"><\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 8<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Centered with photo<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 9: Right aligned -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(9)\\\" data-template=\\\"9\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; justify-content: space-between; align-items: flex-start;\\\">\\n                                <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 30px; margin-top: 4px;\\\"><\\\/div>\\n                                <\\\/div>\\n                                <\/p>\n<div style=\\\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%;\\\"><\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 9<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Right aligned<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 10: Compact with photo -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(10)\\\" data-template=\\\"10\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; flex-direction: column; gap: 6px;\\\">\\n                                <\/p>\n<div style=\\\"display: flex; gap: 8px; align-items: center;\\\">\\n                                    <\/p>\n<div style=\\\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 50%; flex-shrink: 0;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 2px; flex: 1;\\\">\\n                                        <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\\\"><\\\/div>\\n                                        <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 50%;\\\"><\\\/div>\\n                                    <\\\/div>\\n                                <\\\/div>\\n                                <\/p>\n<div style=\\\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px;\\\"><\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 10<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Compact with photo<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 11: Minimal right -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(11)\\\" data-template=\\\"11\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; justify-content: space-between; align-items: flex-start;\\\">\\n                                <\/p>\n<div style=\\\"display: flex; flex-direction: column; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 60px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 40px;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 70px;\\\"><\\\/div>\\n                                <\\\/div>\\n                                <\/p>\n<div style=\\\"display: flex; flex-direction: column; align-items: center; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"width: 20px; height: 20px; background: #E2E8F0; border-radius: 50%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 25px;\\\"><\\\/div>\\n                                <\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 11<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Minimal right<\\\/p>\\n                    <\\\/div>\\n\\n                    <!-- Template 12: Stacked layout -->\\n                    <\/p>\n<div class=\\\"ig-template-card\\\" onclick=\\\"igSelectTemplate(12)\\\" data-template=\\\"12\\\" style=\\\"border: 2px solid #E2E8F0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; background: white;\\\">\\n                        <\/p>\n<div style=\\\"height: 120px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 16px;\\\">\\n                            <\/p>\n<div style=\\\"width: 100%; display: flex; gap: 12px; align-items: flex-start;\\\">\\n                                <\/p>\n<div style=\\\"width: 24px; height: 24px; background: #E2E8F0; border-radius: 50%; flex-shrink: 0;\\\"><\\\/div>\\n                                <\/p>\n<div style=\\\"flex: 1; display: flex; flex-direction: column; gap: 4px;\\\">\\n                                    <\/p>\n<div style=\\\"height: 3px; background: #E2E8F0; border-radius: 2px; width: 70%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 90%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 2px; background: #E2E8F0; border-radius: 1px; width: 60%;\\\"><\\\/div>\\n                                    <\/p>\n<div style=\\\"height: 8px; background: #E2E8F0; border-radius: 4px; width: 40px; margin-top: 4px;\\\"><\\\/div>\\n                                <\\\/div>\\n                            <\\\/div>\\n                        <\\\/div>\\n                        <\/p>\n<h4>Template 12<\\\/h4>\\n                        <\/p>\n<p style=\\\"font-size: 12px; color: #64748B;\\\">Stacked layout<\\\/p>\\n                    <\\\/div>\\n                <\\\/div>\\n            <\\\/div>\\n\\n            <!-- Step 4: Styles -->\\n            <\/p>\n<div id=\\\"ig-styles\\\" class=\\\"ig-step-content\\\" style=\\\"display: none;\\\">\\n                <\/p>\n<h2 style=\\\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\\\">Style Your Signature<\\\/h2>\\n                \\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Select Theme Color<\\\/label>\\n                    <\/p>\n<div style=\\\"display: flex; align-items: center; gap: 12px;\\\">\\n                        <input type=\\\"color\\\" id=\\\"ig-themeColor\\\" value=\\\"#6366F1\\\" style=\\\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\\\">\\n                        <input type=\\\"text\\\" id=\\\"ig-themeColorText\\\" value=\\\"#6366F1\\\" style=\\\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Select Text Color<\\\/label>\\n                    <\/p>\n<div style=\\\"display: flex; align-items: center; gap: 12px;\\\">\\n                        <input type=\\\"color\\\" id=\\\"ig-textColor\\\" value=\\\"#6B7280\\\" style=\\\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\\\">\\n                        <input type=\\\"text\\\" id=\\\"ig-textColorText\\\" value=\\\"#6B7280\\\" style=\\\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Select Link Color<\\\/label>\\n                    <\/p>\n<div style=\\\"display: flex; align-items: center; gap: 12px;\\\">\\n                        <input type=\\\"color\\\" id=\\\"ig-linkColor\\\" value=\\\"#6366F1\\\" style=\\\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\\\">\\n                        <input type=\\\"text\\\" id=\\\"ig-linkColorText\\\" value=\\\"#6366F1\\\" style=\\\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<h3 style=\\\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\\\">Customize Font<\\\/h3>\\n                <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;\\\">\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Font Family<\\\/label>\\n                        <select id=\\\"ig-fontFamily\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n<option value=\\\"Arial, sans-serif\\\">Arial<\\\/option>\\n<option value=\\\"Helvetica, sans-serif\\\">Helvetica<\\\/option>\\n<option value=\\\"Georgia, serif\\\">Georgia<\\\/option>\\n<option value=\\\"Times New Roman, serif\\\">Times New Roman<\\\/option>\\n<option value=\\\"Verdana, sans-serif\\\">Verdana<\\\/option>\\n                        <\\\/select>\\n                    <\\\/div>\\n                    <\/p>\n<div>\\n                        <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">Font Size<\\\/label>\\n                        <select id=\\\"ig-fontSize\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n<option value=\\\"12px\\\">Small<\\\/option>\\n<option value=\\\"14px\\\" selected>Medium<\\\/option>\\n<option value=\\\"16px\\\">Large<\\\/option>\\n                        <\\\/select>\\n                    <\\\/div>\\n                <\\\/div>\\n\\n                <\/p>\n<h3 style=\\\"color: #1E293B; margin: 32px 0 16px 0; font-size: 1.2rem;\\\">Add Call to Action<\\\/h3>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">CTA Button Text<\\\/label>\\n                    <input type=\\\"text\\\" id=\\\"ig-ctaText\\\" placeholder=\\\"Schedule a Meeting\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">CTA Button URL<\\\/label>\\n                    <input type=\\\"url\\\" id=\\\"ig-ctaUrl\\\" placeholder=\\\"https:\\\/\\\/calendly.com\\\/yourlink\\\" style=\\\"width: 100%; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                <\\\/div>\\n                <\/p>\n<div style=\\\"margin-bottom: 24px;\\\">\\n                    <label style=\\\"display: block; margin-bottom: 8px; font-weight: 600; color: #1E293B; font-size: 14px;\\\">CTA Button Color<\\\/label>\\n                    <\/p>\n<div style=\\\"display: flex; align-items: center; gap: 12px;\\\">\\n                        <input type=\\\"color\\\" id=\\\"ig-ctaColor\\\" value=\\\"#6366F1\\\" style=\\\"width: 50px; height: 40px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer;\\\">\\n                        <input type=\\\"text\\\" id=\\\"ig-ctaColorText\\\" value=\\\"#6366F1\\\" style=\\\"flex: 1; padding: 12px 16px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; background: white; box-sizing: border-box;\\\">\\n                    <\\\/div>\\n                <\\\/div>\\n            <\\\/div>\\n        <\\\/div>\\n\\n        <!-- Preview Section -->\\n        <\/p>\n<div style=\\\"padding: 40px; background: white; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; max-height: 800px;\\\">\\n            <\/p>\n<h2 style=\\\"color: #1E293B; margin-bottom: 24px; font-size: 1.5rem;\\\">Preview<\\\/h2>\\n            \\n            <\/p>\n<div style=\\\"background: #F8FAFC; border-radius: 12px; padding: 24px; border: 1px solid #E2E8F0; margin-bottom: 24px;\\\">\\n                <\/p>\n<div style=\\\"background: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\\\">\\n                    <\/p>\n<div style=\\\"border-bottom: 1px solid #E2E8F0; padding-bottom: 12px; margin-bottom: 20px; font-size: 14px; color: #64748B;\\\">\\n                        To: <span style=\\\"color: #6366F1;\\\">Your Recipient<\\\/span><br \/>\\n                        Subject: <strong>Check out my new Email Signature<\\\/strong>\\n                    <\\\/div>\\n                    \\n                    <\/p>\n<div id=\\\"ig-signaturePreview\\\" style=\\\"font-family: Arial, sans-serif; line-height: 1.4;\\\">\\n                        <!-- Signature will be generated here -->\\n                    <\\\/div>\\n                <\\\/div>\\n            <\\\/div>\\n\\n            <\/p>\n<div style=\\\"display: flex; gap: 12px; margin-bottom: 24px;\\\">\\n                <button type=\\\"button\\\" onclick=\\\"igGenerateSignature()\\\" style=\\\"padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%); color: white; transition: all 0.2s ease;\\\">Generate Signature<\\\/button>\\n                <button type=\\\"button\\\" onclick=\\\"igClearAllFields()\\\" style=\\\"padding: 12px 24px; border: 2px solid #6366F1; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: white; color: #6366F1; transition: all 0.2s ease;\\\">Clear All<\\\/button>\\n            <\\\/div>\\n\\n            <\/p>\n<div style=\\\"padding: 20px; background: #F0F9FF; border-radius: 8px; border: 1px solid #BAE6FD;\\\">\\n                <\/p>\n<h3 style=\\\"color: #0369A1; margin: 0 0 12px 0; font-size: 16px;\\\">Ready to use your signature?<\\\/h3>\\n                <\/p>\n<p style=\\\"color: #0369A1; font-size: 14px; margin: 0 0 12px 0;\\\">Click the button below to copy your signature and paste it into your email client.<\\\/p>\\n                <button type=\\\"button\\\" onclick=\\\"igCopySignature()\\\" style=\\\"padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%); color: white;\\\">Copy Signature HTML<\\\/button>\\n            <\\\/div>\\n        <\\\/div>\\n    <\\\/div>\\n<\\\/div>\\n\\n<!-- Responsive CSS for mobile -->\\n<\/p>\n<style>\\n@media (max-width: 1200px) {\\n    #ig-main-content {\\n        grid-template-columns: 1fr !important;\\n    }\\n    \\n    #ig-sidebar {\\n        display: flex !important;\\n        overflow-x: auto !important;\\n    }\\n    \\n    .ig-sidebar-item {\\n        white-space: nowrap !important;\\n        border-bottom: none !important;\\n        border-right: 1px solid #334155 !important;\\n    }\\n}\\n\\n@media (max-width: 768px) {\\n    #ig-advanced-signature-generator h1 {\\n        font-size: 2rem !important;\\n    }\\n    \\n    #ig-advanced-signature-generator [style*=\\\"grid-template-columns: 1fr 1fr\\\"] {\\n        grid-template-columns: 1fr !important;\\n    }\\n    \\n    #ig-advanced-signature-generator [style*=\\\"grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))\\\"] {\\n        grid-template-columns: 1fr !important;\\n    }\\n}\\n\\n.ig-sidebar-item:hover {\\n    background: #334155 !important;\\n}\\n\\n.ig-template-card:hover {\\n    border-color: #6366F1 !important;\\n    transform: translateY(-2px) !important;\\n}\\n<\\\/style>\\n\\n<script>\\n\\\/\\\/ InvestGlass Advanced Signature Generator JavaScript\\nlet igSelectedTemplate = 1;\\nlet igCustomFieldCount = 0;\\n\\n\\\/\\\/ Navigation\\nfunction igShowStep(stepId) {\\n    \\\/\\\/ Hide all steps\\n    document.querySelectorAll('.ig-step-content').forEach(step => {\\n        step.style.display = 'none';\\n    });\\n    \\n    \\\/\\\/ Remove active class from all sidebar items\\n    document.querySelectorAll('.ig-sidebar-item').forEach(item => {\\n        item.classList.remove('ig-active');\\n        item.style.background = '';\\n        item.style.borderLeft = '';\\n    });\\n    \\n    \\\/\\\/ Show selected step\\n    document.getElementById('ig-' + stepId).style.display = 'block';\\n    \\n    \\\/\\\/ Add active class to clicked sidebar item\\n    event.target.closest('.ig-sidebar-item').classList.add('ig-active');\\n    event.target.closest('.ig-sidebar-item').style.background = '#374151';\\n    event.target.closest('.ig-sidebar-item').style.borderLeft = '4px solid #10B981';\\n    \\n    igUpdatePreview();\\n}\\n\\n\\\/\\\/ Template selection\\nfunction igSelectTemplate(templateId) {\\n    igSelectedTemplate = templateId;\\n    \\n    document.querySelectorAll('.ig-template-card').forEach(card => {\\n        card.classList.remove('ig-selected');\\n        card.style.borderColor = '#E2E8F0';\\n        card.style.background = 'white';\\n    });\\n    \\n    const selectedCard = document.querySelector(`[data-template=\\\"${templateId}\\\"]`);\\n    selectedCard.classList.add('ig-selected');\\n    selectedCard.style.borderColor = '#6366F1';\\n    selectedCard.style.background = '#F0F9FF';\\n    \\n    igUpdatePreview();\\n}\\n\\n\\\/\\\/ Custom fields\\nfunction igAddCustomField() {\\n    igCustomFieldCount++;\\n    const customFieldsContainer = document.getElementById('ig-customFields');\\n    const fieldDiv = document.createElement('div');\\n    fieldDiv.className = 'ig-custom-field';\\n    fieldDiv.style.cssText = 'display: flex; gap: 8px; align-items: center; margin-bottom: 12px;';\\n    fieldDiv.innerHTML = `\\n        <input type=\\\"text\\\" placeholder=\\\"Field Label\\\" id=\\\"ig-customLabel${igCustomFieldCount}\\\" style=\\\"flex: 1; padding: 8px 12px; border: 2px solid #E2E8F0; border-radius: 6px; font-size: 14px; background: white; box-sizing: border-box;\\\">\\n        <input type=\\\"text\\\" placeholder=\\\"Field Value\\\" id=\\\"ig-customValue${igCustomFieldCount}\\\" style=\\\"flex: 1; padding: 8px 12px; border: 2px solid #E2E8F0; border-radius: 6px; font-size: 14px; background: white; box-sizing: border-box;\\\">\\n        <button type=\\\"button\\\" onclick=\\\"igRemoveCustomField(this)\\\" style=\\\"background: #FEE2E2; color: #DC2626; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px;\\\">Remove<\\\/button>\\n    `;\\n    customFieldsContainer.appendChild(fieldDiv);\\n    \\n    \\\/\\\/ Add event listeners\\n    document.getElementById(`ig-customLabel${igCustomFieldCount}`).addEventListener('input', igUpdatePreview);\\n    document.getElementById(`ig-customValue${igCustomFieldCount}`).addEventListener('input', igUpdatePreview);\\n}\\n\\nfunction igRemoveCustomField(button) {\\n    button.parentElement.remove();\\n    igUpdatePreview();\\n}\\n\\n\\\/\\\/ Color picker synchronization\\nfunction igSetupColorPickers() {\\n    const colorPairs = [\\n        ['ig-themeColor', 'ig-themeColorText'],\\n        ['ig-textColor', 'ig-textColorText'],\\n        ['ig-linkColor', 'ig-linkColorText'],\\n        ['ig-ctaColor', 'ig-ctaColorText']\\n    ];\\n\\n    colorPairs.forEach(([pickerId, textId]) => {\\n        const picker = document.getElementById(pickerId);\\n        const text = document.getElementById(textId);\\n        \\n        if (picker && text) {\\n            picker.addEventListener('input', () => {\\n                text.value = picker.value;\\n                igUpdatePreview();\\n            });\\n            \\n            text.addEventListener('input', () => {\\n                picker.value = text.value;\\n                igUpdatePreview();\\n            });\\n        }\\n    });\\n}\\n\\n\\\/\\\/ Generate signature based on template\\nfunction igGenerateSignatureHTML() {\\n    const data = {\\n        firstName: document.getElementById('ig-firstName').value || 'Alexandre',\\n        lastName: document.getElementById('ig-lastName').value || 'Gaillard',\\n        jobTitle: document.getElementById('ig-jobTitle').value || 'Senior Investment Advisor',\\n        department: document.getElementById('ig-department').value || 'Wealth Management',\\n        company: document.getElementById('ig-company').value || 'InvestGlass',\\n        officePhone: document.getElementById('ig-officePhone').value,\\n        mobilePhone: document.getElementById('ig-mobilePhone').value,\\n        email: document.getElementById('ig-email').value || 'alexandre.gaillard@investglass.com',\\n        website: document.getElementById('ig-website').value || 'www.investglass.com',\\n        address1: document.getElementById('ig-address1').value,\\n        city: document.getElementById('ig-city').value,\\n        state: document.getElementById('ig-state').value,\\n        zipCode: document.getElementById('ig-zipCode').value,\\n        country: document.getElementById('ig-country').value,\\n        linkedin: document.getElementById('ig-linkedin').value,\\n        facebook: document.getElementById('ig-facebook').value,\\n        twitter: document.getElementById('ig-twitter').value,\\n        instagram: document.getElementById('ig-instagram').value,\\n        whatsapp: document.getElementById('ig-whatsapp').value,\\n        profilePicture: document.getElementById('ig-profilePicture').value,\\n        companyLogo: document.getElementById('ig-companyLogo').value,\\n        handwrittenSignature: document.getElementById('ig-handwrittenSignature').value,\\n        legalContent: document.getElementById('ig-legalContent').value,\\n        themeColor: document.getElementById('ig-themeColor').value,\\n        textColor: document.getElementById('ig-textColor').value,\\n        linkColor: document.getElementById('ig-linkColor').value,\\n        fontFamily: document.getElementById('ig-fontFamily').value,\\n        fontSize: document.getElementById('ig-fontSize').value,\\n        ctaText: document.getElementById('ig-ctaText').value,\\n        ctaUrl: document.getElementById('ig-ctaUrl').value,\\n        ctaColor: document.getElementById('ig-ctaColor').value\\n    };\\n\\n    \\\/\\\/ Build address\\n    let address = '';\\n    if (data.address1) address += data.address1;\\n    if (data.city) address += (address ? ', ' : '') + data.city;\\n    if (data.state) address += (address ? ', ' : '') + data.state;\\n    if (data.zipCode) address += (address ? ' ' : '') + data.zipCode;\\n    if (data.country) address += (address ? ', ' : '') + data.country;\\n\\n    \\\/\\\/ Build contact info\\n    let contactInfo = '';\\n    if (data.officePhone) contactInfo += `\\ud83d\\udcde <a href=\\\"tel:${data.officePhone.replace(\\\/\\\\s\\\/g, '')}\\\" style=\\\"color: ${data.linkColor}; text-decoration: none;\\\">${data.officePhone}<\\\/a>`;\\n    if (data.mobilePhone) contactInfo += `${data.officePhone ? ' | ' : ''}\\ud83d\\udcf1 <a href=\\\"tel:${data.mobilePhone.replace(\\\/\\\\s\\\/g, '')}\\\" style=\\\"color: ${data.linkColor}; text-decoration: none;\\\">${data.mobilePhone}<\\\/a>`;\\n    if (data.officePhone || data.mobilePhone) contactInfo += '<br \/>';\\n    if (data.email) contactInfo += `\\u2709\\ufe0f <a href=\\\"mailto:${data.email}\\\" style=\\\"color: ${data.linkColor}; text-decoration: none;\\\">${data.email}<\\\/a><br \/>`;\\n    if (data.website) contactInfo += `\\ud83c\\udf10 <a href=\\\"https:\\\/\\\/${data.website.replace(\\\/^https?:\\\\\\\/\\\\\\\/\\\/, '')}\\\" style=\\\"color: ${data.linkColor}; text-decoration: none;\\\">${data.website}<\\\/a><br \/>`;\\n    if (address) contactInfo += `\\ud83d\\udccd ${address}`;\\n\\n    \\\/\\\/ Build social links\\n    let socialLinks = '';\\n    const socials = [\\n        { url: data.linkedin, style: 'background: #0077B5;', text: 'in' },\\n        { url: data.facebook, style: 'background: #1877F2;', text: 'f' },\\n        { url: data.twitter, style: 'background: #1DA1F2;', text: '\\ud835\\udd4f' },\\n        { url: data.instagram, style: 'background: #E4405F;', text: '\\ud83d\\udcf7' },\\n        { url: data.whatsapp, style: 'background: #25D366;', text: '\\ud83d\\udcac' }\\n    ];\\n\\n    socials.forEach(social => {\\n        if (social.url) {\\n            socialLinks += `<a href=\\\"${social.url}\\\" style=\\\"width: 24px; height: 24px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 12px; color: white; margin-right: 4px; ${social.style}\\\">${social.text}<\\\/a>`;\\n        }\\n    });\\n\\n    \\\/\\\/ Build custom fields\\n    let customFields = '';\\n    document.querySelectorAll('.ig-custom-field').forEach((field, index) => {\\n        const labelInput = field.querySelector('input[id^=\\\"ig-customLabel\\\"]');\\n        const valueInput = field.querySelector('input[id^=\\\"ig-customValue\\\"]');\\n        if (labelInput && valueInput) {\\n            const label = labelInput.value;\\n            const value = valueInput.value;\\n            if (label && value) {\\n                customFields += `<\/p>\n<div style=\\\"font-size: 13px; margin: 4px 0;\\\">${label}: ${value}<\\\/div>`;\\n            }\\n        }\\n    });\\n\\n    \\\/\\\/ Build CTA button\\n    let ctaButton = '';\\n    if (data.ctaText && data.ctaUrl) {\\n        ctaButton = `<a href=\\\"${data.ctaUrl}\\\" style=\\\"display: inline-block; padding: 10px 20px; background: ${data.ctaColor}; color: white; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 600; margin-top: 12px;\\\">${data.ctaText}<\\\/a>`;\\n    }\\n\\n    \\\/\\\/ Template-specific layouts\\n    let signatureHTML = '';\\n    \\n    switch (igSelectedTemplate) {\\n        case 1: \\\/\\\/ Classic layout with divider\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor};\\\">\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"max-width: 80px; max-height: 80px; border-radius: 8px; margin-right: 16px; float: left;\\\">` : ''}\\n                    <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 2px;\\\">${data.jobTitle}<\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 14px; color: #64748B; margin-bottom: 12px;\\\">${data.department} | ${data.company}<\\\/div>\\n                    <\/p>\n<div style=\\\"height: 2px; background: linear-gradient(90deg, ${data.themeColor}, #10B981); margin: 12px 0; border-radius: 1px; clear: both;\\\"><\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                    ${socialLinks ? `<\/p>\n<div style=\\\"margin: 12px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                    ${customFields}\\n                    ${ctaButton}\\n                    ${data.handwrittenSignature ? `<\/p>\n<div style=\\\"margin-top: 12px;\\\"><img src=\\\"${data.handwrittenSignature}\\\" style=\\\"max-height: 40px;\\\"><\\\/div>` : ''}\\n                    ${data.companyLogo ? `<\/p>\n<div style=\\\"margin-top: 12px;\\\"><img src=\\\"${data.companyLogo}\\\" style=\\\"max-height: 40px;\\\"><\\\/div>` : ''}\\n                    ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 12px; border-top: 1px solid #E2E8F0; padding-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 2: \\\/\\\/ Photo with contact info\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: flex-start; gap: 16px;\\\">\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0;\\\">` : ''}\\n                    <\/p>\n<div>\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${customFields}\\n                        ${ctaButton}\\n                        ${data.handwrittenSignature ? `<\/p>\n<div style=\\\"margin-top: 8px;\\\"><img src=\\\"${data.handwrittenSignature}\\\" style=\\\"max-height: 40px;\\\"><\\\/div>` : ''}\\n                        ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                    <\\\/div>\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 3: \\\/\\\/ Horizontal layout\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: center; gap: 16px;\\\">\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 60px; height: 60px; border-radius: 8px; flex-shrink: 0;\\\">` : ''}\\n                    <\/p>\n<div style=\\\"flex: 1;\\\">\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 4px;\\\">${data.jobTitle}<\\\/div>\\n                    <\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6; text-align: right;\\\">\\n                        ${contactInfo}\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0; justify-content: flex-end; display: flex;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${ctaButton}\\n                    <\\\/div>\\n                    ${data.companyLogo ? `<img src=\\\"${data.companyLogo}\\\" style=\\\"max-height: 40px; margin-left: 16px;\\\">` : ''}\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 4: \\\/\\\/ Logo on right\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: flex-start;\\\">\\n                    <\/p>\n<div style=\\\"flex: 1;\\\">\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${customFields}\\n                        ${ctaButton}\\n                        ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                    <\\\/div>\\n                    ${data.companyLogo ? `<\/p>\n<div style=\\\"margin-left: 20px;\\\"><img src=\\\"${data.companyLogo}\\\" style=\\\"max-height: 60px;\\\"><\\\/div>` : ''}\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 5: \\\/\\\/ Minimal left\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: center;\\\">\\n                    <\/p>\n<div>\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${ctaButton}\\n                    <\\\/div>\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 60px; height: 60px; border-radius: 50%; margin-left: 20px;\\\">` : ''}\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 6: \\\/\\\/ Two column\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; gap: 20px;\\\">\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0;\\\">` : ''}\\n                    <\/p>\n<div style=\\\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1;\\\">\\n                        <\/p>\n<div>\\n                            <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                            <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                            ${customFields}\\n                        <\\\/div>\\n                        <\/p>\n<div>\\n                            <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                            ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                            ${ctaButton}\\n                        <\\\/div>\\n                    <\\\/div>\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 7: \\\/\\\/ Photo left with CTA\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: flex-start; gap: 16px;\\\">\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;\\\">` : ''}\\n                    <\/p>\n<div style=\\\"flex: 1;\\\">\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6; margin-bottom: 8px;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${ctaButton}\\n                        ${customFields}\\n                        ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                    <\\\/div>\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 8: \\\/\\\/ Centered with photo\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; text-align: center;\\\">\\n                    ${data.profilePicture ? `<\/p>\n<div style=\\\"margin-bottom: 12px;\\\"><img src=\\\"${data.profilePicture}\\\" style=\\\"width: 80px; height: 80px; border-radius: 50%;\\\"><\\\/div>` : ''}\\n                    <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6; margin-bottom: 12px;\\\">${contactInfo}<\\\/div>\\n                    ${socialLinks ? `<\/p>\n<div style=\\\"margin: 12px 0; justify-content: center; display: flex;\\\">${socialLinks}<\\\/div>` : ''}\\n                    ${ctaButton}\\n                    ${customFields}\\n                    ${data.companyLogo ? `<\/p>\n<div style=\\\"margin: 12px 0;\\\"><img src=\\\"${data.companyLogo}\\\" style=\\\"max-height: 40px;\\\"><\\\/div>` : ''}\\n                    ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 12px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 9: \\\/\\\/ Right aligned\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: flex-start;\\\">\\n                    <\/p>\n<div style=\\\"text-align: left;\\\">\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6; margin-bottom: 8px;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${ctaButton}\\n                        ${customFields}\\n                        ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                    <\\\/div>\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 80px; height: 80px; border-radius: 50%; margin-left: 20px;\\\">` : ''}\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 10: \\\/\\\/ Compact with photo\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor};\\\">\\n                    <\/p>\n<div style=\\\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\\\">\\n                        ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;\\\">` : ''}\\n                        <\/p>\n<div>\\n                            <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 2px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                            <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 4px;\\\">${data.jobTitle}<\\\/div>\\n                            <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.4;\\\">${contactInfo}<\\\/div>\\n                        <\\\/div>\\n                    <\\\/div>\\n                    ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                    ${ctaButton}\\n                    ${customFields}\\n                    ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 11: \\\/\\\/ Minimal right\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; justify-content: space-between; align-items: flex-start;\\\">\\n                    <\/p>\n<div>\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${customFields}\\n                        ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                    <\\\/div>\\n                    <\/p>\n<div style=\\\"text-align: center; margin-left: 20px;\\\">\\n                        ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 60px; height: 60px; border-radius: 50%; margin-bottom: 8px; display: block;\\\">` : ''}\\n                        ${ctaButton}\\n                    <\\\/div>\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        case 12: \\\/\\\/ Stacked layout\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor}; display: flex; align-items: flex-start; gap: 16px;\\\">\\n                    ${data.profilePicture ? `<img src=\\\"${data.profilePicture}\\\" style=\\\"width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;\\\">` : ''}\\n                    <\/p>\n<div style=\\\"flex: 1;\\\">\\n                        <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle} | ${data.company}<\\\/div>\\n                        <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6; margin-bottom: 8px;\\\">${contactInfo}<\\\/div>\\n                        ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                        ${ctaButton}\\n                        ${customFields}\\n                        ${data.handwrittenSignature ? `<\/p>\n<div style=\\\"margin-top: 8px;\\\"><img src=\\\"${data.handwrittenSignature}\\\" style=\\\"max-height: 40px;\\\"><\\\/div>` : ''}\\n                        ${data.companyLogo ? `<\/p>\n<div style=\\\"margin-top: 8px;\\\"><img src=\\\"${data.companyLogo}\\\" style=\\\"max-height: 40px;\\\"><\\\/div>` : ''}\\n                        ${data.legalContent ? `<\/p>\n<div style=\\\"font-size: 11px; color: #94A3B8; margin-top: 8px;\\\">${data.legalContent}<\\\/div>` : ''}\\n\\n                    <\\\/div>\\n                <\\\/div>\\n            `;\\n            break;\\n            \\n        default:\\n            signatureHTML = `\\n                <\/p>\n<div style=\\\"font-family: ${data.fontFamily}; font-size: ${data.fontSize}; line-height: 1.4; color: ${data.textColor};\\\">\\n                    <\/p>\n<div style=\\\"font-size: 18px; font-weight: bold; margin-bottom: 4px;\\\">${data.firstName} ${data.lastName}<\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 14px; color: ${data.themeColor}; margin-bottom: 8px;\\\">${data.jobTitle}<\\\/div>\\n                    <\/p>\n<div style=\\\"font-size: 13px; line-height: 1.6;\\\">${contactInfo}<\\\/div>\\n                    ${socialLinks ? `<\/p>\n<div style=\\\"margin: 8px 0;\\\">${socialLinks}<\\\/div>` : ''}\\n                    ${ctaButton}\\n\\n                <\\\/div>\\n            `;\\n    }\\n\\n    return signatureHTML.trim();\\n}\\n\\nfunction igUpdatePreview() {\\n    const preview = document.getElementById('ig-signaturePreview');\\n    if (preview) {\\n        preview.innerHTML = igGenerateSignatureHTML();\\n    }\\n}\\n\\nfunction igGenerateSignature() {\\n    igUpdatePreview();\\n}\\n\\nfunction igCopySignature() {\\n    const signatureHTML = igGenerateSignatureHTML();\\n    \\n    if (navigator.clipboard && window.isSecureContext) {\\n        navigator.clipboard.writeText(signatureHTML).then(() => {\\n            alert('Signature HTML copied to clipboard! You can now paste it into your email client.');\\n        }).catch(() => {\\n            igFallbackCopy(signatureHTML);\\n        });\\n    } else {\\n        igFallbackCopy(signatureHTML);\\n    }\\n}\\n\\nfunction igFallbackCopy(text) {\\n    const tempDiv = document.createElement('div');\\n    tempDiv.innerHTML = text;\\n    tempDiv.style.position = 'fixed';\\n    tempDiv.style.left = '-9999px';\\n    document.body.appendChild(tempDiv);\\n    \\n    const range = document.createRange();\\n    range.selectNode(tempDiv);\\n    window.getSelection().removeAllRanges();\\n    window.getSelection().addRange(range);\\n    \\n    try {\\n        document.execCommand('copy');\\n        alert('Signature HTML copied to clipboard! You can now paste it into your email client.');\\n    } catch (err) {\\n        alert('Please manually copy the signature from the preview above.');\\n    }\\n    \\n    document.body.removeChild(tempDiv);\\n    window.getSelection().removeAllRanges();\\n}\\n\\nfunction igClearAllFields() {\\n    const inputs = document.querySelectorAll('#ig-advanced-signature-generator input, #ig-advanced-signature-generator textarea, #ig-advanced-signature-generator select');\\n    inputs.forEach(input => {\\n        if (input.id !== 'ig-company' && input.id !== 'ig-website' && !input.id.includes('Color')) {\\n            input.value = '';\\n        }\\n    });\\n    \\n    \\\/\\\/ Clear custom fields\\n    const customFieldsContainer = document.getElementById('ig-customFields');\\n    if (customFieldsContainer) {\\n        customFieldsContainer.innerHTML = '';\\n    }\\n    igCustomFieldCount = 0;\\n    \\n    igUpdatePreview();\\n}\\n\\n\\\/\\\/ Initialize\\ndocument.addEventListener('DOMContentLoaded', function() {\\n    \\\/\\\/ Add event listeners to all form inputs\\n    const inputs = document.querySelectorAll('input[id^=\\\"ig-\\\"], textarea[id^=\\\"ig-\\\"], select[id^=\\\"ig-\\\"]');\\n    inputs.forEach(input => {\\n        input.addEventListener('input', igUpdatePreview);\\n    });\\n    \\n    \\\/\\\/ Setup color pickers\\n    igSetupColorPickers();\\n    \\n    \\\/\\\/ Initial preview\\n    igUpdatePreview();\\n});\\n<\\\/script>\\n\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"<\/p>\n<h1 data-start=\\\"103\\\" data-end=\\\"144\\\">FAQ: What Makes a Good Email Signature?<\\\/h1>\",\"title_element\":\"h1\"}},{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<h3 data-start=\\\"146\\\" data-end=\\\"191\\\">1. Why is an email signature important?<\\\/h3>\\n<\/p>\n<p data-start=\\\"192\\\" data-end=\\\"346\\\">Your email signature acts like a digital business card. It helps establish professionalism, builds trust, and makes it easy for recipients to contact you.<\\\/p>\\n<\/p>\n<hr data-start=\\\"348\\\" data-end=\\\"351\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"353\\\" data-end=\\\"404\\\">2. What should every email signature include?<\\\/h3>\\n<\/p>\n<p data-start=\\\"405\\\" data-end=\\\"418\\\">At minimum:<\\\/p>\\n<\/p>\n<ul data-start=\\\"419\\\" data-end=\\\"532\\\">\\n<\/p>\n<li data-start=\\\"419\\\" data-end=\\\"436\\\">\\n\n<p data-start=\\\"421\\\" data-end=\\\"436\\\"><strong data-start=\\\"421\\\" data-end=\\\"434\\\">Full name<\\\/strong><\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"437\\\" data-end=\\\"464\\\">\\n\n<p data-start=\\\"439\\\" data-end=\\\"464\\\"><strong data-start=\\\"439\\\" data-end=\\\"462\\\">Job title &amp; company<\\\/strong><\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"465\\\" data-end=\\\"508\\\">\\n\n<p data-start=\\\"467\\\" data-end=\\\"508\\\"><strong data-start=\\\"467\\\" data-end=\\\"506\\\">Phone number or main contact method<\\\/strong><\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"509\\\" data-end=\\\"532\\\">\\n\n<p data-start=\\\"511\\\" data-end=\\\"532\\\"><strong data-start=\\\"511\\\" data-end=\\\"530\\\">Company website<\\\/strong><\\\/p>\\n<\\\/li>\\n<\\\/ul>\\n<\/p>\n<p data-start=\\\"534\\\" data-end=\\\"589\\\">Optional: social media links, logo, or scheduling link.<\\\/p>\\n<\/p>\n<hr data-start=\\\"591\\\" data-end=\\\"594\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"596\\\" data-end=\\\"647\\\">3. Should I include my photo or company logo?<\\\/h3>\\n<\/p>\n<p data-start=\\\"648\\\" data-end=\\\"802\\\">Yes, but only if it looks professional and doesn\\u2019t make the signature too large. A clean logo reinforces branding, while a headshot adds a personal touch.<\\\/p>\\n<\/p>\n<hr data-start=\\\"804\\\" data-end=\\\"807\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"809\\\" data-end=\\\"856\\\">4. How long should an email signature be?<\\\/h3>\\n<\/p>\n<p data-start=\\\"857\\\" data-end=\\\"979\\\">Keep it concise\\u2014<strong data-start=\\\"873\\\" data-end=\\\"904\\\">3\\u20135 lines of text is ideal.<\\\/strong> Too much information can overwhelm readers and distract from your message.<\\\/p>\\n<\/p>\n<hr data-start=\\\"981\\\" data-end=\\\"984\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"986\\\" data-end=\\\"1024\\\">5. Can I add social media links?<\\\/h3>\\n<\/p>\n<p data-start=\\\"1025\\\" data-end=\\\"1157\\\">Yes, but limit them to <strong data-start=\\\"1048\\\" data-end=\\\"1073\\\">1\\u20133 relevant profiles<\\\/strong> (e.g., LinkedIn, Twitter). Use icons instead of long URLs to keep the design clean.<\\\/p>\\n<\/p>\n<hr data-start=\\\"1159\\\" data-end=\\\"1162\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"1164\\\" data-end=\\\"1216\\\">6. What design best practices should I follow?<\\\/h3>\\n<\/p>\n<ul data-start=\\\"1217\\\" data-end=\\\"1365\\\">\\n<\/p>\n<li data-start=\\\"1217\\\" data-end=\\\"1243\\\">\\n\n<p data-start=\\\"1219\\\" data-end=\\\"1243\\\">Stick to <strong data-start=\\\"1228\\\" data-end=\\\"1241\\\">1\\u20132 fonts<\\\/strong><\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1244\\\" data-end=\\\"1282\\\">\\n\n<p data-start=\\\"1246\\\" data-end=\\\"1282\\\">Use company brand colors sparingly<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1283\\\" data-end=\\\"1324\\\">\\n\n<p data-start=\\\"1285\\\" data-end=\\\"1324\\\">Ensure readability with good contrast<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1325\\\" data-end=\\\"1365\\\">\\n\n<p data-start=\\\"1327\\\" data-end=\\\"1365\\\">Avoid excessive images or animations<\\\/p>\\n<\\\/li>\\n<\\\/ul>\\n<\/p>\n<hr data-start=\\\"1367\\\" data-end=\\\"1370\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"1372\\\" data-end=\\\"1427\\\">7. Should I include a disclaimer or legal notice?<\\\/h3>\\n<\/p>\n<p data-start=\\\"1428\\\" data-end=\\\"1538\\\">Only if required by your company or industry. Keep it short and place it <strong data-start=\\\"1501\\\" data-end=\\\"1537\\\">below the main signature content<\\\/strong>.<\\\/p>\\n<\/p>\n<hr data-start=\\\"1540\\\" data-end=\\\"1543\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"1545\\\" data-end=\\\"1603\\\">8. How do I make my email signature mobile-friendly?<\\\/h3>\\n<\/p>\n<ul data-start=\\\"1604\\\" data-end=\\\"1758\\\">\\n<\/p>\n<li data-start=\\\"1604\\\" data-end=\\\"1638\\\">\\n\n<p data-start=\\\"1606\\\" data-end=\\\"1638\\\">Use a <strong data-start=\\\"1612\\\" data-end=\\\"1636\\\">single-column layout<\\\/strong><\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1639\\\" data-end=\\\"1660\\\">\\n\n<p data-start=\\\"1641\\\" data-end=\\\"1660\\\">Avoid wide images<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1661\\\" data-end=\\\"1714\\\">\\n\n<p data-start=\\\"1663\\\" data-end=\\\"1714\\\">Use <strong data-start=\\\"1667\\\" data-end=\\\"1686\\\">clickable links<\\\/strong> instead of long text URLs<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1715\\\" data-end=\\\"1758\\\">\\n\n<p data-start=\\\"1717\\\" data-end=\\\"1758\\\">Test on both desktop and mobile devices<\\\/p>\\n<\\\/li>\\n<\\\/ul>\\n<\/p>\n<hr data-start=\\\"1760\\\" data-end=\\\"1763\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"1765\\\" data-end=\\\"1814\\\">9. Can I promote something in my signature?<\\\/h3>\\n<\/p>\n<p data-start=\\\"1815\\\" data-end=\\\"1849\\\">Yes, but do it subtly. Examples:<\\\/p>\\n<\/p>\n<ul data-start=\\\"1850\\\" data-end=\\\"1996\\\">\\n<\/p>\n<li data-start=\\\"1850\\\" data-end=\\\"1882\\\">\\n\n<p data-start=\\\"1852\\\" data-end=\\\"1882\\\">A <strong data-start=\\\"1854\\\" data-end=\\\"1880\\\">link to book a meeting<\\\/strong><\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1883\\\" data-end=\\\"1936\\\">\\n\n<p data-start=\\\"1885\\\" data-end=\\\"1936\\\">A <strong data-start=\\\"1887\\\" data-end=\\\"1900\\\">short CTA<\\\/strong> like \\u201cDownload our latest report\\u201d<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"1937\\\" data-end=\\\"1996\\\">\\n\n<p data-start=\\\"1939\\\" data-end=\\\"1996\\\">A <strong data-start=\\\"1941\\\" data-end=\\\"1964\\\">banner for an event<\\\/strong> (kept small and professional)<\\\/p>\\n<\\\/li>\\n<\\\/ul>\\n<\/p>\n<hr data-start=\\\"1998\\\" data-end=\\\"2001\\\" \\\/>\\n<\/p>\n<h3 data-start=\\\"2003\\\" data-end=\\\"2042\\\">10. What mistakes should I avoid?<\\\/h3>\\n<\/p>\n<ul data-start=\\\"2043\\\" data-end=\\\"2196\\\">\\n<\/p>\n<li data-start=\\\"2043\\\" data-end=\\\"2077\\\">\\n\n<p data-start=\\\"2045\\\" data-end=\\\"2077\\\">Using too many fonts or colors<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"2078\\\" data-end=\\\"2116\\\">\\n\n<p data-start=\\\"2080\\\" data-end=\\\"2116\\\">Adding unnecessary quotes or jokes<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"2117\\\" data-end=\\\"2152\\\">\\n\n<p data-start=\\\"2119\\\" data-end=\\\"2152\\\">Including outdated contact info<\\\/p>\\n<\\\/li>\\n<\/p>\n<li data-start=\\\"2153\\\" data-end=\\\"2196\\\">\\n\n<p data-start=\\\"2155\\\" data-end=\\\"2196\\\">Using huge images that break formatting<\\\/p>\\n<\\\/li>\\n<\\\/ul>\",\"margin\":\"default\"}}]}]}]}],\"version\":\"4.5.28\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Email Signature Template Generator Create your free email signature with our easy-to-use signature generator Details Images Templates Styles Enter Your Signature Details * Indicates a required field First Name * Last Name * Job Title Department Company Name Office Phone Number Mobile Phone Number Website URL Email Address Address Address Line 1 City State\/Province ZIP\/Postal [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48208","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6.1 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Email Signature Template Generator | InvestGlass<\/title>\n<meta name=\"description\" content=\"Email Signature Template Generator Create your free email signature with our easy-to-use signature generator Details Images Templates Styles Enter Your\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.investglass.com\/nl\/sjabloon-voor-e-mailhandtekening-generator\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Email Signature Template Generator\" \/>\n<meta property=\"og:description\" content=\"Email Signature Template Generator Create your free email signature with our easy-to-use signature generator Details Images Templates Styles Enter Your\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.investglass.com\/nl\/sjabloon-voor-e-mailhandtekening-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"InvestGlass\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-28T10:35:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.investglass.com\/wp-content\/uploads\/2025\/09\/Alexandre-Gaillard-InvestGlass.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"1076\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@investglass\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sjabloongenerator voor e-mailhandtekeningen | InvestGlass","description":"Generator voor sjablonen voor e-mailhandtekeningen Maak uw gratis e-mailhandtekening met onze gebruiksvriendelijke generator voor handtekeningen Details Afbeeldingen Sjablonen Stijlen Voer uw","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.investglass.com\/nl\/sjabloon-voor-e-mailhandtekening-generator\/","og_locale":"nl_NL","og_type":"article","og_title":"Email Signature Template Generator","og_description":"Email Signature Template Generator Create your free email signature with our easy-to-use signature generator Details Images Templates Styles Enter Your","og_url":"https:\/\/www.investglass.com\/nl\/sjabloon-voor-e-mailhandtekening-generator\/","og_site_name":"InvestGlass","article_modified_time":"2025-10-28T10:35:44+00:00","og_image":[{"width":1746,"height":1076,"url":"https:\/\/www.investglass.com\/wp-content\/uploads\/2025\/09\/Alexandre-Gaillard-InvestGlass.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@investglass","twitter_misc":{"Geschatte leestijd":"5 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/#article","isPartOf":{"@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/"},"author":{"name":"InvestGlass","@id":"https:\/\/www.investglass.com\/#\/schema\/person\/4682ebae5d718a2ed1b77c9dab0a1f24"},"headline":"Email Signature Template Generator","datePublished":"2025-09-26T14:03:18+00:00","dateModified":"2025-10-28T10:35:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/"},"wordCount":3454,"publisher":{"@id":"https:\/\/www.investglass.com\/#organization"},"inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/","url":"https:\/\/www.investglass.com\/email-signature-template-generator\/","name":"Sjabloongenerator voor e-mailhandtekeningen | InvestGlass","isPartOf":{"@id":"https:\/\/www.investglass.com\/#website"},"datePublished":"2025-09-26T14:03:18+00:00","dateModified":"2025-10-28T10:35:44+00:00","description":"Generator voor sjablonen voor e-mailhandtekeningen Maak uw gratis e-mailhandtekening met onze gebruiksvriendelijke generator voor handtekeningen Details Afbeeldingen Sjablonen Stijlen Voer uw","breadcrumb":{"@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.investglass.com\/email-signature-template-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"InvestGlass","item":"https:\/\/www.investglass.com\/"},{"@type":"ListItem","position":2,"name":"Email Signature Template Generator"}]},{"@type":"WebSite","@id":"https:\/\/www.investglass.com\/#website","url":"https:\/\/www.investglass.com\/","name":"InvestGlass","description":"De Zwitserse soevereine CRM","publisher":{"@id":"https:\/\/www.investglass.com\/#organization"},"alternateName":"InvestGlass","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.investglass.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":["Organization","Place"],"@id":"https:\/\/www.investglass.com\/#organization","name":"InvestGlass","url":"https:\/\/www.investglass.com\/","logo":{"@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/#local-main-organization-logo"},"image":{"@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/#local-main-organization-logo"},"sameAs":["https:\/\/x.com\/investglass","https:\/\/www.linkedin.com\/company\/investglass\/","https:\/\/www.youtube.com\/channel\/UCt5r5XgzbSq2KhguJQxCwyA"],"telephone":[],"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"opens":"09:00","closes":"17:00"}]},{"@type":"Person","@id":"https:\/\/www.investglass.com\/#\/schema\/person\/4682ebae5d718a2ed1b77c9dab0a1f24","name":"InvestGlass","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/secure.gravatar.com\/avatar\/8fb928ff37ca45def17ac75d6e799fb75f3f24f123aa31be169bfaf65f59dd40?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8fb928ff37ca45def17ac75d6e799fb75f3f24f123aa31be169bfaf65f59dd40?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8fb928ff37ca45def17ac75d6e799fb75f3f24f123aa31be169bfaf65f59dd40?s=96&d=mm&r=g","caption":"InvestGlass"},"sameAs":["https:\/\/www.investglass.com"],"url":"https:\/\/www.investglass.com\/nl\/author\/axginvestglass-com\/"},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.investglass.com\/email-signature-template-generator\/#local-main-organization-logo","url":"https:\/\/www.investglass.com\/wp-content\/uploads\/2023\/10\/InvestGlass-blue2.png","contentUrl":"https:\/\/www.investglass.com\/wp-content\/uploads\/2023\/10\/InvestGlass-blue2.png","width":839,"height":192,"caption":"InvestGlass"}]}},"_links":{"self":[{"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/pages\/48208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/comments?post=48208"}],"version-history":[{"count":0,"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/pages\/48208\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.investglass.com\/nl\/wp-json\/wp\/v2\/media?parent=48208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}