When creating events, either in-person or virtual; it can be valuable to create dynamic ‘Add to calendar’ links that set up calendar invitations in Google Calendar for supporters who are RSVPing.
This document explains how to make some changes to your NationBuilder theme files that make it easy to add these dynamic links. By utilizing native NationBuilder Liquid features, it is possible to make these dynamic so they pull in information directly from the event fields including event name, date & time/timezone, event location, and URL.
Example of an ‘Add to Google Calendar’ link generated via a dynamic link.
Create your ‘Add to calendar’ links
Download and open this zipped folder to display the two files you’ll need to add to your theme.
If you’re using a stock theme, you must first convert to a custom theme.
Click on the ‘Files’ tab and drag the new files to add them.
⚠️ Please note: if using Dropbox sync, the “_mailing_event.html’ file will be overwriting the existing file with that name.)
4. Ensure files are published by clicking (see picture below)
This has now created two new dynamic ‘Liquid drops’ as follows:
{{ addToGoogleCalendarUrl }}: A dynamic URL for adding to Google Calendar that can be displayed or used as a hyperlink (i.e. https://calendar.google.com/calendar/u/0/r/eventedit?text=Maddys+Event&dates=20300622T180000/20300622T210000&details=https://dogchestersouthonmomentum-oliverjwells.nationbuilder.com/event%0A&location=Maddys+House,+London+SE14+6LA,+United+Kingdom&ctz=America/Bogota&sf=true&output=xml)
{{ addToGoogleCalendarButton }}: ‘Add to Google Calendar’ hyperlinked with the text above. When added to a website template this will appear in the primary button format.
Add your ‘Add to Calendar’ hyperlinks to email autoresponse and Event pages
Now that you’ve created these links you can take the following steps to add them to your nation's email autoresponses or directly on the event page:
Add to email autoresponse
As a default
If you want to add these URLs to all event autoresponses, you can update the default file by navigating to Theme > Current Custom Theme > Email Autoresponses and clicking into the ‘autoresponse_event_rsvp_thank_you.html’ file. When in here you can either add the liquid drops above to the most relevant place or replace all the code with the following code:
{{ recipient.first_name_or_friend }} –
<br /><br />
Thank you for your RSVP{% if event_rsvp.guests_count > 0 %} +{{ event_rsvp.guests_count }}{% endif %}.
<br/><br/>
{% include "mailing_event" %}
<br/><br/>
If you need to update or cancel your RSVP, use this link:
<br/><br/>
<a href="{{ edit_url }}">{{ edit_url }}</a>
<br/><br/>
{{ addToGoogleCalendarButton }}
<br/><br/>
And you can invite others to join you at the event with this link:
<br/><br/>
<a href="{{ page_url }}">{{ page_url }}</a>
<br/><br/>
{{ broadcaster.name }}<br/>
<a href="{{ site.full_url }}">{{ site.full_url }}</a><br/>
This will overwrite any future email autoresponses to include the relevant links.
As a one off / in pre-edited autoresponses
If you have autoresponses that you’ve already edited or just want to make changes to one-off emails, then you can copy/paste the above Liquid drops into your email autoresponse editor for each email.
⚠️ Please note: you will need to include the Liquid code “{% include "mailing_event" %}” in the autoresponse content editor before the 'Add to calendar' Liquid drops for the new dynamic links to work. See the example below.
An example of where to put ‘Add to calendar’ Liquid drops in email autoresponse.
Add to Event Page
If you want to add the buttons to your event page itself, then you can click into the page template and add the liquid drops to the relevant section.You will need to include the code {% include "add_to_calendar" %} at some point before you include the liquid drops. If you would like to include it after the page event content, navigate to {{ page.event.content}} in the code and add the liquid drop after the if statement (see example below).
Example of where to put ‘Add to calendar’ Liquid drops in the page template.
Notes on using 'Add to Google Calendar' buttons
If you would like to include these across all event pages, you can add them to the global event page templates, by navigating to the relevant theme file via theme > files > pages_show_event_wide.html and making the update there.
If using the {{ Button }} drops, the formatting will only be supported in V2 themes (Action, Momentum, and Raise). We recommend testing out each time or checking out the style guide for each theme.
⚠️ Note on Daylight Savings Time: Note that the "Add To Calendar" feature is designed to dynamically adjust based on daylight savings time. So, if you select your timezone as ‘Eastern’, the timezone picked will be correct based on the location rather than its relativity to GMT.