Goal

To create an email block that shows a countdown timer.

Procedure

  1. Create a new block of the type Email.
  2. Copy and paste the HTML code of the block. You can define your own code, or use one of the examples below.

     Without background image

    Example

    #set ($date = ${tplPlaceholder.element('"inline":"false","name":"Date","id":"80980b91-bde6-4abf-8c20-a383831bef81","type":"text","value":"2022-11-10/4:00:00","group":"GIF Settings"')})
    #set ($width = ${tplPlaceholder.element('"inline":"false","name":"Width","id":"80980b91-bde6-4abf-8c20-a383831bef82","type":"number","value":"300","group":"GIF Settings"')})
    #set ($height = ${tplPlaceholder.element('"inline":"false","name":"Height","id":"80980b91-bde6-4abf-8c20-a383831bef83","type":"number","value":"300","group":"GIF Settings"')})
    #set ($frames = ${tplPlaceholder.element('"inline":"false","name":"Frames","id":"80980b91-bde6-4abf-8c20-a383831bef84","type":"number","value":"60","group":"GIF Settings"')})
    #set ($fontColor = ${tplPlaceholder.element('"inline":"false","name":"Color","id":"80980b91-bde6-4abf-8c20-a383831bef85","type":"text","value":"000000","group":"GIF Settings"')})
    #set ($background = ${tplPlaceholder.element('"inline":"false","name":"Background color","id":"80980b91-bde6-4abf-8c20-a383831bef86","type":"text","value":"ffffff","group":"GIF Settings"')})
    #set ($font = ${tplPlaceholder.element('"inline":"false","name":"Font","id":"80980b91-bde6-4abf-8c20-a383831bef87","type":"text","value":"Arial","group":"GIF Settings"')})
    #set ($fontSize = ${tplPlaceholder.element('"inline":"false","name":"Font size","id":"80980b91-bde6-4abf-8c20-a383831bef88","type":"text","value":"16","group":"GIF Settings"')})
    
    <!-- COUNTDOWN begins -->
    <table class="w100pc" bgcolor="${background}" border="0" cellpadding="0" cellspacing="0" width="${width}" align="center" style="width:${width}px;max-width:${width}px;background-color: ${background}; color: ${color}">
    	<tr>
    		<td>
    			<img src="https://gif-countdown-timer.ext.shortest-route.com/?date=${date}&width=${width}&height=${height}&frames=${frames}&color=${fontColor}&bg=${background}&font=${font}&fontsize=${fontSize}">
    		</td>
    	</tr>
    </table>
    <!-- COUNTDOWN ends -->
    XML
     With background image

    Example

    #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 -->
    XML
  3. Click 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.

Related Topics