Learn more about how to include calendar invite links in your emails in Taxi.
There are a few different ways of managing calendar links in Taxi depending on exactly what modules you have and how you want them to behave in the inbox. This page outlines these different options and how you can go about adding this to your Email Design System.
You can host a calendar invite, for example as an .ics file, and input the url into a link field just as you would with any other url. This would mean anyone receiving the email would download the calendar invite when clicking on the link.
You can target specific email clients, such as gmail and outlook, so that there is a link to an invite in a google/outlook calendar, as opposed to a file that you would have to download.
Let's start with gmail. You can include classes in the head of your HTML to control which link will appear in gmail vs other email clients:
<style>
u + .body .gmail { display: block !important; }
u + .body .default { display: none !important; }
</style>
The .gmail class will make the CTA it is used on appear in the email in gmail. The default class will hide whatever HTML it is used on in gmail.
This link uses the gmail class so it shows in all gmail but not in all other email clients.
<a href="google calendar link." style="display: none;" class="gmail"> Save the date </a>
You can do something similar to target Outlook.com and Office 365.
Include this as a style block in the head of your Email Design System:
<!--owa styles-->
<style>
[class~="x_outlook"] { display: block !important; }
[class~="x_default"] { display: none !important; }
</style>
Then you will have a link in the HTML using the outlook class.
<a href="outlook calendar link." style="display: none;" class="outlook"> Save the date </a>
Same as with the gmail classes, the outlook class will show whatever HTML it is used on in Outlook.com and Office 365. The default class will hide whatever HTML it is used on in Outlook.com and Office 365.
Depending on how you code your CTA buttons you could have the class on a <td> or <table> tag, not necessarily an <a> tag.
You will also have a link that will show on all email clients other than gmail and outlook.
<a href="hosted ics link" class="default"> Save the date </a>
The default class is used so it is hidden in gmail and outlook but will appear everywhere else.
Now that we know the HTML and CSS needed to include these different calendar links, we can get this working in Taxi so you can include when building your emails.
If you have a specific module for events and you know that there will always be multiple calendar links for the CTA in this module, you can include all of the <a> tags in this module.
You will need to have a field for each one (general, gmail and outlook) so you can input the individual calendar links.
<field type="href" name="ical"></field> <field type="href" name="gmail"></field> <field type="href" name="outlook"></field>
And then reference the relevant field in each of the <a> tags.
<a replace-href="{{ical}}" class="default"></a>
<a replace-href="{{gmail}}" class="gmail" style="display:none;"></a>
<a replace-href="{{outlook}}" class="outlook" style="display:none;"></a>
You could also include a no-blank expectation on each field so it's not possible for anyone to forget to add one of the links.
You might have a module that is often not used for an event, but then in certain emails you want the option to use it in this way and include multiple calendar links. If you're happy for everyone to receive a hosted ics file as the link then, as mentioned above, you can simply input this url in the link field in Taxi.
If you would like to choose between having either one url or multiple when it is a calendar invite link then there is some additional Taxi Syntax you can use to achieve this.
First, include the three fields as above, but nest the gmail and outlook link fields inside a checkbox field. This will enable you to include or exclude these links depending on how you want to use this module.
<field type="href" name="ics_link"></field> <field type="checkbox" name="calendar_invite" label="Turn this on if the link is a calendar invite"> <field type="href" name="gmail"></field> <field type="href" name="outlook"></field> </field>
The gmail and outlook link fields are inside a checkbox so if the checkbox is turned off, they will be hidden in the editor.
Then you can use rules on the gmail <a> tag to include it or remove it depending on whether or not the checkbox is turned off.
<a rule="{% remove_unless calendar_invite %}" replace-href="{{gmail}}" style="display: none;" class="gmail">
Save the date
</a>
<a rule="{% remove_unless calendar_invite %}" replace-href="{{outlook}}" style="display: none;" class="outlook">
Save the date
</a>
If the checkbox is turned on, then these <a> tags will be included and you'll be able to input a specific gmail/outlook calendar invite link. If it is turned off the <a> tags won't be included in the HTML that you export and there will just be one url.
<head>
<!--gmail styles
<style>
u + .body .gmail { display: block !important; }
u + .body .default { display: none !important; }
</style>
<!--owa styles
<style>
[class~="x_outlook"] { display: block !important; }
[class~="x_default"] { display: none !important; }
</style>
</head>
<body>
<module name="CTA">
<field type="href" name="ics_link"></field>
<field type="checkbox" name="calendar_invite" label="Turn this on if the link is a calendar invite">
<field type="href" name="gmail"></field>
<field type="href" name="outlook"></field>
</field>
<a replace-href="{{ics_link}}" class="default"></a>
<a rule="{% remove_unless calendar_invite %}" replace-href="{{gmail}}" style="display: none;" class="gmail">Save the date</a>
<a rule="{% remove_unless calendar_invite %}" replace-href="{{outlook}}" style="display: none;" class="outlook">Save the date</a>
</module>
</body>