Step 1
Building your signature
The generator is fully live — every change you make updates the preview on the right in real time. There's no submit button; just fill in what you need and skip what you don't.
Fill in your details
Start with the Personal tab. Enter your name, job title, company, email address, phone number, and website. All fields are optional — your signature will look clean with just a name and title if that's all you want.
💡 The live preview clears demo data as soon as you start typingAdd a booking or CTA link
If you use Calendly, TidyCal, or any scheduling tool, paste the URL in the Booking / CTA link field. Add a custom button label like "Book a call" or leave it as the default.
Choose your design
Go to the Design tab. Pick one of the 12 colour presets, enter a custom hex code, or use the colour picker. Select a Gmail-safe font. Toggle on or off: profile photo, divider line, bold name.
💡 Upload your photo first — the tool tries to auto-suggest an accent colour from itAdd social links
In the Social tab, paste your profile URLs for LinkedIn, Instagram, Facebook, X, YouTube, or TikTok. The icons appear in the signature using your accent colour. Toggle to text-only mode if you prefer.
Add extras (optional)
The Extras tab has two optional elements: a promotional banner (text or image, with custom background colour) and a legal disclaimer (choose from 4 presets or write your own).
Reference
What each tab controls
Your progress saves automatically. The generator stores everything in your browser's localStorage — so you can close the tab and come back later without losing your work. It persists until you clear your browser data.
Personal tab
Name · Pronouns (optional, shown below name) · Job title · Company name · Email · Phone · Website · Address · Time zone · Booking/CTA link · Profile photo URL · Company logo URL.
Design tab
Accent colour (12 presets + custom hex + picker) · Font family (Gmail-safe options only) · Layout toggles: show profile photo, show divider line, bold name.
Social tab
LinkedIn · Instagram · Facebook · X (Twitter) · YouTube · TikTok. Toggle between icon mode (coloured) and text-only mode.
Extras tab
Promotional banner (text or image URL, with custom background and text colours) · Legal disclaimer (choose from NDA notice, financial advice disclaimer, confidentiality notice, environmental note — or write your own).
Images
Adding photos and logos
Email clients can't read files from your computer — they only display images loaded from a public URL. This means your photo and logo need to be hosted somewhere publicly accessible on the internet.
Do not use Google Drive or Dropbox sharing links. These services block hotlinking and the image will not render in recipients' email clients. Use a proper image hosting service instead.
Where to host your image
- Your own website — best option. Upload to your site's media library and copy the direct image URL (ends in .jpg, .png, etc.)
- LinkedIn profile photo — right-click your LinkedIn headshot and copy image address. Works well for professional headshots.
- Imgur — free image hosting. Upload, then use the "Direct link" URL.
- GitHub — upload to a public repository and use the raw content URL.
- Cloudinary — free tier is generous and gives you a permanent CDN URL.
Image sizing
For your profile photo: a square (1:1) image works best. Aim for 200×200px minimum — the signature renders it at 80px but higher resolution looks sharp on Retina screens.
For your company logo: a horizontal logo (3:1 to 5:1 ratio) works well. PNG with transparent background is ideal. Aim for at least 300px wide.
Colour suggestion: Once you paste a valid photo URL, the generator attempts to extract the dominant colour and suggests it as your accent colour. Click the suggestion to apply it.
Step 2
Payment and download
Building and previewing costs nothing. You only pay when you're happy with your signature and want to take it away.
Click "Get your signature for $8"
When you're happy with the preview, click the payment button in the bottom of the form panel. You'll be taken to a Stripe checkout — secure, no account needed.
Complete payment on Stripe
Pay by card. Stripe handles everything — Send Like a Pro never sees your payment details. After payment you'll be redirected back to the generator automatically.
Copy or download your signature
Once unlocked, you'll see two buttons: Copy Signature copies the rendered HTML directly to your clipboard in a format Gmail and other email clients can paste natively. Download .html saves a file to your computer.
💡 "Copy Signature" is the easiest way — it pastes directly as a formatted signature, not raw codeSave your .html file after downloading. Your signature data is stored in your browser's localStorage, not on our servers. If you clear your browser, you'd need to re-enter your details — so keep the file as a backup.
Installation
Installing in Gmail
Gmail's signature editor accepts HTML directly when you paste using the Copy Signature button. No code editing needed.
Copy your signature
In the generator, click Copy Signature. This copies a rich HTML version to your clipboard.
Open Gmail Settings
In Gmail (web), click the gear icon (⚙) in the top-right corner, then click See all settings.
Go to the Signature section
Stay on the General tab. Scroll down to the Signature section. Click Create new and give it a name (e.g. "My signature").
Paste your signature
Click inside the signature text box, then press Cmd+V (Mac) or Ctrl+V (Windows). Your formatted signature should appear immediately — with your photo, colour, and layout intact.
💡 If it pastes as code instead of a formatted signature, use the Copy Signature button again (not Ctrl+C from the HTML file)Set as default and save
Under the signature box, set it as the default for new emails and/or replies. Scroll to the bottom and click Save Changes.
Installing in Outlook
Download the .html file
In the generator, click Download .html. Open the downloaded file in your browser (Chrome or Edge) — you'll see your formatted signature.
Select all and copy
Press Cmd+A / Ctrl+A to select everything, then Cmd+C / Ctrl+C to copy.
Open Outlook settings
Go to Outlook.com, click the gear icon (⚙), then View all Outlook settings → Mail → Compose and reply.
Paste and save
Click inside the signature editor and paste with Ctrl+V. Give your signature a name, then click Save.
Download the .html file
Click Download .html in the generator. Open the file in Chrome or Edge and select all content (Ctrl+A), then copy (Ctrl+C).
Open signature settings
In Outlook desktop, go to File → Options → Mail → Signatures (Windows) or Outlook → Preferences → Signatures (Mac).
Create and paste
Click New, name your signature, then paste (Ctrl+V) into the editor. Your formatted signature should appear.
Set as default and save
Set it as the default for new messages and replies/forwards. Click OK to save.
Outlook desktop and images: Outlook sometimes blocks external images by default. Recipients may need to click "Download pictures" to see your photo and logo. This is a recipient-side setting, not something you can override.
Installing in Apple Mail
Apple Mail requires a slightly different approach — you'll install the signature as a file rather than pasting HTML directly.
Create a blank signature first
Open Apple Mail → Mail menu → Settings → Signatures. Select your email account, click the + button to create a new signature. Name it (e.g. "Professional"). Add a placeholder word — this forces Mail to create the signature file.
Quit Apple Mail
Close Apple Mail completely before editing the signature file. Mail rewrites signature files on quit — if you edit while it's open, your changes get overwritten.
Find the signature file
In Finder, press Cmd+Shift+G and navigate to: ~/Library/Mail/V10/MailData/Signatures/ (the version number may differ). Look for a recent .mailsignature file.
Replace the file content
Open the .mailsignature file in a text editor. Find the HTML body section (below the headers) and replace it with the content from your downloaded .html file. Save the file.
Lock the file and reopen Mail
Right-click the .mailsignature file → Get Info → check Locked. This stops Mail from overwriting it. Reopen Mail and your signature should appear.
If you edit your signature later, you'll need to repeat this process — unlock the file, replace the content, lock it again.
Best practices
Tips for a great email signature
Keep it focused
Include only what's relevant to how you want to be contacted or found. A name, title, one phone number, one website, and two or three social links is usually plenty. Resist listing every channel you're on.
Use a consistent accent colour
Your accent colour should match your brand — use the same hex you use on your website or business cards. If you're not sure, teal (#0e7490) reads as professional across most industries.
Use a real hosted image, not a local file
Email clients load images from URLs at the time the email is opened. A file saved to your desktop will never appear for recipients. Make sure your photo URL is permanent and publicly accessible.
Test before sending to clients
Send a test email to yourself from a different email provider (e.g. send from Gmail, check in Outlook). Spot check: does the photo load? Does the colour show correctly? Does the font look right?
Don't overload the Extras
Banners and disclaimers add length. Use them when they're genuinely useful — a Calendly link in the banner is valuable; a promotional banner for a sale isn't appropriate in every email.
Help
Troubleshooting
| Issue | Fix |
|---|---|
| Photo not showing in emails | Your image URL must be public and not behind a login. Try opening the URL in an incognito browser tab — if you can see it without logging in, it will work in email. |
| Pasted as code, not formatted | Use the Copy Signature button (not Ctrl+C from the file). This copies a rich HTML clipboard entry. Pasting raw HTML from a file will show code. |
| Signature looks different in Outlook | Outlook (especially desktop on Windows) renders HTML differently from Gmail. Avoid custom fonts and complex layouts — the generator already uses email-safe HTML for this reason. |
| Colour not showing in Outlook | Some older Outlook versions strip certain inline styles. If a colour isn't rendering, try a simpler accent colour (no opacity values) — all presets in the generator are Outlook-safe. |
| Apple Mail overwrote my signature | You need to lock the .mailsignature file (Get Info → Locked). Without locking it, Mail will overwrite your customisation every time it quits. |
| Preview is blank when I load the page | Try refreshing the page. If you've cleared your browser data, the stored form data is gone and the preview will be empty until you fill in the fields again. |
| I paid but didn't get redirected | Email us at hello@sheknowsdigital.com with your payment confirmation and we'll get you sorted immediately. |
Ready to build your signature?
Try before you pay. $8 one-time to download and keep forever.
Open the generator →