Is your email the worst user experience on your website?

I hate when I click on an email address, and it opens up the default email software on my computer. I didn't sign up for this. I want it to be closed.

Most website builders use an email link that opens up a new email draft, usually in a new tab or your email software. I don't use my default software. When I'm on a website and looking for an email address, I want to copy the email address to paste into my email tab. Or I'm looking to share the email with someone else. Either way, I'm looking to stay on the website I'm currently on.

The default email software opens because of the mailto: part of the email address link. In theory, it is a fantastic functionality. The user clicks the email, and then they teleport to the body of the email. The mailto: link already completed the email address and subject line. If you want to send an email and use that software, you will love this function. Everyone else is now away from your website, never to return.

There is hope. Web developers around the globe use a copy-to-clipboard function instead of a mailto: link. The easy-to-use custom code lets you click on the email or button to copy the desired text to your clipboard. In the clipboard, your computer stores copied elements so you can paste them. Copying on click is good. We do this on almost every email address on every site we make. But we have always done it one at a time.

We use the handy Finsweet attribute and sometimes the good ol' fashion javascript. These are both excellent solutions that work very well. We've devised a different coverall approach you can use on any website. We put some code in the header.

The code listens for the mailto: link being clicked and then generates a div with the copied email and some text. You can adjust the styling on the box with CSS.

Just copy this code snippet and paste it into your website's header. You can do this with any website building, including Webflow and Squarespace. You can customize the CSS to match your website. Once installed and styled, every mailto: link will become a click-to-copy trigger. A box will appear in the corner of the screen saying that you've copied the clicked email.

This code snippet is a simple solution to an annoying problem, so please try it and let me know what you think!

‍