{"id":3433,"date":"2026-02-12T12:42:00","date_gmt":"2026-02-12T17:42:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails\/"},"modified":"2026-06-02T13:42:52","modified_gmt":"2026-06-02T17:42:52","slug":"how-to-create-an-add-to-calendar-link-for-your-emails","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails","title":{"rendered":"How to Create an &#8220;Add to Calendar&#8221; Link for Your Emails"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_ad57196bfaefd40c0110ac51316b5339\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<table style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px;\">\n<h3>Key takeaways<\/h3>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li aria-level=\"1\"><strong>Adding an \u201cAdd to Calendar\u201d link increases event attendance by allowing subscribers to save event details with a single click, reducing friction and maximizing engagement.<\/strong><\/li>\n<li aria-level=\"1\"><strong>Different calendar platforms require different integration methods, with ICS files being universally accepted and direct calendar links offering a seamless experience for Gmail, Outlook.com, and Office 365 users.<\/strong><\/li>\n<li aria-level=\"1\"><strong>Personalized calendar links improve the user experience, ensuring subscribers can effortlessly add events to the correct calendar based on their email client, leading to higher participation and conversions.<\/strong><\/li>\n<li aria-level=\"1\"><strong>Litmus Personalize simplifies the process, enabling marketers to create branded \u201cAdd to Calendar\u201d links in just a few clicks, enhancing automation and efficiency in event-driven email campaigns.<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/zFGAXOF6pBs?si=8wq5YQOfjES2SpRQ\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe> <script type=\"application\/ld+json\">{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"VideoObject\",\n  \"name\": \"Create an Add-to-Calendar Link for Emails \ud83d\uddd3\ufe0f\",\n  \"description\": \"How fast can you create an add-to-calendar link for your emails? \u26a1 Our Email Marketing Manager Tracie Pang does it in a matter of clicks\u2014all within Litmus.  Plus, you can now upload a custom brand font to use across Litmus Personalize quick-start templates! \ud83c\udf89  Discover the latest enhancements in Litmus: https:\/\/lit.ms\/3vgRPbm  #emailmarketing #litmus #ecommerce #shorts #emailmarketingtips #emailmarketingagency #marketingchannels #marketingtips #personalization #emailpersonalization #personalizedmarketing #personalizedemails\",\n  \"thumbnailUrl\": \"https:\/\/i.ytimg.com\/vi\/zFGAXOF6pBs\/default.jpg\",\n  \"uploadDate\": \"2024-06-21T16:00:39Z\",\n  \"duration\": \"PT52S\",\n  \"embedUrl\": \"https:\/\/www.youtube.com\/embed\/zFGAXOF6pBs\",\n  \"interactionCount\": \"663\"\n}<\/script><\/p>\n<p>In-person or virtual events revolve around getting to know other people and learning from one another. Because email is such a personal channel, it\u2019s the ideal medium to build excitement for events and send those all important event reminders.<\/p>\n<p>This is your opportunity to make it easy for your email subscribers to add important events, promotions, webinars, appointments, that flash sale on their favorite shoes&#8211; whatever key moments you can think of&#8211; to their own calendar straight from your email with <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-best-10-personalized-email-templates-by-industry-and-use-case\" target=\"_blank\" rel=\"noopener\">personalized email templates<\/a>.<\/p>\n<p>There are multiple ways to add a calendar link to your emails. By far the easiest way is with <a rel=\"noopener\" href=\"#Litmus-add-to-calendar\">Add-to-Calendar in Litmus Personalize<\/a>, which allows you to create custom calendar links in just a few clicks so subscribers can take action directly from your email. But if you don&#8217;t have Litmus, fear not. Below we&#8217;ll walk you through the entire email add-to-calendar process step-by-step.<\/p>\n<h2>Why You Should Use Calendar Links in Email Campaigns<\/h2>\n<p>To ensure that guests actually show up, include an \u201cAdd to Calendar\u201d link in your event emails. With that, subscribers can add your events to their own calendars, helping them avoid calendar conflicts and allowing them to set up their own reminders. And maximizing the chance of them attending your event.<\/p>\n<p>Traditionally, this is done with an ICS file\u2014also known as <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/icalendar.org\/\">iCalendar<\/a>. This is a common calendar format that typically uses the .ics file extension and is widely accepted by most calendars. Not to be confused with Apple\u2019s iCal, which shares a similar name, although iCalendar files do work there as well. For clarity, we\u2019ll refer to this as an ICS or calendar file throughout this blog post.<\/p>\n<p>Some calendars can also add events from web links\u2014what we\u2019ll refer to as calendar links. Taking the extra time to dynamically show the \u201cAdd to Calendar\u201d link that matches each subscriber\u2019s specific email client can make it easier and faster for your subscribers to add your event to their calendar.<\/p>\n<p>We\u2019ll walk you through which calendars you should care about, creating the actual calendar files and links, and coding these files and links into your event email for the best subscriber experience.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px;\"><strong>Table of Contents<\/strong><\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"#choose-which-calendars-to-target\">Choose which calendars to target<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#add-to-calendar-methods\">\u201cAdd to Calendar\u201d methods by calendar<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#generate-add-to-calendar-links\">Generate the \u201cAdd to Calendar\u201d link<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-ics-files\">How to create ICS calendar files<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-calendar-links\">How to create calendar links<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#code-your-add-to-calendar-links\">Code your \u201cAdd to Calendar\u201d links for your email<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#decide-how-to-display-your-add-to-calendar-button\">Decide how do display your \u201cAdd to Calendar\u201d button<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#create-your-cta-buttons-and-links\">Create your \u201cAdd to Calendar\u201d buttons and links<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#target-the-right-audience-with-the-right-calendar-link\">How to target the right audience<\/a>\n<ul>\n<li><a rel=\"noopener\" href=\"#default\">Default<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#gmail\">Gmail<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#outlook-office365\">Outlook.com and Office 365<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#yahoo-aol\">Yahoo and AOL<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a rel=\"noopener\" href=\"#see-these-add-to-calendar-links-in-action\">See the \u201cAdd to Calendar\u201d link in action<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 id=\"choose-which-calendars-to-target\">Step 1: Choose which calendars to target<\/h2>\n<p>There are countless different calendar applications available: ones available by default through your computer or mobile phone\u2019s operating system, as part of your webmail, or another calendar application you\u2019ve downloaded. It\u2019s virtually impossible to support all the calendar applications out there.<\/p>\n<p>To help you understand which calendar tools to focus on, take a look at your <a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-analytics\">Email Analytics data<\/a>. If you&#8217;re in the middle of an \u201cAdd to Calendar\u201d link increases event attendance by allowing subscribers to save event details with a single click, reducing friction and maximizing engagement. Different calendar platforms require different integration methods, with ICS files being universally accepted and direct calendar links offering a seamless experience for Gmail, Outlook.com, and Office 365 users. Personalized calendar links improve the user experience, ensuring subscribers can effortlessly add events to the correct calendar based on their email client, leading to higher participation and conversions.<\/p>\n<p>Litmus Personalize simplifies the process, enabling marketers to create branded \u201cAdd to Calendar\u201d links in just a few clicks, enhancing automation and efficiency in event-driven email campaigns. In-person or virtual events revolve around getting to know other people and learning from one another. Because email is such a personal channel, it\u2019s the ideal medium to build excitement for events and send those all important event reminders. This is your opportunity to make it easy for your email subscribers to add important events, promotions, webinars, appointments, that flash sale on their favorite shoes\u2013 whatever key moments you can think of\u2013 to their own calendar straight from your email with personalized email templates. There are multiple ways to add a calendar link to your emails. By far the easiest way is with Add-to-Calendar in Litmus Personalize, which allows you to create custom calendar links in just a few clicks so subscribers can take action directly from your email. But if you don\u2019t have Litmus, fear not.<\/p>\n<div>\n<figure id=\"attachment_79761\" aria-describedby=\"caption-attachment-79761\" style=\"width: 500px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-79761\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Email-Clients-300x124.png\" alt=\"Pie chart showing email client data.\" width=\"500\" height=\"207\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Email-Clients-300x124.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Email-Clients-1024x423.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Email-Clients-768x317.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Email-Clients.png 1200w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-79761\" class=\"wp-caption-text\">Example of email client data from <a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-analytics\">Litmus Email Analytics.<\/a><\/figcaption><\/figure>\n<p>All calendars are capable of using an ICS file to add new events to it. But it requires people to first download the ICS file and then upload it to their calendar.<\/p>\n<p>However, in Gmail, Office 365, and Outlook.com, you can also add events using a link that automatically includes your event details. This leads to a better subscriber experience, since it takes just one click for your subscribers to add your event to their calendar.<\/p>\n<p>Here\u2019s a handy chart that quickly summarizes which calendar accepts which \u201cAdd to Calendar\u201d method to help prepare you for the next step.<\/p>\n<h3 id=\"add-to-calendar-methods\">\u201cAdd to Calendar\u201d Method by Calendar<\/h3>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 0px; font-weight: bold; line-height: 20px; text-align: left;\">Calendar<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">ICS Calendar File<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">Calendar Link<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Google Calendar<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook.com<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">AOL<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Yahoo<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Office 365<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook (desktop)<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Apple Calendar<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #0e9453;\">\u2713<\/p>\n<\/td>\n<td style=\"border: 0; text-align: center;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; color: #ea7165;\">\u2718<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p><strong>Friendly reminder:<\/strong> while it&#8217;s easier for you to only create an ICS calendar file because it\u2019s accepted by most email clients, it\u2019s not easier for your subscribers.<\/p>\n<p>Personalizing the calendar link for each email client increases the chance that your subscribers will actually add your event to their calendar (and attend and convert!) since it\u2019s just one click away. Making someone add an ICS file to their calendar requires more steps, and you might lose some folks along the way.<\/p>\n<h2 id=\"generate-add-to-calendar-links\">Step 2: \u200b\u200bGenerate the &#8220;Add to Calendar&#8221; Link<\/h2>\n<p>Depending on which email clients your subscribers use to read emails, you may choose to create an ICS calendar file, calendar link, or both.<\/p>\n<h3 id=\"how-to-ics-files\">How to create ICS calendar files<\/h3>\n<p>Because ICS files power the links for many calendar applications, this is always a great fallback to have.<\/p>\n<p>To get started, we recommend this <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ical.marudot.com\/\">iCalendar Event Maker tool<\/a> to generate the files. It allows you to add any information your subscribers may need to know about the event such as location, description, and a URL. You can even get more specific with your event, having it repeat or adding notifications for your guests.<\/p>\n<p>Once your audience adds your file to their calendar, they have the details that make it clear what the event is for. And it acts as a reminder as to why the event is in their calendar.<\/p>\n<h3 id=\"how-to-calendar-links\">How to create calendar links<\/h3>\n<p>To create \u201cAdd to Calendar\u201d links for webmail calendars, we suggest <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.labnol.org\/apps\/calendar.html\">Amit Agarwal\u2019s Calendar Links tool<\/a>. It will generate the entire URL you\u2019ll need to include in your email.<\/p>\n<p>There is a downside to this tool: you can\u2019t create recurring events or include a notification like you can with ICS files. You can add these details to the calendar URLs, but you\u2019d have to create them in each calendar, which you may not have access to.<\/p>\n<p>This is why it\u2019s good practice to create an ICS calendar file in addition to calendar links.<\/p>\n<h2 id=\"code-your-add-to-calendar-links\">Step 3: \u200b\u200bCode your \u201cAdd to Calendar\u201d links for your email<\/h2>\n<p>Before we get to the really fun part (coding!), you need to decide how you\u2019re going to present your &#8220;Add to Calendar&#8221; link.<\/p>\n<h3 id=\"decide-how-to-display-your-add-to-calendar-button\">Decide how to display your \u201cAdd to Calendar\u201d button<\/h3>\n<p>As we mentioned earlier, traditionally, there are multiple \u201cAdd to Calendar\u201d links along with the ICS file button. When using dynamic buttons as your Add to Calendar buttons, you have two different options:<\/p>\n<ul>\n<li><strong>Show one:<\/strong> You can target each subscriber\u2019s email client and dynamically display the specific link that matches their email client.<\/li>\n<li><strong>Show all:<\/strong> You can use a hybrid model where the main call-to-action (CTA) button is personalized for each subscriber\u2019s email client, and you still provide the alternative calendar links.<\/li>\n<\/ul>\n<p>If you can personalize the \u201cAdd to Calendar\u201d link for every subscriber, you might wonder why you\u2019d want to consider showing the other calendar links at all.<\/p>\n<p>Showing just one link doesn\u2019t take into account people like, well, me. I\u2019d often use my work email to sign up for emails so I could see what they looked like in Outlook. But I\u2019d want to add the event to my personal Gmail calendar. This can be a point of friction for people if only one calendar link is provided.<\/p>\n<p>The second option of showing multiple calendar links is a great way to solve this problem.<\/p>\n<figure id=\"attachment_25996\" aria-describedby=\"caption-attachment-25996\" style=\"width: 332px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-25996 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/add-to-calendar-email-example.png\" alt=\"Add to Calendar email example\" width=\"332\" height=\"137\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/add-to-calendar-email-example.png 332w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/add-to-calendar-email-example-300x124.png 300w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><figcaption id=\"caption-attachment-25996\" class=\"wp-caption-text\">Example of a personalized button with calendar links<\/figcaption><\/figure>\n<p>It\u2019s a little more complicated than just hiding and showing CTA buttons based on email client preference, but it provides the best user experience in my opinion, as you meet the subscriber in their inbox, but still accommodate for any workflow they may have.<\/p>\n<h3 id=\"create-your-cta-buttons-and-links\">Create your CTA buttons and links<\/h3>\n<p>So, now for the fun part: coding the ICS file button as the default. Start with this because it works everywhere no matter which email client, app, or device your subscribers read from.<\/p>\n<p>First, get the ICS file you created in step 2 using the iCalendar Event Maker tool. Then, upload it to your company\u2019s servers, content management system (CMS), or email provider\u2019s media library.<\/p>\n<p>Now it\u2019s button building time. There are lots of different ways to build an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-bulletproof-buttons-in-email-design\" target=\"_blank\" rel=\"noopener\">html email button<\/a>; you can check out our <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-bulletproof-buttons-in-email-design\/\">Ultimate Guide to Bulletproof Buttons<\/a> for a few of them. These days, we\u2019re a fan of <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.goodemailcode.com\/email-code\/link-button\">Mark Robbins\u2019 accessible button<\/a>, so here\u2019s an example of that you can use:<\/p>\n<\/div>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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);\">&lt;!--[if mso]>&lt;i style=\"letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt\"> &lt;\/i>&lt;![endif]-->&lt;span style=\"mso-text-raise:15pt;\">Add to your Calendar&lt;\/span>&lt;!--[if mso]>&lt;i style=\"letter-spacing: 25px;mso-font-width:-100%\"> &lt;\/i>&lt;![endif]-->&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_9521d90bec8cc4ca498ac18d1a21a550\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Then, create the URLs for the other email client\u2019s calendar links you plan on using and put them under the button you just created:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;p style=\"font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;\">\n&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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&amp;enddt=2022-01-12T20%3A00%3A00%2B00%3A00&amp;location=New%20Earth&amp;path=%2Fcalendar%2Faction%2Fcompose&amp;rru=addevent&amp;startdt=2022-01-12T18%3A00%3A00%2B00%3A00&amp;subject=Welcome%20to%20the%20Motorway\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Outlook.com&lt;\/a> | &lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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&amp;enddt=2022-01-12T20%3A00%3A00%2B00%3A00&amp;location=New%20Earth&amp;path=%2Fcalendar%2Faction%2Fcompose&amp;rru=addevent&amp;startdt=2022-01-12T18%3A00%3A00%2B00%3A00&amp;subject=Welcome%20to%20the%20Motorway\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Office 365&lt;\/a> | &lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&amp;dates=20220112T180000Z%2F20220112T200000Z&amp;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&amp;location=New%20Earth&amp;text=Welcome%20to%20the%20Motorway\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Google&lt;\/a> | &lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.aol.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">AOL&lt;\/a> | &lt;a  target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.yahoo.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Yahoo&lt;\/a>&lt;\/span>&lt;\/p>\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_3e12e3bd76e141acf86d57cc1c7488d6\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>At this point, you could stop. This code provides the button and additional links for the best subscriber experience. However, if you want to provide a more personalized experience by creating a dynamic button that works in the email client your subscribers are opening your email in\u2014read on!<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_0c4e004359b7b356a00bc0bd37b56c79\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/add-to-calendar-icon2.svg\" alt=\"\" width=\"40\" height=\"40\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Make Add-to-Calendar links a breeze with Litmus Personalize<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>In just a few clicks, you can create tailored subscriber experiences using proven personalization tactics such as add-to-calendar links, live polls, countdown timers and more. <\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\/quick-start-templates\">\n\t\t\t\t\t\tLearn more\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_4b46ba11ba48b4458b6cccbfc6b2c1ed\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h3 id=\"target-the-right-audience-with-the-right-calendar-link\">Target the right audience with the right calendar link<\/h3>\n<p>For each email client that you want to target, you\u2019ll have to create a new version of the button. And then show and hide the buttons and the links under the button with email client specific CSS.<\/p>\n<p><strong>Pro tip:<\/strong> put each targeting CSS in its own style block as adding them to the main style block has been known to mess with the targeting.<\/p>\n<p>So which email clients can you target?<\/p>\n<ul>\n<li>Gmail<\/li>\n<li>Office 365<\/li>\n<li>Outlook.com<\/li>\n<li>Yahoo\/AOL<\/li>\n<\/ul>\n<p>You can also target the desktop client for Outlook, but since that would use the default button anyway, you don\u2019t need to target it for once. (Wahoo!)<\/p>\n<p>Before we can get to the nitty gritty of how to target each email client, we need to create the different versions of the buttons. Since we don\u2019t want these buttons to show up on Outlook desktop clients, we\u2019ll wrap them all in a conditional statement. Then we\u2019ll copy the button from above once for each email client we want to target and update the links. Which leads us to something like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--[if (gte mso 9)|(IE)]>&lt;!-->\n&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&amp;dates=20220112T180000Z%2F20220112T200000Z&amp;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&amp;location=New%20Earth&amp;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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your Google Calendar&lt;\/span>&lt;\/a>\n                                  \n&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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&amp;enddt=2022-01-12T20%3A00%3A00%2B00%3A00&amp;location=New%20Earth&amp;path=%2Fcalendar%2Faction%2Fcompose&amp;rru=addevent&amp;startdt=2022-01-12T18%3A00%3A00%2B00%3A00&amp;subject=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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your Outlook Calendar&lt;\/span>&lt;\/a>\n                                  \n&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.aol.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" 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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your AOL Calendar&lt;\/span>&lt;\/a>&amp;nbsp;&amp;nbsp;\n                                  \n&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.yahoo.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" 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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your Yahoo Calendar&lt;\/span>&lt;\/a>\n&lt;!--&lt;![endif]-->\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_e450d9c70fb79101ca27b5684ecdcece\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p id=\"target-the-right-audience-with-the-right-calendar-link\">Then we\u2019ll add a link to the list under the buttons for the ICS file so that we can have that show up in email clients:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/campaigns.litmus.com\/_email\/test\/newnewyork.ics\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">iCal file&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_ed3797f40f60594d1a57d7c1e2ad314a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>That\u2019s wonderful, but now you\u2019ve got a bunch of buttons showing up and links showing up. Let\u2019s clean all that up by adding some targeting classes.<\/p>\n<h4 id=\"default\">Start with the Default<\/h4>\n<p>We\u2019ll add default classes on the ICS file button so we can hide\/show it:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/campaigns.litmus.com\/_email\/test\/newnewyork.ics\" class=\"default 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);\">&lt;!--[if mso]>&lt;i style=\"letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt\">&amp;nbsp;&lt;\/i>&lt;![endif]-->&lt;span style=\"mso-text-raise:15pt;\">Add to your Calendar&lt;\/span>&lt;!--[if mso]>&lt;i style=\"letter-spacing: 25px;mso-font-width:-100%\">&amp;nbsp;&lt;\/i>&lt;![endif]-->&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_930bbc7298a2f21c95e2308f0f29ba3f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Then we add a <code>&lt;span&gt;<\/code> around the link for the ICS file and add a class so we can hide it when the default button is showing:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;span class=\u201ddefault-hide\u201d>&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/campaigns.litmus.com\/_email\/test\/newnewyork.ics\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">iCal file&lt;\/a>&lt;\/span><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_2e68d9474888eb015207547cd5bef960\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Now that we\u2019ve got the classes we\u2019ll create the style block to do the hiding and showing:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--default styles-->\n&lt;style>\n        .default-hide { display: none !important; mso-hide: all; }\n&lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_a1a855907c1bfbf4d3bee66675bdb09b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>As we add the classes to the rest of the buttons, we\u2019ll come back to this style block and hide them as the default.<\/p>\n<h4 id=\"gmail\">Gmail<\/h4>\n<p>Moving on to the Google button, we add a class to the button so we can show it:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&amp;dates=20220112T180000Z%2F20220112T200000Z&amp;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&amp;location=New%20Earth&amp;text=Welcome%20to%20the%20Motorway\" class=\"gmail-show 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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your Google Calendar&lt;\/span>&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_971cef4a037280896a14115d9dee892a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And then we add a class on a span and wrap it around the Google link to hide it:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;span class=\"gmail-hide\">&lt;a  target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&amp;dates=20220112T180000Z%2F20220112T200000Z&amp;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&amp;location=New%20Earth&amp;text=Welcome%20to%20the%20Motorway\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Google&lt;\/a>&lt;\/span><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_0fc6bed1540ec303bc413aad2a437d54\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>For the style block for Gmail we\u2019ll take advantage of the fact that Gmail automatically changes the doctype to <code>&lt;u&gt;&lt;\/u&gt;<\/code>. This is placed adjacent to a <code>&lt;div&gt;<\/code> element that inherits class and ID from the <code>&lt;body&gt;<\/code> tag. So use the following to target content in Gmail:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">u + .body .foo {} <\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_0b7195099499d8cbe5bd79663e99a9d7\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>The style block to hide the default and show the Gmail button looks like so:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--gmail styles-->\n&lt;style>\n        u + .body .gmail-show { display: inline-block !important; }\n        u + .body .gmail-hide { display: none !important; }\n        u + .body .default { display: none !important; }\n        u + .body .default-hide { display: inline-block !important; }\n&lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_3ad90742d0a8bdd51b36e6d0ba10bd38\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And the default style block gets updated as well:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--default styles-->\n&lt;style>\n        .gmail-show { display: none !important; }\n        .default-hide { display: none !important; mso-hide: all; }\n&lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_8d86f11255a867554635314e0d228b82\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h4 id=\"outlook-office365\">Outlook.com and Office 365<\/h4>\n<p>The button for the Outlook web apps has one button that works for both of them. So the button ends up like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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&amp;enddt=2022-01-12T20%3A00%3A00%2B00%3A00&amp;location=New%20Earth&amp;path=%2Fcalendar%2Faction%2Fcompose&amp;rru=addevent&amp;startdt=2022-01-12T18%3A00%3A00%2B00%3A00&amp;subject=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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your Outlook Calendar&lt;\/span>&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_20dd81b7e20fb072037518db36d02989\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>For adding the calendar links, we\u2019ve included copy for both Outlook.com and Office 365 to remove any confusion for our subscribers, but since they\u2019re both the same link, we can wrap the span around both of them:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;span class=\"outlook-hide\">&lt;a  target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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&amp;enddt=2022-01-12T20%3A00%3A00%2B00%3A00&amp;location=New%20Earth&amp;path=%2Fcalendar%2Faction%2Fcompose&amp;rru=addevent&amp;startdt=2022-01-12T18%3A00%3A00%2B00%3A00&amp;subject=Welcome%20to%20the%20Motorway\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Outlook.com&lt;\/a>\n&lt;a  target=\"_blank\" rel=\"noopener\" target=\"_blank\" 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&amp;enddt=2022-01-12T20%3A00%3A00%2B00%3A00&amp;location=New%20Earth&amp;path=%2Fcalendar%2Faction%2Fcompose&amp;rru=addevent&amp;startdt=2022-01-12T18%3A00%3A00%2B00%3A00&amp;subject=Welcome%20to%20the%20Motorway\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Office 365&lt;\/a>&lt;\/span><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_a59def269d90bdfc8496fcb3c3395b82\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>There may be some confusion as Office 365 has both a desktop and a webmail client. However, the targeting only applies to the Outlook webmail client which ensures the main button for the desktop client links to the ICS file while in the webmail client, it\u2019s the URL to the calendar link.<\/p>\n<p>Both Outlook.com and Office 365 webmail prefixes class names with x_ but doesn\u2019t do this on attribute selector. So your styles block can be targeted with:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">[class=\"x_foo\"] {} <\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_c006b7eb0673ed4e7b53f37b6965f900\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>\u2026and it\u2019ll only apply to the Outlook webmail client. Therefore, the style block for the Outlook webmail client looks like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--owa styles-->\n    &lt;style>\n    [class~=\"x_outlook-show\"] { display: inline-block !important; }\n    [class~=\"x_outlook-hide\"] { display: none !important; }\n    [class~=\"x_default\"] { display: none !important; }\n    [class~=\"x_default-hide\"] { display: inline-block !important; }\n    &lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_e7c406a01d75cf8e121e88881c92e465\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And the default block needs to be updated as well:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--default styles-->\n    &lt;style>\n        .gmail-show { display: none !important; }\n        .outlook-show { display: none !important; }\n        .default-hide { display: none !important; mso-hide: all; }\n    &lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_0e9be7288fd09641de2f1f8e66d26e17\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h4 id=\"yahoo-aol\">Yahoo and AOL<\/h4>\n<p>Yahoo and AOL are targetable with the same code. Both support calendar links these days. You can create the add to calendar link for Yahoo using the above tool. Then to make the AOL link, you\u2019ll replace \u201cyahoo\u201d in the URL with \u201caol\u201d and voila AOL calendar link.<\/p>\n<p>Since there isn\u2019t a way to target AOL or Yahoo separately, you\u2019ll need to include both versions of the buttons for those email clients, so they both get the same class:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.aol.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" class=\"yahoo-show 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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your AOL Calendar&lt;\/span>&lt;\/a>&amp;nbsp;&amp;nbsp;\n                                  \n&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.yahoo.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" class=\"yahoo-show 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);\">&lt;span style=\"mso-text-raise:15pt;\">Add to your Yahoo Calendar&lt;\/span>&lt;\/a><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_d58c1d837756ea92de94d2fdd432326b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And the both the AOL and the Yahoo links will be added in one span, much like the two Outlook links:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;span class=\"yahoo-hide\">&amp;nbsp;|&amp;nbsp;&lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.aol.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">AOL&lt;\/a> | &lt;a target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/calendar.yahoo.com\/?desc=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&amp;dur=&amp;et=20220112T190000Z&amp;in_loc=New%20Earth&amp;st=20220112T170000Z&amp;title=Welcome%20to%20the%20Motorway&amp;v=60\" target=\"_blank\" style=\"color: #fdfdfd; text-decoration: underline;\">Yahoo&lt;\/a>&lt;\/span><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_7e03eda86236dcd35af4500b205204aa\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>To target Yahoo and AOL we take advantage of the fact that Yahoo and AOL will replace .&amp; with their wrapping id. So your Yahoo and AOL styles can be targeted with:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.&amp; .fubar { } <\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_23a3c32df223c387b9dcd36fcb2db1c4\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>This makes the AOL\/Yahoo style block look like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--yahoo styles-->\n&lt;style>\n.&amp; .yahoo-show { display: inline-block !important }\n.&amp; .yahoo-hide { display: none !important }\n.&amp; .default { display: none !important }\n.&amp; .default-hide { display: inline-block !important }\n&lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_51e2d28527942114f72e3043cc3d7469\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And then the default style block needs to be updated one last time\u2026<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--default styles-->\n&lt;style>\n    .gmail-show { display: none !important; }\n    .outlook-show { display: none !important; }\n    .yahoo-show { display: none !important; }\n    .default-hide { display: none !important; mso-hide: all; }\n    .default-line { display: none !important; mso-hide: all; }\n&lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_a62e83edd7ec90b6c7ebb0ebc7845857\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h2 id=\"see-these-add-to-calendar-links-in-action\">See these \u201cAdd to Calendar\u201d links in action<\/h2>\n<p>So while the above code is beautiful, you\u2019re probably wondering what it looks like when implemented in an actual email. Lucky for you, we <a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/24b1815\">coded it up in Litmus Builder<\/a> so you can see what the \u201cAdd to Calendar\u201d button and links look like live and how they render across different email clients and devices.<\/p>\n<p>Keep in mind we used different copy for the different buttons to make sure the correct buttons are showing up in the correct email clients. You could very easily have all the buttons say \u201cAdd to Calendar\u201d. If you do that, make sure the correct buttons are showing in the right email client by carefully QA\u2019ing your email in each email client.<\/p>\n<h2 id=\"Litmus-add-to-calendar\">Leverage Add-to-Calendar in Litmus<\/h2>\n<p>If add-to-calendar links are an essential part of your business email program, there\u2019s an even easier way to get calendar links into your emails: Litmus Personalize offers a quick and easy way to insert add-to-calendar links into your email that are on brand and easy for your audience to use.<\/p>\n<p>This feature is handy for:<\/p>\n<ul>\n<li>Upcoming <strong>event invitations<\/strong><\/li>\n<li>Upcoming dates like a major <strong>launch, sale<\/strong>, or <strong>promotion<\/strong><\/li>\n<li>For B2B brands garnering RSVPs to upcoming events like <strong>webinars or conferences<\/strong><\/li>\n<li>Reminders about <strong>appointments or deadlines<\/strong><\/li>\n<\/ul>\n<img decoding=\"async\" class=\"alignnone wp-image-98395\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/Personalization-Page_Add-to-calendar-249x300.png\" alt=\"how to create add-to-calendar links for your emails\" width=\"671\" height=\"808\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/Personalization-Page_Add-to-calendar-249x300.png 249w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/Personalization-Page_Add-to-calendar-850x1024.png 850w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/Personalization-Page_Add-to-calendar-768x925.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/Personalization-Page_Add-to-calendar-1276x1536.png 1276w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/Personalization-Page_Add-to-calendar.png 1342w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In just four steps, your emails are populated with add-to-calendar links. Simply:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">Select \u201cAdd to Calendar\u201d in the Litmus Personalize tab<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Configure your event details, like event title, description, location, date, start and end time, and timezone<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Style your button by defining the spacing, text, font, colors, and size.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Preview your add-to-calendar experience, then generate and drop your HTML tag directly into your email<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Learn more about Add-to-Calendar in Litmus by checking out our <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/new-product-release\" target=\"_blank\" rel=\"noopener\">product updates page<\/a>.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, go give your event guests this special email treatment!<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_80f1e682ca824f687db85f413f3ce850\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/emailguardianicon.png\" alt=\"Litmus Email Guardian icon\" width=\"244\" height=\"244\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Email Guardian is there when you can\u2019t be<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Broken emails mean less conversions\u2014like fewer people adding your event to their calendar. Yikes. Prevent email errors and protect your brand reputation with Litmus Email Guardian. <\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">\n\t\t\t\t\t\tLearn more\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn the HTML to make Add to Calendar links or ICS files in your emails for people to add your events to Google Calendar, Outlook, Apple Calendar, &amp; more.<\/p>\n","protected":false},"author":1,"featured_media":23719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[499,102],"blog_category":[10300],"class_list":["post-3433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-coding","tag-html","blog_category-email-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create an HTML Add to Calendar Link for Your Emails - Litmus<\/title>\n<meta name=\"description\" content=\"Learn how to create an &quot;add to calendar&quot; link in your emails. Allow people to add your event to Google Calendar, Outlook, Apple Calendar &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an &quot;Add to Calendar&quot; Link for Your Emails\" \/>\n<meta property=\"og:description\" content=\"Learn how to create an &quot;add to calendar&quot; link in your emails. Allow people to add your event to Google Calendar, Outlook, Apple Calendar &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-12T17:42:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-02T17:42:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/How-to-create-add-calendar2-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1345\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create an HTML Add to Calendar Link for Your Emails - Litmus","description":"Learn how to create an \"add to calendar\" link in your emails. Allow people to add your event to Google Calendar, Outlook, Apple Calendar & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails","og_locale":"en_US","og_type":"article","og_title":"How to Create an \"Add to Calendar\" Link for Your Emails","og_description":"Learn how to create an \"add to calendar\" link in your emails. Allow people to add your event to Google Calendar, Outlook, Apple Calendar & more.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2026-02-12T17:42:00+00:00","article_modified_time":"2026-06-02T17:42:52+00:00","og_image":[{"width":2560,"height":1345,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/How-to-create-add-calendar2-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails"},"author":{"name":"litmusadmin","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/558abbd8f270d945597fe17cbc04e4f2"},"headline":"How to Create an &#8220;Add to Calendar&#8221; Link for Your Emails","datePublished":"2026-02-12T17:42:00+00:00","dateModified":"2026-06-02T17:42:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/How-to-create-add-calendar2-scaled.jpg","keywords":["Email Coding","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails","url":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails","name":"How to Create an HTML Add to Calendar Link for Your Emails - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/How-to-create-add-calendar2-scaled.jpg","datePublished":"2026-02-12T17:42:00+00:00","dateModified":"2026-06-02T17:42:52+00:00","description":"Learn how to create an \"add to calendar\" link in your emails. Allow people to add your event to Google Calendar, Outlook, Apple Calendar & more.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/How-to-create-add-calendar2-scaled.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/05\/How-to-create-add-calendar2-scaled.jpg","width":2560,"height":1345,"caption":"person learning how to add to calendar link"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Create an &#8220;Add to Calendar&#8221; Link for Your Emails"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/558abbd8f270d945597fe17cbc04e4f2","name":"litmusadmin"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3433"}],"version-history":[{"count":24,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3433\/revisions"}],"predecessor-version":[{"id":124295,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3433\/revisions\/124295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/23719"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3433"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3433"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}