How to Create an “Add to Calendar” Link for Your Emails
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âs the ideal medium to build excitement for events and send those all important event reminders.
Why You Should Use Calendar Links in Email Campaigns
To ensure that guests actually show up, include an âAdd to Calendarâ 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.
Traditionally, this is done with an ICS fileâalso known as iCalendar. 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âs iCal, which shares a similar name, although iCalendar files do work there as well. For clarity, weâll refer to this as an ICS or calendar file throughout this blog post.
Some calendars can also add events from web linksâwhat weâll refer to as calendar links. Taking the extra time to dynamically show the âAdd to Calendarâ link that matches each subscriberâs specific email client can make it easier and faster for your subscribers to add your event to their calendar.
Weâll 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.
Step 1: Choose which calendars to target
There are countless different calendar applications available: ones available by default through your computer or mobile phoneâs operating system, as part of your webmail, or another calendar application youâve downloaded. Itâs virtually impossible to support all the calendar applications out there.
To help you understand which calendar tools to focus on, take a look at your Email Analytics data.
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.
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.
Hereâs a handy chart that quickly summarizes which calendar accepts which âAdd to Calendarâ method to help prepare you for the next step.
âAdd to Calendarâ Method by Calendar
Calendar | ICS Calendar File | Calendar Link |
Google Calendar | â | â |
Outlook.com | â | â |
AOL | â | â |
Yahoo | â | â |
Office 365 | â | â |
Outlook (desktop) | â | â |
Apple Calendar | â | â |
Friendly reminder: while it’s easier for you to only create an ICS calendar file because itâs accepted by most email clients, itâs not easier for your subscribers.
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âs 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.
Step 2: ââGenerate the “Add to Calendar” Link
Depending on which email clients your subscribers use to read emails, you may choose to create an ICS calendar file, calendar link, or both.
How to create ICS calendar files
Because ICS files power the links for many calendar applications, this is always a great fallback to have.
To get started, we recommend this iCalendar Event Maker tool 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.
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.
How to create calendar links
To create âAdd to Calendarâ links for webmail calendars, we suggest Amit Agarwalâs Calendar Links tool. It will generate the entire URL youâll need to include in your email.
There is a downside to this tool: you canât create recurring events or include a notification like you can with ICS files. You can add these details to the calendar URLs, but youâd have to create them in each calendar, which you may not have access to.
This is why itâs good practice to create an ICS calendar file in addition to calendar links.
Never send a broken email again Prevent email errorsâlike broken “Add to Calendar” linksâwith automated QA testing. Send on-brand, error-free emails with confidence (and protect your brand reputation). |
Step 3: ââCode your âAdd to Calendarâ links for your email
Before we get to the really fun part (coding!), you need to decide how youâre going to present your “Add to Calendar” link.
Decide how to display your âAdd to Calendarâ button
As we mentioned earlier, traditionally, there are multiple âAdd to Calendarâ links along with the ICS file button. When using dynamic buttons as your Add to Calendar buttons, you have two different options:
- Show one: You can target each subscriberâs email client and dynamically display the specific link that matches their email client.
- Show all: You can use a hybrid model where the main call-to-action (CTA) button is personalized for each subscriberâs email client, and you still provide the alternative calendar links.
If you can personalize the âAdd to Calendarâ link for every subscriber, you might wonder why youâd want to consider showing the other calendar links at all.
Showing just one link doesnât take into account people like, well, me. Iâd often use my work email to sign up for emails so I could see what they looked like in Outlook. But Iâd 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.
The second option of showing multiple calendar links is a great way to solve this problem.
Itâs 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.
Create your CTA buttons and links
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.
First, get the ICS file you created in step 2 using the iCalendar Event Maker tool. Then, upload it to your companyâs servers, content management system (CMS), or email providerâs media library.
Now itâs button building time. There are lots of different ways to build a button; you can check out our Ultimate Guide to Bulletproof Buttons for a few of them. These days, weâre a fan of Mark Robbinsâ accessible button, so hereâs an example of that you can use:
<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);"><!--[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>
Then, create the URLs for the other email clientâs calendar links you plan on using and put them under the button you just created:
<p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
<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&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 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&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 target="_blank" rel="noopener" target="_blank" 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> | <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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&v=60" target="_blank" style="color: #fdfdfd; text-decoration: underline;">AOL</a> | <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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&v=60" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Yahoo</a></span></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âread on!
Target the right audience with the right calendar link
For each email client that you want to target, youâll 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.
Pro tip: 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.
So which email clients can you target?
- Gmail
- Office 365
- Outlook.com
- Yahoo/AOL
You can also target the desktop client for Outlook, but since that would use the default button anyway, you donât need to target it for once. (Wahoo!)
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ât want these buttons to show up on Outlook desktop clients, weâll wrap them all in a conditional statement. Then weâll 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:
<!--[if (gte mso 9)|(IE)]><!-->
<a target="_blank" rel="noopener" target="_blank" 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>
<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&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" 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 Outlook Calendar</span></a>
<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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&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);"><span style="mso-text-raise:15pt;">Add to your AOL Calendar</span></a>
<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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&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);"><span style="mso-text-raise:15pt;">Add to your Yahoo Calendar</span></a>
<!--<![endif]-->
Then weâll add a link to the list under the buttons for the ICS file so that we can have that show up in email clients:
<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</a>
Thatâs wonderful, but now youâve got a bunch of buttons showing up and links showing up. Letâs clean all that up by adding some targeting classes.
Start with the Default
Weâll add default classes on the ICS file button so we can hide/show it:
<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);"><!--[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>
Then we add a <span>
around the link for the ICS file and add a class so we can hide it when the default button is showing:
<span class=âdefault-hideâ><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</a></span>
Now that weâve got the classes weâll create the style block to do the hiding and showing:
<!--default styles-->
<style>
.default-hide { display: none !important; mso-hide: all; }
</style>
As we add the classes to the rest of the buttons, weâll come back to this style block and hide them as the default.
Gmail
Moving on to the Google button, we add a class to the button so we can show it:
<a target="_blank" rel="noopener" target="_blank" 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="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);"><span style="mso-text-raise:15pt;">Add to your Google Calendar</span></a>
And then we add a class on a span and wrap it around the Google link to hide it:
<span class="gmail-hide"><a target="_blank" rel="noopener" target="_blank" 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></span>
For the style block for Gmail weâll take advantage of the fact that Gmail automatically changes the doctype to <u></u>
. This is placed adjacent to a <div>
element that inherits class and ID from the <body>
tag. So use the following to target content in Gmail:
u + .body .foo {}
The style block to hide the default and show the Gmail button looks like so:
<!--gmail styles-->
<style>
u + .body .gmail-show { display: inline-block !important; }
u + .body .gmail-hide { display: none !important; }
u + .body .default { display: none !important; }
u + .body .default-hide { display: inline-block !important; }
</style>
And the default style block gets updated as well:
<!--default styles-->
<style>
.gmail-show { display: none !important; }
.default-hide { display: none !important; mso-hide: all; }
</style>
Outlook.com and Office 365
The button for the Outlook web apps has one button that works for both of them. So the button ends up like this:
<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&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" 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 Outlook Calendar</span></a>
For adding the calendar links, weâve included copy for both Outlook.com and Office 365 to remove any confusion for our subscribers, but since theyâre both the same link, we can wrap the span around both of them:
<span class="outlook-hide"><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&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 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&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></span>
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âs the URL to the calendar link.
Both Outlook.com and Office 365 webmail prefixes class names with x_ but doesnât do this on attribute selector. So your styles block can be targeted with:
[class="x_foo"] {}
âŚand itâll only apply to the Outlook webmail client. Therefore, the style block for the Outlook webmail client looks like this:
<!--owa styles-->
<style>
[class~="x_outlook-show"] { display: inline-block !important; }
[class~="x_outlook-hide"] { display: none !important; }
[class~="x_default"] { display: none !important; }
[class~="x_default-hide"] { display: inline-block !important; }
</style>
And the default block needs to be updated as well:
<!--default styles-->
<style>
.gmail-show { display: none !important; }
.outlook-show { display: none !important; }
.default-hide { display: none !important; mso-hide: all; }
</style>
Yahoo and AOL
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âll replace âyahooâ in the URL with âaolâ and voila AOL calendar link.
Since there isnât a way to target AOL or Yahoo separately, youâll need to include both versions of the buttons for those email clients, so they both get the same class:
<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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&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);"><span style="mso-text-raise:15pt;">Add to your AOL Calendar</span></a>
<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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&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);"><span style="mso-text-raise:15pt;">Add to your Yahoo Calendar</span></a>
And the both the AOL and the Yahoo links will be added in one span, much like the two Outlook links:
<span class="yahoo-hide"> | <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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&v=60" target="_blank" style="color: #fdfdfd; text-decoration: underline;">AOL</a> | <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&dur=&et=20220112T190000Z&in_loc=New%20Earth&st=20220112T170000Z&title=Welcome%20to%20the%20Motorway&v=60" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Yahoo</a></span>
To target Yahoo and AOL we take advantage of the fact that Yahoo and AOL will replace .& with their wrapping id. So your Yahoo and AOL styles can be targeted with:
.& .fubar { }
This makes the AOL/Yahoo style block look like this:
<!--yahoo styles-->
<style>
.& .yahoo-show { display: inline-block !important }
.& .yahoo-hide { display: none !important }
.& .default { display: none !important }
.& .default-hide { display: inline-block !important }
</style>
And then the default style block needs to be updated one last timeâŚ
<!--default styles-->
<style>
.gmail-show { display: none !important; }
.outlook-show { display: none !important; }
.yahoo-show { display: none !important; }
.default-hide { display: none !important; mso-hide: all; }
.default-line { display: none !important; mso-hide: all; }
</style>
See these âAdd to Calendarâ links in action
So while the above code is beautiful, youâre probably wondering what it looks like when implemented in an actual email. Lucky for you, we coded it up in Litmus Builder so you can see what the âAdd to Calendarâ button and links look like live and how they render across different email clients and devices.
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 âAdd to Calendarâ. If you do that, make sure the correct buttons are showing in the right email client by carefully QAâing your email in each email client.
Now go give your event guests this special email treatment!
Originally published on May 8, 2019, by Jaina Mistry. It has been updated on September 20, 2023, for clarity and with new information.
Carin Slater
Carin Slater is the Email and Content Growth Marketing Manager at Litmus