Events being hosted by your organization have become more and more common in recent years. This opens the door for all kinds of innovation that can be utilized to make getting to your event much easier for prospects. A great example of this is something you’ve probably seen in emails you’ve received, the “Add to Calendar” button. The problem you can run into when creating this CTA is that they can be complicated to create and often require a third party app. However this doesn’t have to be the case.
Need Assistance with setting up an "Add To Calendar Link"?
Fill out the form below, and a Pardot expert will walk you through it, free.
How To Create the Link:
In order to create the link you will need an .ics file, this file is the link that will be used for the other calendar applications besides Google Calendar. A good resource to create this is this tool, which will allow you to also add any additional information your prospects need to know like location or event description. For Google Calendar you will need to create another link which can be done but utilizing this tool.
Creating The Link Code:
The next step is creating the link code for your CTA. In order to have one CTA that is linking to two different places depending on what type of email is opening it up, you will actually be creating two CTAs, but the one for gmail will be hidden unless opened by a gmail user. The two different codes for this are listed below. Pro-tip: If you don't want to have a single button you can also use this code and just create two buttons. One for Gmail and the other for other emails.
The other thing you will need to make sure to do is add CSS to make sure the button for the Gmail link remains hidden on the other emails besides Gmail. Utilizing the underline selector and the general sibling selector, and the class of “foo”, you can target for Gmail. Gmail will change the DOCTYPE of emails to a “u”. Using this trick any class in the CSS statement will only happen in Gmail.
Using this principle and the following CSS you can make sure to hide the gmail email in other emails. You can also download a document with all the code here. Or through the button below.