Braze Tutorial: How To Create “Add To Calendar” Links
If you’re promoting an event, whether it’s in-person or virtual, it’s always helpful to throw in a nifty “Add To Calendar” link in your emails!
Well, good thing Braze has a documentation page titled “Add-to-calendar links”! But depending on your use case, you may need some Liquid support.
Watch the video to learn how to convert spaces into “%20” dynamically!
🗣️ WATCH FULL YOUTUBE VIDEO HERE 🗣
What’s up everyone, my name is Allan, Founder and Consultant at For Now Marketing, and welcome back to our channel!
Before we get started, if you have any questions, whether you are currently using Braze or considering using Braze, please feel free to reach out! You can find these addresses and more in the Youtube description below.
Today, we are going to talk through How To Create “Add To Calendar” Links in Braze.
Let’s get started!
Braze Docs: Add-To-Calendar Links
First, let’s look through the Braze documentation and read through the page briefly so that we’re all on the same page.
So Braze provides a link for Google Calendar specifically, and another one from iCal and Outlook, so we’ll probably have to make two separate links.
The two links are very similar except Google Calendar just has a simple parameter at the end.
And I was curious what ics.agical.io was, so I did a quick research, and it looks like it’s a script written by a generous Marketo developer who goes by the name Sanford Whiteman. If you’d like to read more, check out this blog post in the description!
Anyway, back to the Braze docs, it looks like we have 5 key parameters to include, which are: EVENT_SUBJECT, EVENT_LOCATION, START_TIME, END_TIME, and EVENT_DESCRIPTION.
And lastly, Braze says: “Replace any spaces with the HTML escape code %20. For example, a subject of Meet Braze would be “Meet%20Braze.”
Just to test this out, I actually tried creating the links without replacing the spaces with the HTML escape code, and it still worked perfectly fine. But to get some extra Liquid practice and to follow the rules and be safe, we will do this anyway!
Scenario/Use Case
So here’s our scenario/use case we’re working with today. We’re launching a Trip Reservation Confirmation Email Campaign, and we want to include this Add To Calendar link inside this email. Everyone’s trip timeline is different, so this Add to Calendar link will need to include Custom Event Properties or API-Trigger Properties to add the dynamic parameters to the Add To Calendar link.
HTML Editor
Let’s first start on the classic HTML Editor. Here, I have 2 buttons, one for “Add to Google Calendar” and another one for “Add to iCal/Outlook”.
I like to do my Liquid work at the very top so it’s easy to find, so let’s scroll up to the top and add some Liquid here.
First, let’s assume that in our Custom Event Properties or API-Trigger Properties, all 5 of the parameters exist with the exact same name: EVENT_SUBJECT, EVENT_LOCATION, START_TIME, END_TIME, and EVENT_DESCRIPTION.
If this Campaign is Action-Based, then you use , and if this Campaign is API-Triggered, then you use . Let’s use Event Properties for the HTML example.
For now, I’m simply going to write out the 5 Liquid variable names that we’ll need inside our Add to Calendar link.
Remember from the Braze docs, it said we have to replace all spaces with the HTML escape code? Let’s do that first.
| url_encode
So there’s 2 Liquid filters we can use to get this done: the first one is called url_encode which is a little simpler, and the second one is called replace.
url_encode simply converts any URL-unsafe characters into percent-encoded characters. The only thing to note is that this filter “will turn a space into a + sign instead of a percent-encoded character”, which isn’t quite what the Braze docs said, but once again, I tested it, and it worked fine.
We’ll go through both examples. First, I’m going to apply the url_encode filter on the property EVENT_SUBJECT. Make sure to add the pipe line character after the first, right curly bracket, so we can get the syntax correct, and add the word url_encode. Let’s do the same thing for EVENT_LOCATION.
Since there aren’t any spaces for the times, we will skip the time variables, and I’ve also confirmed that the links work without encoding the time variables, but if anyone has any concerns or insights, please share them in the comments!
| replace
For the very last variable, let’s use the replace Liquid filter. And this way, we can actually, accurately follow Braze’s direction of using the %20 for the blank space.
So once again, add the pipeline character after the first right curly bracket, and this time, we will add the word replace, followed by a colon. This replace filter needs two parameters: the first one is the thing to replace, and the second one is the thing to replace it with.
The first parameter will be a blank space, so we type in quote space quote, and the second paramter is %20, so we type in quote, percent, 20, quote.
What we’re doing here is taking the value of the Event Property Event Description, looking for all instances of the blank space which is our first parameter, and REPLACING that with %20 which is our second parameter.
Build Links
All right, now that we’re done setting up our variables, let’s build our links and store them in a variable!
First, let’s take the Google Calendar link, and replace all the hard-coded parameters with our Liquid variable. That way, we can actually build events with dynamic event subjects, because currently, every single event will be titled EVENT unders score SUBJECT.
So I’m going to take each variable and simply replace the capitalized parameters. Be sure not to replace anything else besides the capitalized letters. Let’s do this for all 5.
And finally, this will be the link that we will be using inside our Add to Calendar links.
The full link looks like this:
https://ics.agical.io/?subject={{event_properties.${EVENT_SUBJECT} | url_encode }}&location={{event_properties.${EVENT_LOCATION} | url_encode }}&dtstart=&dtend=&description={{event_properties.${EVENT_DESCRIPTION} | replace: " ","%20" }}&format=gcal Insert Variables Inside Buttons
This is our last step of the HTML builder setup. Now that we have the links finalized, let’s scroll down to where the buttons are, and replace the placeholder hashtag with the full link we created.
Find the anchor tag href placeholder hashtag and replace it with the full link we created, but one thing to note is that because we use double quotes in our actual link, we’ll have to surround our link with single quotes. That way, we can avoid the issue of quotes colliding with each other.
Same thing for the iCal/Outlook link, and be sure to remember to erase the &format=gcal parameter.
Preview/Test
Testing out our links, go to the Preview page, go to Custom User, type in our event information, and click on the buttons, and yay, the Google Calendar link worked successfully!
If I click the iCal/Outlook link, it leads me to download an ics file, and if I click on it, the exact same event details get applied in my Apple Calendar event.
D&D Editor
Lastly, let’s try doing the exact same setup on the D&D Editor. Our code is going to look exactly the same, so I’m simply going to copy our entire script and then change over to a D&D template.
Let’s quickly make our CTAs, so I’m gonna duplicate this button and rename both of them.
And just like before, let’s paste in our Add to Calendar link in the URL of each Button Action.
Go to the preview page, open the links in a new tab, and voila, our Add to Calendar links work perfectly!
Thank You!
That’s it for today!
As always, if you have any questions, please share them in the comments. We’re happy to help! 🙏
If you learned something from this video, please subscribe for more awesome Braze videos in the future!
Thank you for watching, and see you next time!
allan@fornowmarketing.com
fornowmarketing.com
