How to create an email signature with clickable links (step-by-step guide)

An email signature can do much more than display your contact details. It can bring visitors to your website, generate appointments, and grow your newsletter list. This works only if your links are easy to notice and continue working in every email client.

Adding a clickable link to an email signature sounds simple until something goes wrong. The link may look clickable, but it leads nowhere. A social media icon may lose its hyperlink after you paste the signature into your email client. Many signatures fail because links are added incorrectly, disappear after forwarding, or become difficult to recognize in dark mode.

This guide shows how to make an email signature with clickable links that work reliably in every email client. You’ll learn how to add different types of links, write the correct HTML, improve accessibility, avoid common mistakes, and track clicks with UTM tags.

Key takeaways  

1. You can make almost any element in your signature clickable: a website, email address, phone number, app, image or banner, map, calendar, or booking page.
2. Clickable links in your email signature can be added in several ways: directly in your email client, with HTML code, in an image-based signature, or with an email signature generator.
3. Signature links can break for various reasons. The most common include Gmail’s signature size limit, missing URL protocols, the use of URL shorteners, and issues specific to individual email clients. 
4. UTM parameters let you track link performance and measure the traffic generated by your email signature.
5. Make sure your links are accessible and always test them in both light and dark mode. 

What is a clickable email signature?

An email signature is a part of an email, usually placed at the end of the message, that includes a person’s contact information and useful links. A clickable email signature contains links that recipients can click to take a specific action, such as visiting a website, booking a consultation or demo, or subscribing to a newsletter. These links usually represent the next step in the customer journey and let recipients take that step without searching for information or details.

(Source: Stripo template)

In this article, we explain in detail how to create an email signature in Stripo.

Why clickable links matter

Your email signature already includes the essentials, such as your name, job title, and contact details. So, do you really need to add clickable links? The answer is yes. With the right links, your signature becomes more than just a way to share contact information.

With clickable links in your email signature, you can: 

• build trust by giving recipients an easy way to learn more about you or your company through your website or social media profiles, where they can explore your services, case studies, pricing, and other important information;
• reduce the time needed to schedule a consultation by linking directly to a booking page or meeting calendar;
• encourage customers to take the desired action with a single click;
• simplify communication by directing people to the right resources instead of explaining everything in the email;
• turn every email into a traffic source by sending recipients to your website, landing page, portfolio, or product page;
• increase engagement without launching a separate email campaign, as your signature acts as a permanent CTA in every conversation;
• generate leads continuously by giving potential customers a simple way to contact you or request a demo;
• promote your content by linking to your blog or YouTube channel;
• help recipients find the information they need faster.

Every link in your email signature should have a clear purpose, and you should track its performance to understand whether it delivers results. If a link doesn’t help recipients take the next step, it may not be necessary.

(Source: Exclaimer)

What you can make clickable in a signature

The short answer is almost anything. 

The most common clickable elements in an email signature include:

• link to the website or portfolio;
• clickable social media;
• clickable email address;
• clickable phone number;
• link to a booking page or calendar;
• customer reviews or testimonials;
• link to your app; 
• link to the affiliate or partner program; 
• clickable link to special offers and promotions;
• clickable image or banner;
• link to the map or office location; 
• link to the newsletter subscription page.

(Source: Exclaimer)

One important exception is image-only email signatures. While they can contain a clickable link, you can add only one link to the entire image. If you want different elements in your signature to lead to different destinations, an image-only signature is not the best choice.

How to add clickable links to your email signature

We talked earlier about how to create a signature in different email clients. This section focuses on adding clickable links. There are several ways to do this.

Method 1: In your email client (text-only)

The process is similar in most email clients:

1. Add all the information you want to include in your signature, such as your name, position, email address, phone number, website, social media profiles, and a CTA like “Book an appointment.”
2. Select the text you want to turn into a hyperlink. For example, highlight the word “LinkedIn.”
3. Click the “Link” button or the chain icon in the toolbar.
4. In the “Type or paste a link” field, paste the destination URL.
5. Once the link is added, hovering over the word “LinkedIn” will display the destination URL. The text will also appear underlined and blue by default.
6. If you want to make the link more noticeable, you can apply bold formatting or change its color.

Method 2: Hand-coded HTML signature 

The second option is to create your email signature as HTML and add links directly into the code. In this article, we explain how to build an HTML email signature step by step.

