如何為您的電子郵件創建“添加到日曆”鏈接

已發表: 2021-02-05

面對面或虛擬活動圍繞著結識其他人並相互學習展開。由於電子郵件是一種個人渠道，因此它是為活動營造興奮感和發送提醒的理想媒介。

為確保客人真正出現，在您的活動電子郵件中包含“添加到日曆”鏈接會很有用。這樣，訂閱者可以將事件添加到他們自己的日曆中，從而更容易避免日曆衝突並允許他們設置自己的提醒。

傳統上，這是通過 ICS 文件（也稱為 iCalendar）完成的。這是一種常見的日曆格式，通常使用 .ics 文件擴展名，並被大多數日曆廣泛接受。不要與 Apple 的 iCal 混淆，它具有相似的名稱，儘管 iCalendar 文件也可以在那里工作。為清楚起見，我們將在本博文中將其稱為 ICS 或日曆文件。

一些日曆還可以從網絡鏈接添加事件——我們將其稱為日曆鏈接。花額外的時間動態顯示與每個訂閱者的特定電子郵件客戶端匹配的添加到日曆鏈接可以使他們更容易訪問您的活動。換句話說，您的訂閱者可以更輕鬆、更快捷地將您的活動添加到他們的日曆中。

我們將引導您了解您應該關注哪些日曆，創建實際的日曆文件和鏈接，並將這些文件和鏈接編碼到您的活動電子郵件中，以獲得最佳的電子郵件訂閱者體驗。

第 1 步：選擇要定位的日曆
第 2 步：創建日曆鏈接和文件
1. ICS 日曆文件
2. 日曆鏈接
第 3 步：將您的“添加到日曆”鏈接編碼到您的電子郵件中
1. 決定如何顯示“添加到日曆”按鈕
2. 創建您的 CTA 按鈕和鏈接
3. 使用正確的日曆鏈接定位正確的受眾
查看這些“添加到日曆”鏈接的實際效果

第 1 步：選擇要定位的日曆

有無數種不同的日曆應用程序可用：默認情況下可通過您的計算機操作系統、作為網絡郵件的一部分或您下載的其他日曆應用程序使用。幾乎不可能支持所有的日曆應用程序。

為了幫助您了解要關注哪些日曆工具，請查看您的電子郵件分析數據。

Litmus 電子郵件分析 - 電子郵件客戶端數據 — 來自 Litmus Email Analytics 的電子郵件客戶端數據示例

所有日曆都能夠使用 ICS 文件向其中添加新事件。但它要求人們首先下載 ICS 文件，然後將其上傳到他們的日曆。

但是，在 Gmail、Office 365 和 Outlook.com 中，您還可以使用自動包含事件詳細信息的鏈接添加事件。這會帶來更好的訂閱者體驗，因為只需單擊一下即可將您的活動添加到他們的日曆中。

這是一個方便的圖表，它快速總結了哪個日曆接受哪種“添加到日曆”方法，以幫助您為下一步做好準備。

日曆的“添加到日曆”方法

日曆	ICS 日曆文件	日曆鏈接
谷歌日曆	✓	✓
展望網	✓	✓
美國在線	✓	✘
雅虎	✓	✘
辦公室 365	✓	✓
外表	✓	✘
蘋果日曆	✓	✘

友情提示，雖然您只創建 ICS 日曆文件會更容易，因為大多數電子郵件客戶端都接受它，但對您的訂閱者來說並不容易。

為每個電子郵件客戶端個性化日曆鏈接會增加您的訂閱者將您的活動實際添加到他們的日曆（並參加和轉換！）的機會，因為只需單擊一下即可。讓某人將 ICS 文件添加到他們的日曆需要更多步驟，而且您可能會在此過程中失去一些人。

第 2 步：創建日曆鏈接和文件

根據您的訂閱者用於閱讀電子郵件的電子郵件客戶端，您可以選擇創建 ICS 日曆文件、日曆鏈接或兩者。

ICS 日曆文件

因為 ICS 文件支持許多日曆應用程序的鏈接，所以這總是一個很好的後備。

首先，我們推薦使用此 iCalendar Event Maker 工具來生成文件。它允許您添加訂閱者可能需要了解的有關事件的任何信息，例如位置、描述和 URL。您甚至可以更具體地了解您的活動，讓它重複或為您的客人添加通知。

