Generate Add to Calendar links for emails, and ICS files from URL parameters or a form with dynamic content

We were working with an email marketing client who was sending an event signup email to prospects and that needed to include dynamic links and content by passing the URL and the prospects’ emails. We tested multiple third-party add calendar event tools but they don’t provide support for dynamic content passing in the email link and creating the Add to Calendar links.

The calendar code will be something like the below:

<div style="margin: 0px 0px 10px0px; text-align: center; font-size: 0px">
    <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates=20221005T130000/20221005T134500&ctz=America/New_York&text=this%20is%20summary&location=Online&details=This%20is%20description" title="Google" target="_blank" style="display: inline">
        <img src="https://img.icons8.com/color/344/google-logo.png" alt="Google" style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
    <a href="https://calendar.yahoo.com/?v=60&view=d&type=20&TITLE=this%20is%20summary&ST=20221005T100000&ET=20221005T104500&DESC=This%20is%20description&in_loc=Online" title="Yahoo" target="_blank" style="display: inline">
        <img src="https://cdn-icons-png.flaticon.com/512/3128/3128296.png" alt="Yahoo" style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
    <a href="https://webocreation.com/ics-file-creation-as-per-url-parameter?date_start=2017-1-16%209:00AM&date_end=2017-1-16%2010:00AM&location=%27Online%27&description=%27This%20is%20description%27&summary=%27this%20is%20summary%27&url=%27https://webocreation.com%27" title="Apple" target="_blank" style="display: inline">
        <img src="https://img.icons8.com/ios-filled/344/mac-os.png" alt="Apple"  style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
    <a href="https://webocreation.com/ics-file-creation-as-per-url-parameter?date_start=2017-1-16%209:00AM&date_end=2017-1-16%2010:00AM&location=%27Online%27&description=%27This%20is%20description%27&summary=%27this%20is%20summary%27&url=%27https://webocreation.com%27" title="Outlook" target="_blank" style="display: inline">
        <img src="https://img.icons8.com/fluency/344/microsoft-outlook-2019.png" alt="Outlook" style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
</div>

The output in the email will be like the below:

Add to email icons for add to calendar

Create an ICS file with dynamic content from the form – outlook, apple email

ICS file is used for email service providers like Outlook, Apple, and others. You can create and download the ICS file from the URL parameter or create an ICS file from a form. To create an ICS file from a form click the link below and enter the details:

Create an ICS file from URL parameters

Following are the URL parameters that you can use and create the ICS file which downloads automatically.

The main URL is:

ICS file creation as per URL parameter

date_start=2017-1-16 9:00AM
date_end=2017-1-16 10:00AM
location=’Online’
description=’This is the description’
summary=’this is summary’
url=”‘https://webocreation.com’

You can download the ICS file directly from the URL and the ICS file is downloaded. One example link is like below:

https://webocreation.com/ics-file-creation-as-per-url-parameter?date_start=2017-1-16 9:00AM&date_end=2017-1-16 10:00AM&location=’Online’&description=’This is description’&summary=’this is summary’&url=’https://webocreation.com’

Gmail/Google Calendar – Add to the Calendar link

For google calendar, you can create a link like below:

http://www.google.com/calendar/event?action=TEMPLATE&dates=20221005T130000/20221005T134500&ctz=America/New_York&text=this%20is%20summary&location=Online&details=This%20is%20description

http://www.google.com/calendar/event?action=TEMPLATE& 
dates=20221005T130000/20221005T134500& 
ctz=America/New_York& 
text=TITLE-OF-EVENT& 
location=Online& 
details=DESCRIPTION-OF-EVENT

Yahoo email Calendar – Add to the Calendar link

For the Yahoo calendar, you can create a link like below:

https://calendar.yahoo.com/?v=60&view=d&type=20&TITLE=this%20is%20summary&ST=20221005T100000&ET=20221005T104500&DESC=This%20is%20description&in_loc=Online