Later in this guide, you will also find HTML code examples that you can use as a starting point for creating your own email signature.

Method 3: Designed image signature

Another option is to design your signature as an image in a graphic design tool, such as Canva, Figma, or Photoshop. The finished design is usually exported as a PNG file and then added to your email client.

This approach has several drawbacks. You can assign only one link to the entire image. If the email client blocks images, the whole signature disappears. In addition, the text inside the image cannot be selected or searched.

Method 4: With an email signature builder (Stripo)

Creating an HTML signature from scratch requires technical knowledge. If you prefer a simpler approach, you can use Stripo’s free email signature generator.

The tool is available separately from the Stripo email platform, and anyone can use it for free. The signature you create can be added to any email client. 

The generator includes ready-made templates, so all you need to do is replace the sample content with your own information.

You can also use the email signature templates available in the Stripo editor. Use them for inspiration or modify them to create a signature that fits your needs. 

HTML link types reference (with code)

Below are a few HTML examples that show how different types of clickable links should be formatted. 

• Website link

<a href="https://dr-gill.com" target="_blank">Visit our website</a> 

Make sure the URL starts with https://. Without it, the email client may treat the address as a relative path, breaking the link. 

• Email address link

<a href="mailto:m.gill@example.com">m.gill@example.com</a> 

• Phone number link

<a href="tel:+48756461001">+48 75 64 61 001</a> 

• Image or social media icon link

<a href="https://linkedin.com/in/you" target="_blank"><img src="..." alt="LinkedIn" width="24" height="24" style="border:0"></a>

A few details are worth keeping in mind:

• the src attribute should contain the full URL of the image hosted on your domain;
• always include alt text. It improves accessibility and serves as fallback text if the email client blocks images;
• for linked icons, alt text serves two purposes. When an image is wrapped in a link with no visible text, the alt attribute becomes the accessible name of that link. Without it, a screen reader may announce only the file name or say “link,” leaving recipients without any indication of where the link leads;
• use border:0 to prevent blue borders around linked images in older versions of Outlook;
• specify width and height as HTML attributes instead of relying only on CSS.

• Underlined link for dark mode

<a href="https://example.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;"> Visit our website 
</a> 
 

Do not rely on color as the only indicator that text is clickable. In dark mode, email clients often invert colors, which can make links blend into the surrounding text. Properties such as text-decoration: underline and font-weight: bold are color-independent, so they remain visible even after color inversion. 

• Booking page or CTA button link

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="center" bgcolor="#2B5CE6" style="border-radius:4px; mso-padding-alt:12px 24px;">
     <a href="https://calendly.com/yourname/30min"
 style="display:inline-block; padding:12px 24px; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:4px;">
       Book a 30-min call
     </a>
   </td>
 </tr>
</table>

A button in an email signature is a compromise, so it is best used only when the CTA is the primary element of the signature.

A simpler alternative is a text link with clear anchor text:

<a href="https://calendly.com/yourname/30min"
  style="font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; color:#2B5CE6; text-decoration:underline;">
 Book a 30-min call →
</a>

So far, we have looked at the individual building blocks of an HTML email signature. A complete signature combines all of these elements into a single layout.

We’ll use the following email signature as an example:

Mike Gill

General Practitioner

Website: dr-gill.com

Phone: +48 75 64 61 001

Email: m.gill@example.com

Facebook 

LinkedIn

Book an appointment

Below is the complete HTML code for this signature.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:20px; color:#333333;">
 <tr>
   <td style="padding-bottom:8px;">
 <span style="font-size:16px; font-weight:bold; color:#1a1a1a;">Mike Gill</span><br>
     <span style="font-size:14px; color:#555555;">General Practitioner</span>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:2px;">
   Website:
 <a href="https://dr-gill.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">dr-gill.com</a>
   </td>
 </tr> 
 <tr>
   <td style="padding-bottom:2px;">
     Phone:
     <a href="tel:+48756461001" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">+48 75 64 61 001</a>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:12px;">
     Email:
     <a href="mailto:m.gill@example.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">m.gill@example.com</a>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:12px;">
     <a href="https://facebook.com/drmikegill" style="text-decoration:none;">
       <img src="https://yourdomain.com/icons/facebook.png" alt="Facebook" width="24" height="24" style="border:0; display:inline-block; vertical-align:middle;">
     </a>
     &nbsp;
     <a href="https://linkedin.com/in/drmikegill" style="text-decoration:none;">
       <img src="https://yourdomain.com/icons/linkedin.png" alt="LinkedIn" width="24" height="24" style="border:0; display:inline-block; vertical-align:middle;">
     </a>
   </td>
 </tr>
 <tr>
   <td>
     <table role="presentation" cellpadding="0" cellspacing="0" border="0">
       <tr>
         <td align="center" bgcolor="#1F4BC4" style="border-radius:4px; mso-padding-alt:12px 24px;">
           <a href="https://dr-gill.com/book?utm_source=email-signature&utm_medium=signature&utm_campaign=appointments"
              style="display:inline-block; padding:12px 24px; font-size:14px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:4px;">
             Book an appointment
           </a>
         </td>
       </tr>
     </table>
   </td>
 </tr>
