Redesign Log

Click-to-copy

MARCH 23 2020

Hello! Let me tell you a story:

So, you’re hovering over an email link at the bottom of a web page, and you wonder: if I click on this, will it happen again? Will clicking this email launch that default mail app that I’ve never, ever used? Setting my computer fan to whirr into a frenzy and a million mail notifications to swarm my desktop?

This problem has a name: email-bombing. You can find the culprit in one line of code:

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

There are arguments made in defense of “mailto” that make some good points. On clicking a “mailto” link, you launch the native email client and auto-populate any part of a draft email. This includes adding the addressee’s email, CC’s and BCC’s, and even a subject line. Some would say that this offers the best user experience. But that’s assuming most users rely on their native email client to manage their inboxes.

On desktop, native email clients hardly compete with the most common email client: Gmail. Of 871 million emails sent in February 2020, one out of every four were opened in Gmail. Compare this with one in ten opened in Apple Mail, and even less opened in Outlook¹.

At one time, “mailto” might have been a powerful tool. But there are better ways to build a robust user experience without launching an oft-obsolete email client. The best solution follows the KISS (Keep It Simple, Stupid) principle: click-to-copy.

You can put in place a click-to-copy interaction with a few lines of Javascript and a little CSS to create a solution that is timely and responsive. Check out my documentation below:

// First, add class ".mailto-link" to all "mailto" links
// This is needed to disable the default launch
// and to copy the email to the clipboard

$('a[href^=mailto]').addClass('mailto-link');

var mailto = $('.mailto-link');
var messageCopy = 'Click to copy email address.';
var messageSuccess = 'Email copied to clipboard!';

mailto.append('<span class="mailto-message"></span>');
$('.mailto-message').append(messageCopy);

// Next, actually disable the default launch of the native email client

$('a[href^=mailto]').click(function() {
		return false;
})

// Add an onClick action to fetch the linked email and remove "mailto:"
// Finally, store the email address in a new variable

mailto.click(function() {
	var href = $(this).attr('href');
	var email = href.replace('mailto:', '');
	copyToClipboard(email);
	$('.mailto-message').empty().append(messageSuccess);
	setTimeout(function() {
		$('.mailto-message').empty().append(messageCopy);}, 2000);
});

});

// When that's done, you'll want that email variable copied to the clipboard

function copyToClipboard(text) {
  var dummy = document.createElement("input");
  document.body.appendChild(dummy);
  dummy.setAttribute('value', text);
  dummy.select();
  document.execCommand('copy');
  document.body.removeChild(dummy);
}

And of course, our CSS. One note here: you will need to adjust the position of your message pop-up once you have this code running. This can be done by using 10% increments for “transform: translate()”.

  .mailto-link {
    position: relative;
    padding: 8px 0;
  }

  .mailto-message {
    /* position */
    top: 1px;
    left: 50%;
    transform: translate(60%, 20%);
    position: absolute;

    /* box-model */
    margin-bottom: -5px;
    padding: 2px 6px;
    width: auto;
    border-radius: 2px;

    /* visual */
    opacity: 0;
    background-color: #2c2c2c;
    color: white;
    transition: 0.5s;

    /* typography */
    font-size: 14px;
    white-space: nowrap;
    font-family: Helvetica, sans-serif;
  }

  .mailto-message:after {
    content: '';
    opacity: 1;
  }

  .mailto-link:hover .mailto-message,
  .mailto-link:focus .mailto-message,
  .mailto-link:focus-within .mailto-message {
    display: block;
    opacity: 1;
  }

Here’s our result!

hello@codyhopper.com

Finally, a solution that won’t stir your native email client from it’s ancient slumber, and a user experience that keeps your focus on the page.