https://calendar.yahoo.com/?v=60& 
view=d& 
type=20& 
TITLE=this%20is%20summary& 
ST=20221005T100000& 
ET=20221005T104500& 
DESC=This%20is%20description& 
in_loc=Online

As you have a direct URL to create an ICS file, directly send values to google and yahoo, so you can pass any dynamic content on those URLs and set up your event content as per your need.

How to pass the dynamic URL from Marketo of event24 to the Add to Calendar buttons?

You can pass the event24 link in the email with the values of the lead email like below:

<div style="margin: 0px 0px 10px0px; text-align: center; font-size: 0px">
    <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates=20221005T130000/20221005T134500&ctz=America/New_York&text=this%20is%20summary&location=Online&details=This%20is%20description<br><br>https%3A%2F%2Fevent.on24.com%2Fwcc%2Fr%2F395%6CF66C316A16920533CB26475D6%3Fmode%3Dlogin%26email%3D{{lead.Email Address:default=edit me}}"
        title="Google" target="_blank" style="display: inline">
        <img src="https://img.icons8.com/color/344/google-logo.png" alt="Google"
            style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
    <a href="https://calendar.yahoo.com/?v=60&view=d&type=20&TITLE=this%20is%20summary&ST=20221005T100000&ET=20221005T104500&DESC=his%20is%20description<br><br>https%3A%2F%2Fevent.on24.com%2Fwcc%2Fr%2F395%6CF66C316A16920533CB26475D6%3Fmode%3Dlogin%26email%3D{{lead.Email Address:default=edit me}}&in_loc=Online"
        title="Yahoo" target="_blank" style="display: inline">
        <img src="https://cdn-icons-png.flaticon.com/512/3128/3128296.png" alt="Yahoo"
            style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
    <a href="https://webocreation.com/ics-file-creation-as-per-url-parameter?date_start=2017-1-16%209:00AM&date_end=2017-1-16%2010:00AM&location=%27Online%27&description=%27his%20is%20description<br><br>https%3A%2F%2Fevent.on24.com%2Fwcc%2Fr%2F395%6CF66C316A16920533CB26475D6%3Fmode%3Dlogin%26email%3D{{lead.Email Address:default=edit me}}%27&summary=%27this%20is%20summary%27&url=%27https://webocreation.com%27"
        title="Apple" target="_blank" style="display: inline">
        <img src="https://img.icons8.com/ios-filled/344/mac-os.png" alt="Apple"
            style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
    <a href="https://webocreation.com/ics-file-creation-as-per-url-parameter?date_start=2017-1-16%209:00AM&date_end=2017-1-16%2010:00AM&location=%27Online%27&description=%27his%20is%20description<br><br>https%3A%2F%2Fevent.on24.com%2Fwcc%2Fr%2F395%6CF66C316A16920533CB26475D6%3Fmode%3Dlogin%26email%3D{{lead.Email Address:default=edit me}}%27&summary=%27this%20is%20summary%27&url=%27https://webocreation.com%27"
        title="Outlook" target="_blank" style="display: inline">
        <img src="https://img.icons8.com/fluency/344/microsoft-outlook-2019.png" alt="Outlook"
            style="width: 45px; display: inline; padding: 40px" width="45" border="0" />
    </a>
</div>

In this way, you can add “Add to Calendar” links to Gmail, Yahoo, Apple, and Outlook and pass the dynamic content to the calendar links. Please email us at webocretion.com@gmail.com if needed any support or help. You can look for more tips and tricks at Salesforce, Marketo, and Pardot. Let us know if you have questions or concerns so that we can help you out. Till then please subscribe to our YouTube Channel and like us on Twitter and Facebook.

Previous articleChrome browser extensions that we use as a developer for efficiency
Next articleHow will Web3 and NFTs impact eCommerce?

LEAVE A REPLY

Please enter your comment!
Please enter your name here