</table>

Use this template as a starting point and customize it to fit your needs. You can modify the content, styling, and links to create an HTML email signature that matches your brand. 

How to make your links actually look clickable

Sometimes a link works perfectly but doesn’t look like a link, so recipients may overlook it or not realize it is clickable. 

Turn on underline links in Stripo

The easiest way to make your links more visible is to enable the “Underline links” control in Stripo. This toggle lets you turn link underlining on or off for the entire email template with a single click.

This feature can be particularly useful when your brand guidelines specify one option you must follow in your email design: either highlight links only with color or require all text hyperlinks to be underlined.

It also helps improve accessibility. Underlined links are easier to recognize, so recipients do not have to rely on color alone to identify clickable text. In addition, underlined links remain recognizable in dark mode. Even if an email client changes link colors, the underline still makes it clear that the text is clickable.

Other visual cues

Underlining is not the only way to show that text is clickable. Here are a few other techniques you can use:

• highlight links with a contrasting color. Make links stand out from the surrounding text. For example, if your email copy uses dark blue text, you can make links orange or another contrasting color;
• use bold or semibold text. A slightly heavier font weight helps draw attention to important links;
• add an icon or arrow. Small visual elements hint that recipients can click to learn more or take action;
• use a button for your primary CTA. Buttons work well for actions such as “book a demo” when the CTA is the main focus of the signature;
• include recognizable social media icons. Most recipients already understand that LinkedIn, Instagram, Facebook, and other social media icons are clickable;
• write clear anchor text. Link text, such as “schedule a call,” makes it obvious what will happen after the click.

(Source: Stripo template)

What you should not do is use italics to make links stand out. It negatively impacts accessibility and generally worsens text readability, especially at smaller font sizes.

You should also avoid relying on hover effects. Many email clients offer limited support, and they do not work at all on most mobile devices. If you plan to use hover effects, first check which devices and email clients your audience uses most often.

Troubleshooting: Why signature links break (and how to fix them)

Sometimes a link looks perfectly fine. It is underlined and highlighted in color, and it appears exactly as expected. But for some reason, clicking it doesn’t open the intended destination. Below are some of the most common reasons this happens and how to fix them. 

Signature size limit

One common cause is Gmail’s signature size limit. Gmail allows email signatures of approximately 10,000 characters, including not only the visible text but also the underlying HTML, formatting, and long URLs.

If your signature exceeds this limit, Gmail may refuse to save it. As users edit the signature to reduce its size, hyperlinks can be lost. The text remains visible, but it is no longer clickable.

(Source: Gmail)

To fix this issue, try the following:

• paste the signature as plain text;
• remove unnecessary formatting;
• reduce the size of images;
• if that doesn’t work, delete the signature and create it from scratch directly in Gmail to remove any hidden HTML markup.

Missing protocol in the URL

Another common issue is a missing protocol in the URL. If a website address does not include https://, the email client may not recognize it as a valid link. The text may still appear blue, underlined, or even clickable, but the link itself will not work correctly when clicked.

To avoid this problem, always use the full protocol when creating links. Website URLs should start with https://, email links with mailto:, and phone numbers with tel:. 

Forwarded or replied emails

Another challenge is keeping your signature intact when an email is forwarded or replied to. When a recipient clicks “Reply” or “Forward,” their email client often rewrites your HTML. As a result, parts of your signature may disappear or stop working. In many cases, you will notice the problem only on the recipient’s side. 

You cannot prevent this completely, but simpler signatures are more likely to survive. Avoid unnecessary design elements, keep the HTML structure simple, and use text links whenever possible because they are generally more reliable than buttons. Always test your signature in replies and forwarded emails, not only in new messages. 

