“Add to calendar” button for Pardot emails and landing pages

If you use Pardot to manage your event campaigns, you might probably send email reminders to your prospects in order for them not to forget your event.

What about having a “Add to calendar” button directly within your Pardot emails and landing pages so your event is saved directly in your prospect agenda?

In this article, we’ll explain you different ways to implement a “Add to calendar” button (based on a .ics file) to your Pardot emails and landing pages.

“Add to calendar” button is linked to a document

This method requires you to do 3 manual steps.

Create the .ics file

To create a new .ics file, you can either create it from a text file and change the file extension of the file to “.ics” instead of “.txt”, or you can use our ICS file creator tool.

Here is what your file content should look like:

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
CALSCALE:GREGORIAN
BEGIN:VEVENT
LOCATION:Teams Meeting
DESCRIPTION:Test description
DTSTART:20230303T013200Z
DTEND:20230303T033200Z
SUMMARY:Test summary
URL;VALUE=URI:https://test.com
DTSTAMP:20230224T085959Z
UID:63f86e7fea1cb
END:VEVENT
END:VCALENDAR

Upload the .ics file to Pardot

Once you have created your file, you can upload it in Pardot from the page “Content > Files”.

Copy the url of your document as you will need it for the next step.

Add a link to the .ics file in your asset

In your Pardot email or landing page, add a link to your CTA / text “Add to calendar” sending to your .ics file hosted on Pardot.

“Add to calendar” button is linked to our app

This method is more straight forward (1 step) but will require you to use links (with specific parameters) sending to our application.

You can use this method either on Pardot emails, forms or landing pages.

Our application dynamicaly generate a file download for your prospects based on 6 parameters.

date_start: the start date / time of your event. Format should be: 03/26/2023 12:00 AM

date_end: the end date / time of your event. Format should be: 03/26/2023 01:00 PM

location: the location of the meeting. No specific format.

description: the description of the meeting. No specific format.

summary: the summary of the meeting. No specific format.

url: the url of the meeting. No specific format.

Ex: https://welovepardot.com/apps/ics-creator/includes/download-ics.php?date_start=03/26/2023 12:00 AM&date_end=03/26/2023 01:00 PM&location=test location&description=test description&summary=test summary&url=https://welovepardot.com/

Using javascript to prepopulate the url

This method only works on Pardot landing pages, but not on emails.

Before copying the below code to your Pardot form / landing page / layout template, don’t forget to change the values for your event.

<a class="addToCalendar">Add to calendar</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
	// define the url parameters values
	var date_start = "03/26/2023 12:00 AM";
	var date_end = "03/26/2023 01:00 PM";
	var location = "test location";
	var description = "test description";
	var summary = "test summary";
	var url = "https://welovepardot.com/";
	
	var app_url = "https://welovepardot.com/apps/ics-creator/includes/download-ics.php?date_start="+date_start+"&date_end="+date_end+"&location="+location+"&description="+description+"&summary="+summary+"&url="+url;
	
	$(".addToCalendar").attr("href",app_url);
});
</script>

As you can see, our application makes it easy for you to include “Add to calendar” dynamic buttons to your Pardot assets (forms / emails / landing pages).

Hope you enjoy it 😉