一旦您的觀眾將您的文件添加到他們的日曆中，他們就會有詳細的信息來明確活動的目的。它可以提醒人們為什麼該事件會出現在他們的日曆中。

日曆鏈接

要為網絡郵件日曆創建添加到日曆鏈接，我們建議使用 Amit Agarwal 的日曆鏈接工具。它將為每個人的日曆生成您需要在電子郵件中包含的完整 URL。

此工具有一個缺點：您不能像處理 ICS 文件那樣創建重複事件或包含通知。您可以將這些詳細信息添加到日曆 URL，但您必須在每個日曆中創建它們，而您可能無權訪問。

這就是為什麼除了日曆鏈接之外還創建一個 ICS 日曆文件是一種很好的做法。

不再發送損壞的電子郵件

使用 Litmus Checklist 進行自動 QA 測試，防止電子郵件錯誤（例如損壞的“添加到日曆”鏈接）。自信地發送品牌上無錯誤的電子郵件（並保護您的品牌聲譽）。

開始免費試用 →

第 3 步：將您的“添加到日曆”鏈接編碼到您的電子郵件中

在我們進入真正有趣的部分（編碼！）之前，您需要決定如何呈現您的“添加到日曆”鏈接。

決定如何顯示“添加到日曆”按鈕

正如我們之前提到的，傳統上，有多個“添加到日曆”鏈接以及 ICS 文件按鈕。使用動態按鈕作為添加到日曆按鈕時，您有兩種不同的選擇：

顯示一：您可以針對每個訂閱者的電子郵件客戶端並動態顯示與其電子郵件客戶端匹配的特定鏈接。
全部顯示：您可以使用混合模型，其中主要的號召性用語 (CTA) 按鈕針對每個訂閱者的電子郵件客戶端進行個性化設置，並且您仍然提供備用日曆鏈接。

如果您可以為每個訂閱者個性化添加到日曆鏈接，您可能想知道為什麼要考慮顯示其他日曆鏈接。

只顯示一個鏈接並沒有考慮到像我這樣的人。我經常使用我的工作電子郵件來註冊電子郵件，這樣我就可以看到它們在 Outlook 中的樣子。但我想將該活動添加到我的個人 Gmail 日曆中。如果只提供一個日曆鏈接，這對人們來說可能是一個摩擦點。

顯示多個日曆鏈接的第二個選項是解決此問題的好方法。

這比僅根據電子郵件客戶端偏好隱藏和顯示 CTA 按鈕要復雜一些，但在我看來，它提供了最佳的用戶體驗，因為您在收件箱中遇到訂閱者，但仍能適應他們可能擁有的任何工作流程。

創建您的 CTA 按鈕和鏈接

所以，現在是有趣的部分：將 ICS 文件按鈕編碼為默認值。從這個開始，因為無論您的訂閱者從哪個電子郵件客戶端、應用程序或設備閱讀，它都可以在任何地方使用。

首先，使用 iCalendar Event Maker 工具獲取您在第 2 步中創建的 ICS 文件。然後，將其上傳到您公司的服務器、內容管理系統 (CMS) 或電子郵件提供商的媒體庫。

現在是按鈕構建時間。有很多不同的方法來構建按鈕；您可以查看我們的防彈按鈕終極指南，了解其中一些。現在，我們非常喜歡 Mark Robbins 的可訪問按鈕，因此您可以使用以下示例：

<a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>

然後，為您計劃使用的其他電子郵件客戶端的日曆鏈接創建 URL，並將它們放在您剛剛創建的按鈕下：

<p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                   	 
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
</p>

最後，將整個內容包裝在 <div> 標籤中，以便您可以將其定位為個性化：

<div class="default">
     <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
     </p>
</div>

使用正確的日曆鏈接定位正確的受眾

對於您想要定位的每個電子郵件客戶端，您必須創建您在上面創建的 <div> 內容塊的新版本——但使用目標電子郵件客戶端的相應日曆鏈接作為添加到日曆 CTA 按鈕，然後移動下面的額外日曆鏈接。

最後，使用 CSS 來定位特定的電子郵件客戶端，並在隱藏默認內容的同時向他們顯示其特定於客戶端的內容。專業提示：將每個定位 CSS 放在自己的樣式塊中，因為眾所周知，將它們添加到主樣式塊會干擾定位。