URL shorteners

Finally, be careful when using URL shorteners. They hide the final destination behind a redirect, which can look suspicious to email clients. Shortened links are also commonly used in phishing attacks. Even if the shortened link works correctly, the email may be filtered into spam or display a warning that the link could be unsafe. For this reason, use link shorteners with caution.

Some broken link issues are specific to individual email clients.

For example, Outlook may occasionally render links as plain text. In some cases, when you add a link to an image, the link appears above the image instead of being applied to it.

Apple Mail has another limitation. It doesn’t officially support linked images in signatures created through its built-in editor. This can be a problem if your signature relies on a clickable logo or banner. One workaround is to insert the image into an email draft first and then copy it into the signature. As with any workaround, you should test it carefully, as results can vary depending on the email client and version. 

Linking different parts of one image

This mechanism is known as an image map. On websites, it is created with the HTML <map> and <area> elements, which define clickable regions within a single image. Each region can point to a different URL. 

Not all email clients support image maps because of security and compatibility limitations. For this reason, it is better to avoid this approach in emails and instead use one of the methods described below. 

Therefore, in the context of linking images in an email signature, you have two options:

1. Use separate images. Add each visual element as an individual image and assign it its own link. For example, link your company logo to your website and your LinkedIn icon to your LinkedIn profile.
   
   

   
   (Source: Exclaimer)

2. Save the entire signature as a single image. This approach is known as bitmap rendering. Keep in mind that you can assign only one link to the entire image, so you will need to decide which destination is the most important.

Using a single image for your email signature is usually not the best approach. In this article, we explain the advantages and disadvantages of image-based signatures in more detail. 

Track clicks on your signature links (UTMs)

UTM parameters are small pieces of code added to a URL to track its performance across different marketing channels. In our case, you are tracking links in your email signature. Even a simple signature can contain several links, allowing you to see whether recipients are more likely to visit your website or open your booking page.

Adding UTM parameters helps you:

• measure campaign performance by identifying where your traffic comes from;
• better understand your audience’s behavior and which links they engage with most;
• improve your marketing efforts based on the channels and campaigns that drive the best results;
• run A/B tests and compare the performance of different signature links.

Keep in mind that UTM works only for domains you own or control. They do not provide analytics for links that point to third-party websites; that is, you will not be able to get the results of conversions on social networks. In most cases, tracking visits to your own website is what matters most, and UTM parameters are well suited for that. 

Always test every tagged link before using your signature. Click each link and verify that the visit appears correctly in your analytics platform. A single typo or incorrect character can split your data into multiple sources or prevent it from being tracked at all.

Accessibility and dark mode

Accessibility and dark mode are important throughout the email, not just in the signature. Links are among the elements most likely to break because there aren’t many fallbacks you can use to stay safe. It is much easier to build them correctly from the start than to fix issues later. 

Make links accessible

To make your links accessible, keep these best practices in mind:

• use real links. Always use the proper HTML <a href> element, so links are recognized by screen readers, keyboard navigation, and other assistive technologies;
• do not rely on color alone. This is a requirement of WCAG 2.2 Success Criterion 1.4.1 (Use of Color). If a link differs from the surrounding text only by color, people with color vision deficiencies may not recognize it. Add an underline or bold styling;
• maintain sufficient contrast. WCAG 2.2 Success Criterion 1.4.3 (Contrast (Minimum)) requires a contrast ratio of at least 4.5:1 between text and its background. Check your links in light mode and dark mode. A link that is easy to read on a white background may lack sufficient contrast on a dark one;
• use descriptive anchor text. According to WCAG 2.2 Success Criterion 2.4.4 (Link Purpose), the purpose of a link should be clear from its text. Instead of generic labels like “Click here” or “Read more,” use text like “Book an appointment”;
• add alt text to linked icons. Without alternative text, screen readers cannot identify the icon’s purpose. This is required by WCAG 2.2 Success Criterion 1.1.1 (Non-text Content); 
• make the clickable area large enough. WCAG 2.2 Success Criterion 2.5.8 (Target Size (Minimum)) recommends a minimum target size of 24 × 24 CSS pixels. Leave enough space between adjacent icons so they are easy to tap on mobile devices.

Finally, do not overlook font size. Email signatures often use smaller text than the rest of the email, but it should still be large enough to read comfortably on both desktop and mobile devices.

