Office of Strategic Communications
Brand Guide
Office of Strategic Communications
Brand Guide

Email Signature Tool

Email Signature Tool
Full Name
Full Name
Title
Department
Email
Phone
Website
Address
Adviser text

Hey Coach,

Just wanted to follow up on the schedule for Saturday’s game. I’ll be ready to roar starting at 10:00 a.m., and I’ve got some new dance moves prepared for the fourth quarter.

Also, can you confirm if I’m doing the tunnel entrance with the team?

We Are!

jQuery(document).ready(function($) { // THEME DEFINITIONS - Add/edit themes here const SIGNATURE_THEMES = { classic: { name: 'Penn State', nameColor: '#001E44', titleColor: '#666666', textColor: '#444444', linkColor: '#1E407C', }, sky: { name: 'Pennsylvania Sky', nameColor: '#005FA9', titleColor: '#314D64', textColor: '#444444', linkColor: '#005FA9', }, navy: { name: 'Navy and Slate', nameColor: '#001E44', titleColor: '#314D64', textColor: '#444444', linkColor: '#001E44', }, forest: { name: 'Penn\'s Forest', nameColor: '#4A7729', titleColor: '#666666', textColor: '#444444', linkColor: '#4A7729', }, og87: { name: 'Original \'87', nameColor: '#BC204B', titleColor: '#314D64', textColor: '#444444', linkColor: '#BC204B', }, lion: { name: 'Lion', nameColor: '#6A3028', titleColor: '#314D64', textColor: '#444444', linkColor: '#B88965', }, wonder: { name: 'Perpetual Wonder', nameColor: '#491D70', titleColor: '#314D64', textColor: '#444444', linkColor: '#AC8DCE', }, coaly: { name: 'Old Coaly', nameColor: '#000321', titleColor: '#262626', textColor: '#262626', linkColor: '#001E44', }, katy: { name: 'Katelyn Perry', nameColor: '#ff00ff', titleColor: '#dc5cff', textColor: '#ff4022', linkColor: '#BC204B', }, barry: { name: 'Barry W. Ickes', nameColor: '#ffff00', titleColor: '#3333ff', textColor: '#3333ff', linkColor: '#993366', }, }; // BASE STYLE SETTINGS (same for all themes) const BASE_STYLES = { fontFamily: 'Arial, Helvetica, sans-serif', baseFontSize: 14, nameFontWeight: 700, letterSpacing: 0, lineHeight: 1.4 }; // Get current theme (defaults to 'classic') function getCurrentTheme() { const selectedTheme = $('input[name="sig-theme"]:checked').val() || 'classic'; return { ...BASE_STYLES, ...SIGNATURE_THEMES[selectedTheme] }; } // Populate theme radio buttons dynamically function populateThemeOptions() { const $themeContainer = $('#sig-theme-container'); if ($themeContainer.length === 0) { console.log('No theme container found - skipping theme options'); return; } let themeHTML = ''; let isFirst = true; for (const [themeKey, themeData] of Object.entries(SIGNATURE_THEMES)) { const checkedAttr = isFirst ? 'checked' : ''; themeHTML += ` `; isFirst = false; } $themeContainer.html(themeHTML); console.log('Theme options populated'); // Add event listener for theme changes $('input[name="sig-theme"]').on('change', function() { console.log('Theme changed to:', $(this).val()); // Check if any fields have actual values (not just placeholders) const hasValues = $('#sig-full-name').val() || $('#sig-email').val() || $('#sig-title').val(); // Use placeholders if no actual values exist updatePreview(!hasValues); }); } // Microsoft Graph API Configuration const msalConfig = { auth: { clientId: "a71554de-e1d8-4f62-bb93-50d68c64d3f8", authority: "https://login.microsoftonline.com/7cf48d45-3ddb-4389-a9c1-c115526eb52e", redirectUri: window.location.origin + window.location.pathname }, cache: { cacheLocation: "sessionStorage", storeAuthStateInCookie: false } }; const loginRequest = { scopes: ["User.Read"] }; let msalInstance = null; // Initialize MSAL function initializeMSAL() { if (typeof msal !== 'undefined' && msal.PublicClientApplication) { msalInstance = new msal.PublicClientApplication(msalConfig); console.log('MSAL initialized successfully'); return true; } else { console.error('MSAL library not loaded'); return false; } } // Sign in and fetch user data from Microsoft Graph async function signInAndFetchUserData() { if (!msalInstance) { if (!initializeMSAL()) { alert('Authentication library not loaded. Please refresh the page.'); return; } } try { console.log('Starting Penn State sign-in...'); const $btn = $('#signin-psu-btn .elementor-button-text'); $btn.text('Signing in...'); $('#signin-psu-btn').prop('disabled', true); const loginResponse = await msalInstance.loginPopup(loginRequest); console.log('Sign-in successful:', loginResponse); const tokenResponse = await msalInstance.acquireTokenSilent({ ...loginRequest, account: loginResponse.account }); console.log('Access token acquired'); const graphResponse = await fetch('https://graph.microsoft.com/v1.0/me?$select=displayName,mail,userPrincipalName,jobTitle,department,officeLocation,businessPhones,mobilePhone,companyName', { headers: { 'Authorization': 'Bearer ' + tokenResponse.accessToken } }); if (!graphResponse.ok) { throw new Error('Failed to fetch user data from Microsoft Graph'); } const userData = await graphResponse.json(); console.log('User data from Graph API:', userData); function formatPhoneNumber(phone) { if (!phone) return ''; let cleaned = phone.replace(/\D/g, ''); if (cleaned.length === 11 && cleaned.startsWith('1')) { cleaned = cleaned.substr(1); } if (cleaned.length === 10) { return '(' + cleaned.substr(0, 3) + ') ' + cleaned.substr(3, 3) + '-' + cleaned.substr(6, 4); } return phone; } if (userData.displayName) { const formattedName = formatDisplayName(userData.displayName); $('#sig-full-name').val(formattedName).trigger('input'); } if (userData.mail || userData.userPrincipalName) { $('#sig-email').val(userData.mail || userData.userPrincipalName).trigger('input'); } if (userData.jobTitle) { $('#sig-title').val(userData.jobTitle).trigger('input'); } if (userData.department) { $('#sig-department').val(userData.department).trigger('input'); } else if (userData.companyName && userData.companyName !== 'Penn State' && userData.companyName !== 'The Pennsylvania State University') { $('#sig-department').val(userData.companyName).trigger('input'); } let phoneToUse = ''; if (userData.businessPhones && userData.businessPhones.length > 0) { phoneToUse = userData.businessPhones[0]; } else if (userData.mobilePhone) { phoneToUse = userData.mobilePhone; } if (phoneToUse) { const formattedPhone = formatPhoneNumber(phoneToUse); $('#sig-phone').val(formattedPhone).trigger('input'); $('#sig-phone').trigger('change').trigger('blur'); } if (userData.officeLocation) { $('#sig-address').val(userData.officeLocation).trigger('input'); } $btn.text('Auto-filled from Penn State'); $('#signin-psu-btn').prop('disabled', false); console.log('Form auto-filled successfully'); } catch (error) { console.error('Sign-in or data fetch failed:', error); const $btn = $('#signin-psu-btn .elementor-button-text'); $btn.text('Sign-in failed - try again'); $('#signin-psu-btn').prop('disabled', false); if (error.errorCode === 'user_cancelled') { console.log('User cancelled sign-in'); } else { alert('Could not sign in with Penn State. Please fill out the form manually.'); } } } function formatDisplayName(name) { if (!name) return ''; if (name.includes(',')) { const parts = name.split(',').map(part => part.trim()); if (parts.length === 2) { return parts[1] + ' ' + parts[0]; } } return name; } // Function to generate Outlook-compatible signature HTML function generateSignatureHTML(usePlaceholders = false) { const fullName = $('#sig-full-name').val() || (usePlaceholders ? $('#sig-full-name').attr('placeholder') : ''); const pronouns = $('#sig-pronouns').val() || (usePlaceholders ? $('#sig-pronouns').attr('placeholder') : ''); const title = $('#sig-title').val() || (usePlaceholders ? $('#sig-title').attr('placeholder') : ''); const department = $('#sig-department').val() || (usePlaceholders ? $('#sig-department').attr('placeholder') : ''); const email = $('#sig-email').val() || (usePlaceholders ? $('#sig-email').attr('placeholder') : ''); const phone = $('#sig-phone').val() || (usePlaceholders ? $('#sig-phone').attr('placeholder') : ''); const website = $('#sig-website').val() || (usePlaceholders ? $('#sig-website').attr('placeholder') : ''); const address = $('#sig-address').val() || (usePlaceholders ? $('#sig-address').attr('placeholder') : ''); const isAdviser = $('input[name="sig-adviser"]').is(':checked'); console.log('generateSignatureHTML: Building signature with values:', { fullName, pronouns, title, department, email, phone, website, address, isAdviser, usePlaceholders }); // Get current theme colors const theme = getCurrentTheme(); const { fontFamily, baseFontSize, nameColor, titleColor, textColor, linkColor, nameFontWeight, letterSpacing, lineHeight } = theme; // Build inline styles const containerStyle = 'font-family: ' + fontFamily + '; font-size: ' + baseFontSize + 'px; color: ' + textColor + '; line-height: ' + lineHeight + '; letter-spacing: ' + letterSpacing + 'px;'; const nameStyle = 'font-size: ' + (baseFontSize + 4) + 'px; font-weight: ' + nameFontWeight + '; color: ' + nameColor + '; margin: 0 0 4px 0;'; const pronounsStyle = 'font-size: ' + (baseFontSize - 1) + 'px; font-weight: 400; color: ' + textColor + '; font-style: normal;'; const titleStyle = 'font-size: ' + baseFontSize + 'px; color: ' + titleColor + '; font-style: italic; margin: 0 0 2px 0;'; const orgStyle = 'font-size: ' + (baseFontSize - 1) + 'px; color: ' + textColor + '; font-weight: 600; margin: 0 0 8px 0;'; const textStyle = 'font-size: ' + (baseFontSize - 1) + 'px; color: ' + textColor + '; margin: 0 0 2px 0;'; const linkStyle = 'color: ' + linkColor + '; text-decoration: none;'; let html = '
'; if (fullName) { html += '
'; html += escapeHtml(fullName); if (pronouns) { html += ' ' + escapeHtml(pronouns) + ''; } html += '
'; } if (title || department) { let titleLine = ''; if (title) titleLine += escapeHtml(title); if (title && department) titleLine += ', '; if (department) titleLine += escapeHtml(department); html += '
' + titleLine + '
'; } if (email) { html += '
'; html += '' + escapeHtml(email) + ''; html += '
'; } if (phone) { html += '
'; html += '' + escapeHtml(phone) + ''; html += '
'; } if (website) { let displayUrl = website.replace(/^https?:\/\//i, '').replace(/\/$/, ''); html += '
'; html += '' + escapeHtml(displayUrl) + ''; html += '
'; } if (address) { html += '
' + escapeHtml(address) + '
'; } // Add adviser text if checkbox is checked if (isAdviser) { const adviserHTML = $('#advisers-text .elementor-widget-container').html(); if (adviserHTML) { // Add spacing before adviser section html += '
'; // Process the adviser HTML to apply consistent styling const $tempDiv = $('
').html(adviserHTML); // Style all paragraphs $tempDiv.find('p').each(function() { $(this).attr('style', textStyle); }); // Style all links $tempDiv.find('a').each(function() { $(this).attr('style', linkStyle); }); // Style strong tags $tempDiv.find('strong').each(function() { $(this).attr('style', 'font-weight: 700; color: ' + textColor + ';'); }); // Style ordered lists $tempDiv.find('ol').each(function() { $(this).attr('style', 'font-size: ' + (baseFontSize - 1) + 'px; color: ' + textColor + '; margin: 4px 0; padding-left: 20px;'); }); $tempDiv.find('li').each(function() { $(this).attr('style', 'margin-bottom: 4px;'); }); html += $tempDiv.html(); } } html += '
'; console.log('generateSignatureHTML: Generated HTML length:', html.length); return html; } function escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } function updatePreview(usePlaceholders = false) { console.log('updatePreview: Updating signature preview, usePlaceholders:', usePlaceholders); const html = generateSignatureHTML(usePlaceholders); $('#signature-preview').html(html); // Reset copy button text when signature changes const $copyBtn = $('#copy-signature-btn .elementor-button-text'); $copyBtn.text('Copy Email Signature'); } function copySignatureToClipboard() { const html = generateSignatureHTML(false); console.log('copySignatureToClipboard: Attempting to copy formatted HTML'); if (navigator.clipboard && window.ClipboardItem) { try { const htmlBlob = new Blob([html], { type: 'text/html' }); const textBlob = new Blob([html], { type: 'text/plain' }); const clipboardItem = new ClipboardItem({ 'text/html': htmlBlob, 'text/plain': textBlob }); navigator.clipboard.write([clipboardItem]).then(() => { console.log('copySignatureToClipboard: Copied formatted HTML via Clipboard API'); showCopyFeedback(true); }).catch(err => { console.error('copySignatureToClipboard: Clipboard API failed:', err); fallbackCopy(html); }); } catch (err) { console.error('copySignatureToClipboard: ClipboardItem error:', err); fallbackCopy(html); } } else { fallbackCopy(html); } } function fallbackCopy(html) { console.log('fallbackCopy: Using fallback method'); const $temp = $('
'); $temp.html(html); $temp.css({ position: 'absolute', left: '-9999px', top: '0' }); $('body').append($temp); const range = document.createRange(); range.selectNodeContents($temp[0]); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); try { const successful = document.execCommand('copy'); console.log('fallbackCopy: execCommand result:', successful); showCopyFeedback(successful); } catch (err) { console.error('fallbackCopy: Error:', err); showCopyFeedback(false); } selection.removeAllRanges(); $temp.remove(); } function showCopyFeedback(success) { const $btn = $('#copy-signature-btn .elementor-button-text'); if (success) { $btn.text('✓ Email signature copied'); console.log('showCopyFeedback: Copy successful'); } else { $btn.text('✗ Copy failed - try again'); console.log('showCopyFeedback: Copy failed'); } } // Event listeners $('#sig-full-name, #sig-pronouns, #sig-title, #sig-department, #sig-email, #sig-website, #sig-address').on('input', function() { console.log('Input detected on:', $(this).attr('id')); updatePreview(false); }); // Add adviser checkbox listener $('input[name="sig-adviser"]').on('change', function() { console.log('Adviser checkbox changed:', $(this).is(':checked')); // Check if any fields have actual values (not just placeholders) const hasValues = $('#sig-full-name').val() || $('#sig-email').val() || $('#sig-title').val(); // Use placeholders if no actual values exist updatePreview(!hasValues); }); $('#sig-phone').on('input change keyup paste blur', function() { console.log('Phone field event detected'); setTimeout(function() { // Check if phone field has any actual numbers (not just mask characters) const phoneValue = $('#sig-phone').val(); const hasNumbers = phoneValue && phoneValue.replace(/\D/g, '').length > 0; // Check if any other fields have actual values const hasOtherValues = $('#sig-full-name').val() || $('#sig-email').val() || $('#sig-title').val(); // Use placeholders if no actual values exist updatePreview(!(hasNumbers || hasOtherValues)); }, 50); }); $('#copy-signature-btn').on('click', 'a.elementor-button', function(e) { e.preventDefault(); console.log('Copy button clicked'); copySignatureToClipboard(); }); $('#signin-psu-btn').on('click', function(e) { e.preventDefault(); console.log('Sign in with Penn State button clicked'); signInAndFetchUserData(); }); // Initialize console.log('Signature generator initialized'); populateThemeOptions(); // Populate theme radio buttons updatePreview(true); });

Best Practices

To maintain consistency and professionalism across the College of the Liberal Arts, we recommend the following guidelines for email signatures.

Keep it simple and professional

  1. Use a clean format and avoid using decorative fonts, colors, personal quotes, or background images.
  2. Limit your signature to essential information—avoid long or overly complex layouts.

Follow Penn State naming conventions

To ensure consistency with University editorial standards:

  1. Use the college’s full and correct name.
    • ✅ College of the Liberal Arts
    • ❌ College of Liberal Arts
  2. Use Penn State when referring to the University.
    • ✅ Penn State
    • ❌ The Pennsylvania State University
    • ❌ Penn State University
  3. List your title, unit, and college affiliation clearly.
    • ✅ Department of English
    • ✅ School of Public Policy
    • ❌ English Department
    • ❌ Public Policy School
  4. Always use full unit names on first reference; avoid acronyms unless widely recognized and defined elsewhere.
  5. Capitalize the formal names of departments and units. Use lowercase for informal or generic references.

Pronouns are optional

  • You may include your personal pronouns after your name, but it is not required.
  • If included, list them in parentheses or on a separate line to maintain clarity (e.g., she/her, they/them).

Include contact details thoughtfully

  • You may include your Penn State phone number if you have one. Personal phone numbers are optional.
  • Use your official @psu.edu email address only.

Add links purposefully

  • We encourage you to include a link to the College of the Liberal Arts website: la.psu.edu
  • You may include links to official college social media icons following the instructions already provided in the Brand Guide.
  • Avoid linking to personal websites unless they are relevant to your position (e.g., faculty profile pages, professional portfolios).

Optional: Include a professional call to action

  • You may add one brief call to action related to your work. Examples include:
    • Explore mentoring and engagement opportunities in Liberal Arts.
    • Learn more about undergraduate research in Liberal Arts.
    • Support student success in Liberal Arts.
    • Explore marketing resources for Liberal Arts faculty and staff.
  • Keep calls to action short, relevant, and aligned with college priorities.

Keep accessibility in mind

  • Use standard fonts like Arial or Calibri, size 10–12.
  • Use the default color. It will switch between black and white depending on whether the viewer is using dark mode or light mode.
  • Avoid images as the only form of information—screen readers may not detect them.
  • If using social media icons, always include descriptive alt text (instructions already available in the Brand Guide).

Avoid unnecessary clutter

  • Do not include inspirational quotes, emojis, animated GIFs, or personal statements unrelated to your role.
  • Do not use confidentiality disclaimers unless required by policy in your unit.
  • Avoid adding multiple logos or graphics; the Liberal Arts wordmark is sufficient if used.