那麼您可以定位哪些電子郵件客戶？

Gmail
辦公室 365
展望網
雅虎*
美國在線*

您還可以針對 Outlook 的桌面客戶端進行定位，但由於無論如何都會使用默認按鈕，因此您無需一次性定位它。（哇！）

現在詳細了解如何定位每個電子郵件客戶端（請參閱我們針對 Yahoo 和 AOL 的更新說明）。

Gmail

您要為 Gmail 顯示的內容塊將 Google 日曆 URL 作為主要按鈕。循環按鈕下的其他鏈接以包含 ICS 文件。此外，您需要對其他人隱藏整個塊，因此將值為 none 的 display 屬性添加到 <div> 標記並將整個內容包裝在條件代碼中以將其隱藏在 Outlook 中。

結果如下所示：

<!--Gmail Button-->
<!--[if (gte mso 9)|(IE)]><!-->
<div class="gmail" style="display: none;">
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><span style="mso-text-raise:15pt;">Add to your Google Calendar</span></a>
                       	 
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Apple Mail/Outlook Desktop</a>
     </p>
</div>                   	 
<!--<![endif]-->

Gmail 會自動將文檔類型更改為 <u></u>。它與從 <body> 標籤繼承 class 和 ID 的 <div> 元素相鄰放置。因此，請使用以下內容來定位 Gmail 中的內容：

u + .body .foo {}

隱藏默認值並顯示 Gmail 按鈕的樣式塊如下所示：

<!--gmail styles-->
<style>
     u + .body .gmail { display: block !important; }
     u + .body .default { display: none !important; }
</style>

Outlook.com 和 Office 365

Outlook.com（Outlook Web App 或 OWA）和 Office 365 的塊看起來與 Gmail 塊相同，只是稍作修改：按鈕和鏈接 URL 的類和循環以說明新的目標客戶端。

可能會有一些混淆，因為 Office 365 同時具有桌面和網絡郵件客戶端。但是，目標僅適用於 Outlook 網絡郵件客戶端，它確保桌面客戶端的主按鈕鏈接到 ICS 文件，而在網絡郵件客戶端中，它是日曆鏈接的 URL。

Outlook.com 和 Office 365 網絡郵件都使用 x_ 作為類名的前綴，但不會在屬性選擇器上執行此操作。所以你的 <div> 塊可以定位為：

[class="x_foo"] {}

…它僅適用於 Outlook 網絡郵件客戶端。因此，Outlook 網絡郵件客戶端的樣式塊如下所示：

<!--owa styles-->
<style>
     [class~="x_outlook"] { display: block !important; }
     [class~="x_default"] { display: none !important; }
</style>

雅虎和美國在線

雅虎曾經有一個日曆鏈接，但截至我們上次測試時，該鏈接會將您帶到日曆頁面以添加事件——但沒有任何事件詳細信息可以保留。

這可能是由於雅虎的變化。由於 AOL 和 Yahoo 都歸 Verizon 所有，因此它們可能正在精簡電子郵件客戶端，使它們彼此更加一致。

雖然您仍然可以專門針對 Yahoo 和 AOL，但它們現在僅支持 ICS 文件。因此，請節省時間，只需使用本博文第 3 步開頭共享的默認添加到日曆代碼即可，直至另行通知。

查看這些“添加到日曆”鏈接的實際效果

因此，雖然上面的代碼很漂亮，但您可能想知道它在實際電子郵件中實現時的樣子。幸運的是，我們在 Litmus Builder 中對其進行了編碼，這樣您就可以看到“添加到日曆”按鈕和鏈接的樣子，以及它們如何在不同的電子郵件客戶端和設備上呈現。

現在就去為您的活動客人提供這種特殊的電子郵件處理吧！

確保您的活動電子郵件看起來正確

損壞的電子郵件意味著更少的轉化——比如人們將您的活動添加到他們的日曆中。哎呀。使用 Litmus 電子郵件預覽等功能防止電子郵件錯誤並保護您的品牌聲譽。

開始免費試用 →

這篇博文最初由 Jaina Mistry 於 2019 年 5 月 8 日發表。 為清楚起見並提供新信息，它已於 2021 年 2 月 5 日更新。