To verify that your email signature meets accessibility requirements, run it through the Stripo accessibility checker before sending.

How links render in dark mode

Color contrast is particularly important for links in dark mode. Always test your email signature in both light and dark mode, paying close attention to how link colors change and whether they remain easy to see.

(Source: Stripo template)

It is also a good idea to underline text links. Even if an email client changes link colors in dark mode, the underline still makes it clear that the text is clickable.

Keep signatures consistent across your team

As mentioned earlier, an email signature is a marketing channel that works without requiring additional budget. To get consistent results, your team needs a standardized approach. 

If every employee creates their own signature, the probability of errors will be high. You may end up with different fonts and colors, different phone number formats, broken links, or links that are not coded correctly with the <a href> element. 

To prevent this from happening, there should be a single approved HTML template for signatures. Only personal details, such as the employee’s name, job title, and contact information, should change, while the structure and style remain the same. 

You can also use Stripo’s Brand Guidelines kit to keep everyone on the same page. It helps standardize brand colors, fonts, and other design elements, making it easier for everyone to create email signatures that follow your brand guidelines.

For large organizations, centralized signature management is usually the best solution. For small teams, a single shared template and discipline for using it will be enough.

Regardless of your company size, review all email signatures at least once a quarter. Employees change roles, companies migrate to new domains, and links can stop working over time. Regular audits help ensure that every signature remains professional and fully functional.

Wrapping up

An email signature with clickable links is more than just a block of contact information. These links help recipients learn more about your company, visit your website, book a consultation, or subscribe to your newsletter. Make the most of these opportunities by tracking link performance with UTM parameters and regularly auditing your signature to ensure everything works as expected. 

A good place to start is by reviewing your current signature. Are your job title and contact details up to date? Should you add links to your website, portfolio, blog, or another important destination? Do all of your existing links still work correctly?

If you have had an email signature without links so far, upgrade to an email signature with links that drive real actions. Choose the method that best fits your needs from the options covered in this guide and start improving your signature today. 

FAQ

1. How do I add a hyperlink to my email signature in Outlook?

To add a hyperlink in Outlook, open the “Insert” tab and select the text you want to turn into a link. Click “Link,” choose “Insert Hyperlink,” and paste the destination URL into the dialog box.

Outlook also lets you format hyperlinks in different ways. You can change the text color, apply bold or italic formatting, or use other text styles to make links more noticeable.

2. What is a clickable HTML email signature?

This is an email signature that contains hyperlinks recipients can click to take a specific action. These actions can include visiting your website, making a phone call, subscribing to your newsletter, booking an appointment, scheduling a consultation, or opening your social media profiles. 

3. How do I make a phone number clickable in an email signature?

Select the phone number, press “Ctrl+K” or click the “Link” icon, and enter tel: followed by the phone number in international format.

If you are writing HTML manually, the code will look like this:

<a href="tel:+48756461001">+48 75 64 61 001</a>

In the HTML code, the phone number should be written in international format with a leading + and country code. Do not include spaces, parentheses, or hyphens inside the href value. 

4. How do I make my email address clickable in a signature?

The easiest way is to add the email address in the signature editor. Select the address, press “Ctrl+K” or click the “Link” icon, and enter the following in the URL field: 

mailto: and the address, without spaces.

If you are creating your signature in HTML, use the following code: 

<a href="mailto:m.gill@example.com">m.gill@example.com</a> 

Don’t forget the mailto: prefix. Without it, the email client will not recognize the address as an email link, and clicking it will not open a new message. 

5. Why aren’t my email signature links clickable?

There are several common reasons why links in your email signature may not work: 

• the URL is missing the correct protocol. Every link should start with https://, mailto:, or tel:. Without the appropriate prefix, the email client may not recognize it as a valid link;
• it is not a real hyperlink. The text may appear blue and underlined, but if it is not wrapped in an <a href> tag, it is only styled to look like a link and will not be clickable;
• your signature is a single image. An image-based signature can contain only one clickable link. Any other contact details displayed inside the image cannot function as separate links.

6. Can I make different parts of a signature image clickable?

No. Email clients don’t support image maps, so you cannot make different areas of a single image link to different destinations.

If you need multiple clickable elements, use separate images instead. For example, make your logo, LinkedIn icon, and Facebook icon individual images, each with its own hyperlink. This is the most reliable approach and works across virtually all email clients.