MailtoUI 強化 Email 連結，點選後可選擇在 Gmail、Outlook 或複製地址

在網頁裡如果要放入 Email 鏈結，就必須在超連結加上 mailto: 語法，事實上不建議在網站裡直接顯示電子郵件地址，一來有可能變成垃圾郵件（SPAM）寄送的目標，另一方面點選電子郵件鏈結後經常跳出的不是使用者慣用的 Email 工具也會造成困擾，之前我曾介紹過一個瀏覽器外掛「I hate mailto 點選 Email 不自動打開郵件軟體，將郵件地址複製到剪貼簿」就是為了解決類似問題，可以在點選郵件鏈結時自動複製 Email 地址而不是打開郵件軟體。

本文要介紹的「MailtoUI」是一個站長工具，如果你必須提供 Email 在網站上，但又希望這段鏈結可以有更多不同的使用方式，這個小程式可以幫助你。MailtoUI 壓縮後只有 6.5 Kb 的程式大小，載入後就能在點選 Email 鏈結時跳出選項，讓使用者選擇要在 Gmail、Outlook、Yahoo 信箱或在預設的 Email 軟體中開啟，當然也能快速複製 Email 到剪貼簿。

MailtoUI 提供 jsDelivr CDN 網址，複製後快速在網頁中載入程式碼，藉由 CDN 服務可以更快載入程式（而且不會耗費自己的流量），如果傾向自己託管檔案亦可下載 mailtoui-min.js 檔案，放入自己的主機就能使用。以下簡單介紹使用及載入方法。

網站名稱：MailtoUI
網站鏈結：https://mailtoui.com/

使用教學

STEP 1

開啟 MailtoUI 網站，首頁有一段說明：方便的使用者介面強化你的 mailto 鏈結，可以先從首頁的 Try it now 鏈結測試一下 MailtoUI 介面。

點選後會跳出一個選單，就是 MailtoUI 實際運作的畫面，可選擇以瀏覽器開啟 Gmail、Outlook、Yahoo 信箱或是以預設 Email 軟體開啟電子郵件地址，對於平常習慣從網頁版信箱收發郵件的朋友來說更方便、好用。

點選最下方的按鈕還可以將 Email 地址複製到剪貼簿。

STEP 2

點選說明文件的「Installation」部分就能找到將 MailtoUI 套用到自己網站的方式，前面說明有提到可直接使用 jsDelivr CDN 鏈結載入 JavaScript，或是下載 mailtoui-min.js 檔案再放到自己主機空間，因為檔案很小（大約 6.5 Kb），對於網站速度上並不會有太明顯的影響。

STEP 3

載入 JavaScript 後在 mailto 鏈結以 mailtoui class 帶入就能看到效果。如果你的網站上已經使用過 mailtoui 樣式的話，可以有簡單方法來修改這個選項，下方就有提供說明。