RGV
  • About
  • Blog
  • Projects
  • Connect
  • About
  • Blog
  • Projects
  • Connect

How to Customize your Zoom Email Notifications using FreeMarker

10/22/2020

Comments

 
Picture
I landed on this problem when I received a work email with the subject line "Time Sensitive" and that we needed to have "branded" Zoom email notifications next week for a client delivery. In my head this means adding a header banner, footer, and adding active social icons. First thing I did was look at the existing templates that Zoom has and looked at a string that does not look familiar to me, Freemarker! 
I am a bit familiar writing in HTML, CSS and a little bit of javascript so you can say I am not a programmer. FreeMarker is something I am not familiar with. Doing a quick google search did not give me any result on a template or a written code, and I ended up with a forum post from another individual who had the same problem.

After, maybe an hour, of trying to understand how to use FreeMarker with HTML, and bit of guidance from my web dev SO, it finally clicked. Working with the FreeMarker directives means making sure I do not accidentally lose/delete the directives provided by Zoom, because I have no clue which directives are allowed by Zoom. I also assumed that the provided directives are necessary to generate Zoom call information so I definitely do not want to mess with those.

​How did I know that what I have written worked? Don't trust the "Preview" option on Zoom, instead send yourself a sample email and view it both on desktop and mobile. Here's a desktop view on my email:
Picture
I hope this is helpful to any of you, whether you are a technical or non-technical staff at your company, that's been handed off this same task. Connect with me!
source code: zoom meeting invite using freemarker
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
</head>
<body style="height: 100% !important; width: 100% !important; background-color: #ffffff; margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="font-size: 13px;color:#39394d;font-family: Arial;background-color: #ffffff; width: 100%; height: 100%;padding-bottom: 10px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

<td style="vertical-align: top">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width: 592px;">
<tr>
<td style="vertical-align: top;padding: 0px background-color: #f4f5f9">
<table border="0" cellpadding="0" cellspacing="0" align="center"
style="margin-left: 0px;margin-right: 0px;width: 100%;background-color: #ffffff;padding-bottom: 37px;">
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center"
style="margin-left: 0px;margin-right: 0px;width: 100%;background-color: #ffffff;padding-bottom: 37px;">
<tr>
<td style="padding-top: 30px;padding-bottom: 10px;background-color:#ffffff;text-align: center">
<img src="https://us02web.zoom.us/account/branding/p/7dec6bcf-5bd3-4bc7-b0ef-e3d25f6cb1a9.png">
</td>
</tr>
</table>

<tr>
<td style="padding-left: 28px;padding-right: 28px;">
<table border="0" cellpadding="0" cellspacing="0" align="center"
style="width: 100%;font-size: 13px;color: #39394d;font-family: Arial;">
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Join ${siteName} Meeting:
${meetingUrl}
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Meeting ID: ${meetingNumber}
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if password??>
Passcode: ${password}
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if enablePSTN>
<#assign phoneTapPwd = h323Password?? && enablePSTNPasswordProtected?? && !(isUserTSPEnabled??) >
<#if isUserTSPEnabled?? && isUserTSPEnabled>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Dial
<#if tspNumbersInfo?? && ((tspNumbersInfo?size) > 0)>
<#list tspNumbersInfo as tspNumberInfo>
${tspNumberInfo}
</#list>
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
${(tspPsdTitle!'')?html}: ${(tspPsd!'')?html}
<#elseif pickedNumbers?? && ((pickedNumbers?size) > 0)>
<#if supportOneTap?? && supportOneTap>
One tap mobile:
</td>
</tr>
<tr>
<td>
${pickedNumbers[0].displayNumber?replace(' ','')?replace('(0)','')},,${number?c}#<#if phoneTapPwd>,,,,,,0#,,${h323Password}#
</#if>${pickedNumbers[0].countryName!'US'}<#if pickedNumbers[0].free> Toll-free</#if>
<#if ((pickedNumbers[0].cityName)?? && (pickedNumbers[0].cityName)?length gt 1)> (${pickedNumbers[0].cityName?html}
<#if (pickedNumbers[0].labels)?? && (pickedNumbers[0].labels)?length gt 1>,${pickedNumbers[0].labels?html})<#else>)</#if>
<#else><#if (pickedNumbers[0].labels)?? && (pickedNumbers[0].labels)?length gt 1> (${pickedNumbers[0].labels?html})</#if></#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top;">
<#if ((pickedNumbers?size) > 1 && pickedNumbers[1].country == pickedNumbers[0].country)>${pickedNumbers[1].displayNumber?replace(' ','')?replace('(0)','')},,${number?c}#<#if phoneTapPwd>,,,,,,0#,,${h323Password}#</#if> ${pickedNumbers[0].countryName!'US'}<#if pickedNumbers[1].free> Toll-free</#if><#if ((pickedNumbers[1].cityName)?? && (pickedNumbers[1].cityName)?length gt 1)> (${pickedNumbers[1].cityName?html}<#if (pickedNumbers[1].labels)?? && (pickedNumbers[1].labels)?length gt 1>,${pickedNumbers[1].labels?html})<#else>)</#if><#else><#if (pickedNumbers[1].labels)?? && (pickedNumbers[1].labels)?length gt 1> (${pickedNumbers[1].labels?html})</#if></#if>
</#if>
</td>
</tr>
<tr>
</#if>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Dial by your location:
<#list pickedNumbers as pickedNumber>
</br>
${pickedNumber.displayNumber}
<#if pickedNumber.free>${pickedNumber.countryName!'US'} Toll-free<#else>${pickedNumber.countryName!'US'}</#if>
<#if ((pickedNumber.cityName)?? && (pickedNumber.cityName)?length gt 1)> (${pickedNumber.cityName?html}
<#if (pickedNumber.labels)?? && (pickedNumber.labels)?length gt 1>,${pickedNumber.labels?html})<#else>)</#if>
<#else>
<#if (pickedNumber.labels)?? && (pickedNumber.labels)?length gt 1> (${pickedNumber.labels?html})</#if></#if>
</#list>
</td>
</tr>

