Product Designer & front-end Developer

Takes 4 min to read.

Ditching the mailto link: Click to Copy Email pattern

Introduction

Many of us have been there: You click on an email link, and the Mail app buried deep in your computer’s hard drive is back to haunt you. According to the statistics, less than 15% of desktop users configure their native apps for email sending.

If this is so infrequent, then why we all slam mailto: links in our websites? In this post, we’ll explore some alternate techniques, along with some use cases where it’s worth using it.

The Problem

We’ve all been there: We click in one of those Let’s get in touch button, and all of a sudden...

A screenshot of the default Apple Mail app, with a pop up that says Choose a Mail account provider, with multiple options to choose from. There’s no way to get the user’s email unless you set up the app.
A screenshot of the default Apple Mail app, with a pop up that says “Choose a Mail account provider...” with multiple options to choose from. There’s no way to get the user’s email unless you set up the app.

Probably not a good user experience to trigger a forgotten app in our computers, which isn’t likely configured yet, just to get someone’s email, copy it, and take it to our real email client of choice.

The reality is that less than 15% of users on desktop resolutions use the native Mail app, according to Email Market Share. Thus, it might be worth exploring some alternatives to this, at least for our desktop users.

The Solution

Let’s explore a few of the alternatives we have to solve this problem:

Use the email address as the text of the link

A screenshot of the footer on my website, where you can find a subtitle that says Get in touch and below, my personal email address, which is being highlighted with the cursor.
A screenshot of the footer on my website, where you can find a subtitle that says “Get in touch” and below, my personal email address, which is being highlighted with the cursor.

This way, the user can easily copy it, without having to open the Mail app or Inspect Element in their browsers if they are savvy enough, to get the email URL.

Use a form

A screenshot of a Contact Form, taken from one of my CodePen links
A screenshot of a Contact Form, taken from one of my CodePen links: https://codepen.io/imjuangarcia/pen/LeoeGw

This alternative allow us to connect with the person directly, without the need to use our Email clients. However, it’s a more complex solution, prone to spam and abuse, and which doesn’t fully replace the email experience. So what else is there left?

The Click to Copy pattern

We’ve seen the Click to Copy button in many web interactions: Code Blocks, Translations, amongst many others. Heck, I even use this pretty heavily throughout my site:

Hi there! Try to copy me using the 
Copy to Clipboard button at the right-hand-side
of this code block 👉🏻👉🏻👉🏻

Then why not use it for our contact email as well? It’s simpler, frictionless for the 85% which doesn’t use the default Mail app, and still provides a comparable experience for the remaining 15%. Let’s take a look a the solution:

<main>
<h1>Copy me!</h1>
<div class="click-to-copy-container">
<button
class="click-to-copy"
title="Click to Copy Email Address"
>

hello@juangarcia.com.ar
</button>
<span>Copied!</span>
</div>
</main>
/* Styling and layout purposes only */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

main {
background: #F9F5FF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}

main h1 {
font-weight: 600;
font-size: 34px;
letter-spacing: -0.4px;
color: #07070A;
}

.click-to-copy-container {
position: relative;
}

button.click-to-copy {
background: #21FA90;
border: none;
box-shadow: none;
padding: 1rem;
border-radius: .25rem;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
color: #07070A;
transition: all .2s ease-in-out;
}

button.click-to-copy:hover {
opacity: .8;
}

button.click-to-copy + span {
/* We make the span hidden by default. In this case, using display: none; isn't an issue from an accessibility standpoint, since we don't want screen readers to pick this up unless the user clicks on the button */
display: none;
/* From here on, just styling purposes 👇🏻 */
margin-left: 1rem;
background: #DADADA;
padding: .5rem;
border-radius: .2rem;
position: absolute;
top: .75rem;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .4px;
font-weight: 600;
color: #666;
}

/* Styles for the tooltip arrow */
button.click-to-copy + span:after {
right: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(218, 218, 218, 0);
border-right-color: #DADADA;
border-width: 6px;
margin-top: -6px;
}

/* When the click event is fired, and the .is-copied class is added to the button, show the tooltip */
button.click-to-copy.is-copied + span {
display: initial;
}
// Select the button from the markup
const button = document.querySelector('.click-to-copy');


// Function that runs on click. It:
// 1) Prevents the default behavior of the button (refresh the page);
// 2) Runs the copyToClipboard function;
// 3) Adds and removes some CSS classes, used for styling and notifying the user about the copy event
const clickToCopy = (e) => {
e.preventDefault();
copyToClipboard(e.currentTarget.textContent);
e.target.classList.add('is-copied');
setTimeout(() => { e.target.classList.remove('is-copied') }, 1200);
}

// Copy to clipboard function, taken from https://www.30secondsofcode.org/blog/s/copy-text-to-clipboard-with-javascript/
const copyToClipboard = (str) => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0
? document.getSelection().getRangeAt(0)
: false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
}

// Fire the event on click
button.addEventListener('click', clickToCopy);

Check out this in action on the CodePen link below:

In mobile resolutions the situation changes dramatically, since more than 40% of users have their email client apps configured on their phones. This is where mailto: links become relevant again, and we need to accommodate for a fallback to our previous solution.

There are multiple ways to achieve this. For this particular example, I decided to add an <a> tag on the HTML:

<main>
<h1>Copy me!</h1>
<div class="click-to-copy-container">
<button
class="click-to-copy"
title="Click to Copy Email Address"
>

hello@juangarcia.com.ar
</button>
<span>Copied!</span>
</div>
<!-- fallback link for mobile resolution -->
<a href="mailto:hello@juangarcia.com.ar" class="click-to-copy-fallback">
hello@juangarcia.com.ar
</a>
</main>

Which will be hidden by default on desktop:

/* Hide the fallback version on desktop resolutions */
a.click-to-copy-fallback {
display: none;
}

And toggled using media queries in the CSS:

/* Toggle fallback version for mobile, where the native email apps are way more used and mailto link become way more relevant. I'm using an iPad portrait resolution as the breakpoint, but feel free to play with it! */
@media screen and (max-width: 768px) {
/* Hide the desktop click to copy button */
button.click-to-copy {
display: none;
}

/* And show its replacement, the default mailto link */
a.click-to-copy-fallback {
display: block;
}
}

This way, we can have the best of both worlds, while providing top-notch experiences to our users, regardless of the device they’re using to access our sites 💯

Conclusion

That’s it for this one! Hope you learned a few things about mailto: links, when they are useful and when to avoid them. Feel free to start using this technique to provide a better UX for your users!