Better way to implement mailto: links

• March 20, 2026 at 10:04 IST
• 2 min read
• tech
• social-media

Honestly, I don't like mailto: links for myself because I use webmail and clicking on these links opens the default email app on my computer. However, I still had an email icon in the footer of my personal site, but I changed that click on copy instead of a mailto: link after coming across this post. Basically, clicking on the envelope icon in the footer copied the email to the clipboard, and then it briefly showed a green checkmark.

I thought this was provided a good user-experience and posted about this on my socials, especially on Threads. But almost all the feedback where negative, suggesting that this is a bad idea, users won't know what just happened, as you see in the screenshot below.

And they were all correct, it wasn't very clear about what just happened. I, then, thought about it and implemented the email thing differently. As you see in the screenshot below, started showing the full email in text and clicking on it copied the email to users' clipboard.

But I still wasn't satisfied with it so posted about this again on X, and then received this interesting recommendation about using the mailgo tool which is basically a new concept for mailto and tel links.

You can see in the screenshot that when I clicked on the mailto: link, it showed me a bunch of options instead of just opening the default email app or copying the email to the clipboard directly. I tried clicking on Open in Gmail, copy, etc. options and they all work as expected.

But the problem is, the mailgo project isn't maintained anymore, and there's no point in adding a dead dependency to my project. So... I built this from scratch, and it was very simple to do so.

Here's how this is implemented, the one you see in the screenshot above:

<div id="email-wrap">
  <button onclick="this.parentElement.classList.toggle('open')">
    <!-- envelope icon -->
  </button>
  <div>
    <button onclick="navigator.clipboard.writeText('me@deepakness.com')
      .then(()=>{this.textContent='Email copied!';
      setTimeout(()=>{this.textContent='Copy me@deepakness.com'},1000)})">
      Copy me@deepakness.com
    </button>
    <a href="https://mail.google.com/mail/?view=cm&to=me@deepakness.com">
      Open in Gmail
    </a>
    <a href="mailto:me@deepakness.com">Open default client</a>
  </div>
</div>

And a tiny script to close the popup when clicking outside or pressing Escape:

document.addEventListener('click', function(e) {
  if (!e.target.closest('#email-wrap')) {
    document.getElementById('email-wrap').classList.remove('open');
  }
});

Then you would need some basic CSS to make it look good.

That's it.

This simple implementation works well, until I find a better solution for this.