<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Meeting ID: ${meetingNumber}
<#else>
<#if supportOneTap?? && supportOneTap>
One tap mobile
${tollNumbers[0]?replace(' ','')?replace('(0)','')},,${number?c}#<#if phoneTapPwd>,,,,,,0#,,${h323Password}#</#if> ${tollCountry!'US'} Toll
<#if ((tollNumbers?size) > 1)>${tollNumbers[1]?replace(' ','')?replace('(0)','')},,${number?c}#<#if phoneTapPwd>,,,,,,0#,,${h323Password}#</#if> ${tollCountry!'US'} Toll
</#if>
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Dial by your location
${tollNumbers[0]} ${tollCountry!'US'} Toll
<#if ((tollNumbers?size) > 1)>${tollNumbers[1]} ${tollCountry!'US'} Toll</#if>
<#if premiumNumbers?? && ((premiumNumbers?size) > 0)>
<#list premiumNumbers as pmNum>
${pmNum.displayNumber} ${pmNum.countryName!'US'} Toll
</#list>
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if tollFreeNumbers?? && ((tollFreeNumbers?size) > 0)>
<#list tollFreeNumbers as tfreeNum>
${tfreeNum} ${tollFreeCountrys[tfreeNum_index]!'US'} Toll-free
</#list>
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
Meeting ID: ${meetingNumber}
</#if>
<#if h323Password?? && enablePSTNPasswordProtected?? && !(isUserTSPEnabled??)>
Passcode: ${h323Password}
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if showInternationalNumbersLink?? && showInternationalNumbersLink>
Find your local number: ${teleConferenceUrl}
</#if>
<#elseif useOtherAudioConference>
Join by phone
${otherAudioConferenceInfo!''}
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if h323Gateway?? && ((h323Gateway?size) > 0)>
<#if isCRC?? && isCRC>
Join by SIP
${number?c}${(sipDomain!'@zoomcrc.com')?html}
<#else>
Join by SIP
${number?c}@${h323Gateway[0]}
<#if ((h323Gateway?size) > 1)>
${number?c}@${h323Gateway[1]}
</#if>
</#if>
Join by H.323
<#list h323Gateway as rc>
${rc}
</#list>
Meeting ID: ${meetingNumber}
<#if h323Password??>
Passcode: ${h323Password}
</#if>
<#if shortSIPUrl??>
More H.323 IP addresses: ${shortSIPUrl}
</#if>
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if enableLync??>
Join by Skype for Business
${lyncUrl}
</#if>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; padding-top: 10px;">
<#if moreCustomizedContent??>
${moreCustomizedContent}
</#if>
</td>
</tr>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img src="https://us02web.zoom.us/account/branding/p/8ea99ae5-b914-4976-a41c-f449d0eb7d61.png">
</td>
</tr>
</tbody>
</table>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 30px; padding-bottom: 30px; background-color: #FFFFFF; border-top-color:#F0F2F4; border-top-style: solid; border-top-width: 1px;">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<a href="https://www.instagram.com/integrated.work/" style="text-decoration: none;">
<img alt="" border="0" height="25" src="https://us02web.zoom.us/account/branding/p/32de5379-2c9a-4425-ad66-f86bb6c2d0f8.png"
style="width: 25px; height: 25px; border-width: 0px; border-style: solid;"
/>
</a>
</td>
<td style="padding-left:10px; padding-right: 10px;">
<a href="https://www.linkedin.com/company/integratedwork"
style="text-decoration: none;">
<img alt="" border="0" height="25" src="https://us02web.zoom.us/account/branding/p/5ca521c7-cb34-489e-9a17-02061732ceda.png"
style="width: 25px; height: 25px; border-width: 0px; border-style: solid;"
/>
</a>
</td>
<td>
<a href="https://integratedwork.com/blog" style="text-decoration: none;">
<img alt="" border="0" src="https://us02web.zoom.us/account/branding/p/3c36a454-3b66-480a-b957-62cc785fc74d.png"
style="width: 25px; height: 25px; border-width: 0px; border-style: solid;"
/>
</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-family:helvetica,arial; font-size:12px; line-height:18px; color:#999999; text-align:center; padding-top: 10px;">
Copyright &copy;2020 Integrated Work, Inc. All rights reserved.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Comments
comments powered by Disqus

    Categories

    All
    Business
    DEI
    Expressive Arts In Psychology
    Filipino Psychology
    Human Performance
    Indigenous Filipino
    Literature Review
    Mindfulness
    Personal
    Psychology
    Technology

    RSS Feed

    This section will not be visible in live published website. Below are your current settings:


    Current Number Of Columns are = 2

    Expand Posts Area =

    Gap/Space Between Posts = 10px

    Blog Post Style = card

    Use of custom card colors instead of default colors =

    Blog Post Card Background Color = current color

    Blog Post Card Shadow Color = current color

    Blog Post Card Border Color = current color

    Publish the website and visit your blog page to see the results

Photo used under Creative Commons from quariesofficial
© 2022 Roma G. Velasco LLC | Connect | About | Blog | Photos