Create a Countdown Timer Block
Goal
To create an email block that shows a countdown timer.
Procedure
- Create a new block of the type Email.
Copy and paste the HTML code of the block. You can define your own code, or use one of the examples below.
Without background imageExample
#set ($FullWidthBG = ${tplPlaceholder.element('"falseValue":"false","inline":"false","trueValue":"true","name":"Full Width BG Colour","id":"7cacd693-2607-4377-ad89-fc4d38c59b73","type":"toggle","value":"false","group":"1. Settings"')}) #set ($BGImage = ${tplPlaceholder.element('"inline":"false","name":"Background Image SRC","id":"1c92a87a-6e88-40d4-990c-a25927821cdd","type":"text","value":"https://via.placeholder.com/700x400?text=700px+Wide","group":"1. Settings"')}) #set ($BGImageURL = ${tplPlaceholder.element('"inline":"false","name":"Background Image Link","id":"b69d12c8-16e5-4f07-bda5-f4c52e7a8928","type":"text","value":"https://mapp.com","group":"1. Settings"')}) #set ($BGImageHeight = ${tplPlaceholder.element('"inline":"false","name":"Background Image Height","id":"c0b19eea-abae-402e-8d50-f927d9617a33","type":"text","value":"400","group":"1. Settings"')}) #set ($BlockBG = ${tplPlaceholder.element('"inline":"false","name":" Background Colour","id":"2ca0e5be-a8ad-4178-a576-9082ab4bbbc6","type":"text","value":"#ffffff","group":"1. Settings"')}) #set ($EndDate = ${tplPlaceholder.element('"inline":"false","name":"End Date","id":"956228b7-1327-4062-afb6-abff28f766ba","type":"text","value":"2022-12-31","group":"Countdown"')}) #set ($EndTime = ${tplPlaceholder.element('"inline":"false","name":"End Time","id":"1271183e-8fcb-4aa0-b058-737d7754c1d9","type":"text","value":"22:00","group":"Countdown"')}) #set ($dateCaptions = ${tplPlaceholder.element('"inline":"false","name":"Date captions (separated by comma)","id":"1273183e-8fcb-4aa0-b058-737d7754c1d9","type":"text","value":"Days,Hours,Min,Sec","group":"Countdown"')}) #set ($finalText = ${tplPlaceholder.element('"inline":"false","name":"Message when time is up","id":"1272183e-8fcb-4aa0-b058-737d7754c1d9","type":"text","value":"Time is up!","group":"Countdown"')}) #set ($countdownLayout = ${tplPlaceholder.element('"inline":"false", "name":"Layout", "id":"98828a6d-203d-48ea-8929-039ed03917a0", "type":"list", "group":"Layout", "options":[{"name":"Captions stacked", "value": "2"},{"name":"Inline captions", "value":"default"}], "value":"2"')}) #set ($fontName = ${tplPlaceholder.element('"inline":"false", "name":"Font name", "id":"98828a6d-103d-48ea-8929-039ed03917a0", "type":"list", "group":"Layout", "options":[{"name":"OpenSans", "value": "OpenSans"},{"name":"Times New Roman", "value":"Times New Roman"},{"name":"Arial", "value":"Arial"}], "value":"OpenSans"')}) #set ($fontSizeText1 = ${tplPlaceholder.element('"inline":"false","name":"Font Size","id":"98828a6d-003d-48ea-8929-039ed03917a0","type":"text","value":"30","group":"Layout"')}) #set ($countdownWidth = ${tplPlaceholder.element('"inline":"false","name":"Countdown width","id":"98828a6d-003d-48ea-8929-039ed03917a1","type":"text","value":"450","group":"Layout"')}) #set ($countdownHeight = ${tplPlaceholder.element('"inline":"false","name":"Countdown height","id":"98828a6d-003d-48ea-8929-039ed03917a2","type":"text","value":"120","group":"Layout"')}) #set ($textColor = ${tplPlaceholder.element('"inline":"false","name":"Tile Text Color","id":"33740811-d062-40da-bb94-89185dae1ecb","type":"text","value":"000000","group":"Layout"')}) #set ($blockColor = ${tplPlaceholder.element('"inline":"false","name":"Tile background color","id":"870643a5-c196-43f4-ae9a-af6a227eb95e","type":"text","value":"ffffff","group":"Layout"')}) #set ($PaddingTop = ${tplPlaceholder.element('"inline":"false","name":"Padding Top","id":"77c2b2ce-30a6-414d-97b2-630ec176ef4a","type":"text","value":"0","group":"Layout"')}) #set ($PaddingBottom = ${tplPlaceholder.element('"inline":"false","name":"Padding Bottom","id":"5f56edf0-4fbf-4609-b045-836ac8718996","type":"text","value":"0","group":"Layout"')}) #if (${BGImage} == "") #set($BGImage = "https://amundsen.shortest-route.com/imgproxy/img/2039543798/HD_transparent_picture+%281%29.png") #end #set ($BgImagePositionVertical = "top") #set ($BgImagePositionHorizontal = "center") #set ($BgSize = "cover") <!-- COUNTDOWN begins --> <table class="wrapto100pc containerTable" width="700" bgcolor="${BlockBG}" border="0" cellpadding="0" cellspacing="0" align="center" style='#if($FullWidthBG=="true")background-color: ${BlockBG};#end'> <tr> <td align="center" style="padding: ${PaddingTop}px 0px ${PaddingBottom}px;background-color: ${BlockBG}" bgcolor="${BlockBG}"> <table class="wrapto100pc hauto" width="700" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 700px; margin: 0 auto;" bgcolor="${BlockBG}"> <tr> <td class="herobg wrapto100pc hauto bgImgContain" background="${BGImage}" width="700" height="${BGImageHeight}" valign="bottom" style="width: 700px; vertical-align: middle; background-color: ${BlockBG}; background-image: url('${BGImage}'); background-repeat: no-repeat; background-position: ${BgImagePositionVertical} ${BgImagePositionHorizontal}; background-size: ${BgSize}; cursor: pointer" bgcolor="${BlockBG}"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:525pt; height:${BGImageHeight}pt;" src="${BGImage}" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position: relative; width:525pt; height:${BGImageHeight}pt"> <v:textbox inset="0,0,0,0"> <![endif]--> <a href="${BGImageURL}" style="cursor: pointer; text-decoration: none;"> <div> <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" height="100%"> <tr> <td class="reset hauto" height="${BGImageHeight}" align="center" valign="middle" height="100%"> <table class="wrapto100pc" width="570" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 570px" valign="middle" height="100%"> <tr> <td class="wrapto100pc" width="450" style="padding: 0px" valign="middle" height="100%"> <table class="wrapto100pc" width="450" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 450px" valign="middle" height="100%"> <tr><td height="10" class="nomob"> </td></tr> <tr> <td class="" style="text-align: center;padding: 0px 30px; vertical-align:middle" width="100%" valign="middle"> <a href="${BGImageURL}"> <div id="countdown-imagecontainer" class="imagecontainer" data-smartblock-type="countdown" data-smartblock-countdown-type="animated"><img src="https://gif-countdown-timer.ext.shortest-route.com/?date=${EndDate}/${EndTime}&width=${countdownWidth}&height=${countdownHeight}&frames=60&color=${textColor}&bg=${blockColor}&font=${fontName}&fontsize=${fontSizeText1}&dateFormat=${dateCaptions}&gifStyle=${countdownLayout}&customMessage=${finalText}" width="${countdownWidth}" valign="middle" style="width:${countdownWidth}px" height="${countdownHeight}" class="wrapto100pc hauto"></div> <!-- End Slot HTML --> </a> </td> </tr> <!--[if !mso]><!--> <tr><td height="10" style="display: none" class="MobBlock"> </td></tr> <!--<![endif]--> <tr><td height="10" class="nomob"> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </a> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table> </td> </tr> </table> <!-- COUNTDOWN ends -->XMLWith background imageExample
#set ($FullWidthBG = ${tplPlaceholder.element('"falseValue":"false","inline":"false","trueValue":"true","name":"Full Width BG Colour","id":"7cacd693-2607-4377-ad89-fc4d38c59b73","type":"toggle","value":"false","group":"1. Settings"')}) #set ($BGImage = ${tplPlaceholder.element('"inline":"false","name":"Background Image SRC","id":"1c92a87a-6e88-40d4-990c-a25927821cdd","type":"text","value":"https://via.placeholder.com/700x400?text=700px+Wide","group":"1. Settings"')}) #set ($BGImageURL = ${tplPlaceholder.element('"inline":"false","name":"Background Image Link","id":"b69d12c8-16e5-4f07-bda5-f4c52e7a8928","type":"text","value":"https://mapp.com","group":"1. Settings"')}) #set ($BGImageHeight = ${tplPlaceholder.element('"inline":"false","name":"Background Image Height","id":"c0b19eea-abae-402e-8d50-f927d9617a33","type":"text","value":"400","group":"1. Settings"')}) #set ($BlockBG = ${tplPlaceholder.element('"inline":"false","name":" Background Colour","id":"2ca0e5be-a8ad-4178-a576-9082ab4bbbc6","type":"text","value":"#ffffff","group":"1. Settings"')}) #set ($EndDate = ${tplPlaceholder.element('"inline":"false","name":"End Date","id":"956228b7-1327-4062-afb6-abff28f766ba","type":"text","value":"2022-12-31","group":"Countdown"')}) #set ($EndTime = ${tplPlaceholder.element('"inline":"false","name":"End Time","id":"1271183e-8fcb-4aa0-b058-737d7754c1d9","type":"text","value":"22:00","group":"Countdown"')}) #set ($fontName = ${tplPlaceholder.element('"inline":"false", "name":"Font name", "id":"x", "type":"list", "group":"Layout", "options":[{"name":"OpenSans", "value": "OpenSans"},{"name":"Times New Roman", "value":"Times New Roman"},{"name":"Arial", "value":"Arial"}], "value":"OpenSans"')}) #set ($fontSizeText1 = ${tplPlaceholder.element('"inline":"false","name":"Font Size","id":"98828a6d-003d-48ea-8929-039ed03917a0","type":"text","value":"30","group":"Layout"')}) #set ($countdownWidth = ${tplPlaceholder.element('"inline":"false","name":"Countdown width","id":"98828a6d-003d-48ea-8929-039ed03917a1","type":"text","value":"450","group":"Layout"')}) #set ($countdownHeight = ${tplPlaceholder.element('"inline":"false","name":"Countdown height","id":"98828a6d-003d-48ea-8929-039ed03917a2","type":"text","value":"120","group":"Layout"')}) #set ($textColor = ${tplPlaceholder.element('"inline":"false","name":"Tile Text Color","id":"33740811-d062-40da-bb94-89185dae1ecb","type":"text","value":"000","group":"Layout"')}) #set ($blockColor = ${tplPlaceholder.element('"inline":"false","name":"Tile background color","id":"870643a5-c196-43f4-ae9a-af6a227eb95e","type":"text","value":"ffffff","group":"Layout"')}) #set ($PaddingTop = ${tplPlaceholder.element('"inline":"false","name":"Padding Top","id":"77c2b2ce-30a6-414d-97b2-630ec176ef4a","type":"text","value":"0","group":"Layout"')}) #set ($PaddingBottom = ${tplPlaceholder.element('"inline":"false","name":"Padding Bottom","id":"5f56edf0-4fbf-4609-b045-836ac8718996","type":"text","value":"0","group":"Layout"')}) #if (${BGImage} == "") #set($BGImage = "https://amundsen.shortest-route.com/imgproxy/img/2039543798/HD_transparent_picture+%281%29.png") #end #set ($BgImagePositionVertical = "top") #set ($BgImagePositionHorizontal = "center") #set ($BgSize = "cover") <!-- COUNTDOWN begins --> <table class="w100pc containerTable" width="700" bgcolor="${BlockBG}" border="0" cellpadding="0" cellspacing="0" align="center" style='#if($FullWidthBG=="true")background-color: ${BlockBG};#end'> <tr> <td align="center" style="padding: ${PaddingTop}px 0px ${PaddingBottom}px;background-color: ${BlockBG}" bgcolor="${BlockBG}"> <table class="w100pc hauto" width="700" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 700px; margin: 0 auto;" bgcolor="${BlockBG}"> <tr> <td class="herobg w100pc hauto bgImgContain" background="${BGImage}" width="700" height="${BGImageHeight}" valign="bottom" style="width: 700px; vertical-align: middle; background-color: ${BlockBG}; background-image: url('${BGImage}'); background-repeat: no-repeat; background-position: ${BgImagePositionVertical} ${BgImagePositionHorizontal}; background-size: ${BgSize}; cursor: pointer" bgcolor="${BlockBG}"> <a href="${BGImageURL}" style="cursor: pointer; text-decoration: none;"> <div> <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" height="100%"> <tr> <td class="reset hauto" height="${BGImageHeight}" align="center" valign="middle" height="100%"> <table class="w100pc" width="570" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 570px" valign="middle" height="100%"> <tr> <td class="pad15 w100pc" width="450" style="padding: 0px" valign="middle" height="100%"> <table class="w100pc" width="450" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 450px" valign="middle" height="100%"> <tr> <td class="" style="text-align: center;padding: 0px; vertical-align:middle" width="100%" valign="middle"> <a href="${BGImageURL}"> <div id="countdown-imagecontainer" class="imagecontainer" style=";" data-smartblock-type="countdown" data-smartblock-countdown-type="animated"><img src="https://gif-countdown-timer.ext.shortest-route.com/?date=${EndDate}/${EndTime}&width=${countdownWidth}&height=${countdownHeight}&frames=60&color=${textColor}&bg=${blockColor}&font=${fontName}&fontsize=${fontSizeText1}" width="${countdownWidth}" valign="middle" style="width:${countdownWidth}px" height="${countdownHeight}" class="w100pc hauto"></div> <!-- End Slot HTML --> </a> </td> </tr> <!--[if !mso]><!--> <tr><td height="${spacer}" style="display: none" class="MobBlock"> </td></tr> <!--<![endif]--> <tr><td height="10" class="nomob"> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </a> </td> </tr> </table> </td> </tr> </table> <!-- COUNTDOWN ends -->XMLClick Save. Your block is ready to be used in an email message.
Once you add the block to the email message, you can customize it as needed using the Details panel in the Compose Email Message window.