Calendar links in email
The problem with calendar links in emails
Traditional methods of adding calendar invites to emails often fall short. Whether it’s embedding dates in written, numeric, or spoken formats, many email clients struggle to consistently interpret and support these formats. Even link generators that create ICS files for download can fail to work properly in widely used clients like Apple Mail or Outlook for desktop.
The result? Empty calendar events that force users to manually input details or links that simply don’t work, leading to frustration and missed opportunities.
The Solution:
The only reliable way to ensure full support for calendar links in all email clients is to bypass the email client entirely. By generating an ICS file and triggering the browser to open it, users can seamlessly add events to their calendars without any manual input or compatibility issues.
At Better Email, we’ve developed and integrated this tool directly into our system. Here’s how it works:
Try It for Yourself?
The code
First we need to URL encode everything, so the browser does not crash.
{% assign calendarTitle = calendar.title | url_encode %}
{% assign calendarDescription = calendar.description | url_encode %}
{% assign calendarStartdate = calendar.start_date | url_encode %}
{% assign calendarStarttime = calendar.start_time | url_encode %}
{% assign calendarEnddate = calendar.end_date | url_encode %}
{% assign calendarEndtime = calendar.end_time | url_encode %}
{% assign calendarWarning = calendar.warning | url_encode %}
{% assign calendarUrl = calendar.url | url_encode %}
{% assign calendarLocation = calendar.location | url_encode %}
{% assign calendarLocationPlus = ' ' | append: calendarLocation %}
Then we need to assign the URL that creates the ICS file
{% assign calendarLink = 'https://ics.better.email/?title=' | append: calendarTitle | append: '&description=' | append: calendarDescription | append: '&location=' | append: calendarLocationPlus | append: '&startDate=' | append: calendarStartdate | append: '&startTime=' | append: calendarStarttime | append: '&endDate=' | append: calendarEnddate | append: '&endTime=' | append: calendarEndtime | append: '&alertBefore=' | append: calendarWarning | append: '&url=' | append: calendarUrl %}
Now create text strings settings for all the fields:
- description
- start_date
- start_time
- end_date
- end_time
- warning
- location
- url
If you want to wrap it in a nice round button like this, use this code:
<table cellspacing="0" cellpadding="0" border="0" style="width: 1000%;">
<tr>
<td align="center">
<!-- THIS CALCULATE THE WIDTH OF THE BUTTON FOR YOU -->
{% assign buttonWidth = button.button_text | size | times: 10 | plus: 80 | round %}
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ calendarLink }}" style="width:{{ buttonWidth }}px; height:60px; v-text-anchor:middle; border: 1px solid #000000; mso-padding-alt: 12px 55px 12px 55px;" arcsize="120%" stroke="f" fillcolor="#000000" strokecolor="#000000"><w:anchorlock/><center><![endif]-->
<a href="{{ calendarLink }}" style="background-color:#000000;border-radius:100px; color:#ffffff; display:inline-block;font-size: 18px; font-family: Open Sans, Helvetica, Arial sans-serif; font-weight:bold;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:45px; padding: 18px 30px; mso-padding-alt: 0 30px;">
<img src="https://assets.better.email/1/62b6ad9d-fd1e-4226-a6f2-850154812b16.png" width="20" height="22" style="display:inline-block; border:0; height: 22px; width:20px; vertical-align:top;">
<span style="display:inline-block;">
{{ button.button_text }}
</span>
</a>
<!--[if mso]></center></v:roundrect><![endif]-->
</div>
</td>
</tr>
</table>
Ready to start making Better emails? Book a demo here.
