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 reminders.
To ensure that guests actually show up, it can be useful to include an “add to your calendar” link to the emails promoting your event. With that, subscribers can add the events to their own calendars, making it easier to avoid calendar conflicts and allowing them to set up their own reminders.
However, these links can be hard to implement or require a third-party solution to ensure the correct calendar links are generated for the subscriber. In this blog post, you’ll learn about the “add to calendar” button technique we use for our Litmus Live emails as we share the code and walk you through the steps you need to create one of these buttons for your emails.
Watch the Video
Learn better by watching? See Kevin Mandeville demonstrate this technique at Litmus Live 2017 in this video:
Choosing which Calendars to Target
There are countless different calendar applications available, from ones that are available by default through your computer’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 available. To help us understand what calendar tools to focus on, we took a look at our Email Analytics data. The most popular email clients our subscribers use are Apple Mail, Gmail, and Outlook 2016. Using this data, we focussed our efforts on creating a “add to calendar” button that would be compatible with iCalendar, Google’s calendar, and Outlook’s calendar.
All calendars are capable of using a .ics file to add new events to it. In Google calendar, however, you can also add events using a link which has the event details as part of the link. That’s easier for the user, as there’s no need to download and then upload a .ics file.
Creating the Calendar Links
We still needed .ics files to power the links for the other calendar applications, and we used this tool to generate the files. It allows you to add any information your subscribers may need to know about the event, including location, description, or a URL. Once added to the calendar, these details make it clear what the event is for and can act as a reminder to the user as to why the event is in their calendar.
To create the links for Google’s calendar, we used this tool. It will generate the entire URL you’ll need to include in your email for Gmail users.
The Code
Here’s what the buttons look like in the email:
The “Save the Date” buttons in our Litmus Live emails are actually two buttons stacked on top of each other:
<a href="http://pages.litmus.com/l/31032/2018-02-12/f4skyc/31032/141638/LitmusLiveLondon2018.ics" class="cta gmail-hide">Save the date</a><a href="http://www.google.com/calendar/event?action=TEMPLATE&dates=20180821%2F20180822&text=Litmus%20Live%20London&location=etc.venues%20155%20Bishopsgate&details=Litmus%20Live%20helps%20you%20become%20a%20better%20email%20marketer%20with%20real-world%20advice%2C%20best%20practices%20%26%20practical%20takeaways." style="display: none;" class="cta gmail-show">Save the date</a>The top button links to the .ics file for the desktop clients which is the default version that’s displayed.
Below that is the link for Google calendar. This button is hidden by default using the style attribute “display:none;” with a couple of extra classes to show the button for Gmail only, using the following CSS:
u ~ div .foo { /*Insert CSS here */ } Using the underline selector, with the general sibling selector, and div HTML tag, with a class of “foo”, you can target classes for Gmail rendering specifically. Gmail converts the DOCTYPE of all emails to a “u” (The underline selector) and the <body> to a <div>. With this hack, any class used in the above CSS statement will only be targeted in Gmail.
For the “add to calendar” buttons, we used this principle to target the buttons for Gmail:
u ~ div .gmail-hide { display:none; } u ~ div .gmail-show { display:block!important; }The gmail-hide class is used to hide the button linking to the .ics file in Gmail, and the gmail-show class activates the button for Gmail.
The Results
These “Save the Date” buttons generated 55% of the unique clicks in the email. While we can’t know for certain how many subscribers actually added the events to their calendars, measuring the intent indicates that the subscribers perceive the links as helpful. It’s definitely something you can add to your list of things to A/B test in your next events email!
Expanding the Technique
For our purposes, we created two links to only serve a .ics file or a Google calendar link. If you’d like to customize the experience for even more email clients and calendars, you can also target Yahoo! Mail and Outlook Web Apps (Office 365 and Outlook.com) by using the same technique, relying on how these email clients read CSS.
Targeting Yahoo! Mail
Using the following CSS, you can target Yahoo! Mail:
@media yahoo { .yahoo-hide { display:none; } .yahoo-show { display:block!important; } }Targeting Outlook Web Apps
Using the following CSS, you can target Outlook Web Apps:
[owa] .owa-hide { display:none; } [owa] .owa-show { display:block!important; }Putting it All Together
As Gmail blocks any CSS that it sees as invalid, two separate <style> blocks are required: One for the Gmail specific CSS, and one for the rest:
u ~ div .gmail-hide { display:none; } u ~ div .gmail-show { display:block!important; }@media yahoo { .yahoo-hide { display:none; } .yahoo-show { display:block!important; } } [owa] .owa-hide { display:none; } [owa] .owa-show { display:block!important; }The HTML for your “add to calendar” buttons would look like this:
/* Default .ics button */ <a href="event.ics" class="gmail-hide yahoo-hide owa-hide">Save the date</a> /* Gmail button */ <a href="#" style="display: none;" class="gmail-show">Save the date</a> /* Yahoo! Mail button */ <a href="#" style="display: none;" class="yahoo-show">Save the date</a> /* OWA button */ <a href="#" style="display: none;" class="owa-show">Save the date</a>Want more resources like this?
Subscribe to Litmus Weekly to get your weekly dose of email inspiration, tips, and tricks, right in your inbox.
The post How to Create an “Add to Calendar” Link for Your Emails appeared first on Litmus Software, Inc..
