Add to calendar button in the welcome email after registration - html

Question

I implemented Add to Calendar dropdown button in a web page
<div class="dropdown" style="display: inline;">
<button target="_blank" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border: 1px;border-radius: 2px;padding: 5px 10px;max-height: 30px; background-color: #004FBF;"><i class="material-icons" style="color: #FFFFFF">event</i> <span style="font-size: 12px;font-family: RobotoMedium;color:#FFFFFF;line-height:14px;letter-spacing:0px;border:1px;position: relative;top: -8px;">Add to Calendar</span></button>
<ul class="dropdown-menu" style="margin-top: 12px;">
<li style="padding: 5px;"><a target="_blank" href="http://www.google.com/calendar/event?action=TEMPLATE&text={{encode title}}&dates={{calendarFormat sessionStartTime}}/{{calendarFormat sessionEndTime}}&details={{calendarDetail _id}}&location={{location _id}}&trp=false&output=xml" ><i class="fa fa-google" style="color: #000000;padding: 5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Google</span></a></li>
<li class="addToIcalendar" style="padding: 5px;" ><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" download><i class="fa fa-apple" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Apple</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" ><img src="/images/outlook.png" height="19" width="19"><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;padding: 5px;">Outlook</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}"><i class="fa fa-yahoo" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;">Yahoo</span></a></li>
</ul>
</div>
In a similar way, I want to create in Welcome email but it is not working as expected.
The output of the Add to Calendar in the email is
The dropdown items are by default displayed not after clicking the button. The icons are not displayed as expected
The same code in the email body is not working. Please help and thank you!

Answer 1

Dropdowns and really anything with a click event are very tricky to code in an email because you can't use JS, plus it may not work in all clients. My suggestion is to use something like AddEvent in particular their Direct URL method as the regular button will only work on a webpage not an email. Using the direct url method you can make a CTA in your email that will link out to a webpage created by AddEvent with info on the event and add to calendar links.

Answer 2

Dropdowns won't work in most emails, but there are several things you can do to explore.
First, you should attach the .ics file. Gmail for example pulls that out and makes it super easy to add to a person's calendar.
Second, you have a default button that goes to the .ics download. This will be so that people don't miss the attached .ics file, and make it clear what it is for.
Third, you may want to include direct calendar links for Gmail and Yahoo. These are specific URLs that will take a user to the webmail versions of their email. This may not be suitable from mobiles - you'll need to test the experience. But seeing as Gmail makes it really easy and visible when you attach the ics file, there's no real reason to muck around with that.
Litmus have a write up on the specific code for that (it's complicated), and some URL generation tools. https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails, Gmail: http://kalinka.tardate.com/, ICS generation: https://apps.marudot.com/ical/.