Met behulp van een 4-tal Smarty functies is het mogelijk een countdown timer op te bouwen in de e-mail editor. De Smarty functies zijn voor het genereren van afbeeldingen voor de resterende dagen, uren, minuten en secondes. De resterende aantal dagen/uren/minuten/secondes worden bepaald aan de hand van een opgegeven datum en tijd welke opgegeven kan worden in de smart functie. Zie onderstaand statisch voorbeeld als sfeerimpressie:


De Smarty functies hebben verschillende instellingen om de opmaak te bepalen, daarbij worden een aantal standaard fonts ondersteund. Mocht het gewenste font er niet tussen staan, dan kan deze aangeleverd worden bij de offerteaanvraag via tpm@deployteq.com 


Deze App wordt geleverd met 2 standaard HTML objecten, welke direct ingezet kunnen worden in je eigen e-mail content. In de bibliotheek zijn de objecten "Countdown - 1 Tile" en "Countdown - 4 Tiles" beschikbaar:

Zelf opbouwen van je e-mail content

Om te werken met Smarty in Deployteq is basis kennis nodig van deze template taal, deze informatie kan verkregen worden in de handleiding van Smarty. Voor de legacy e-mails wordt Smarty 2 gebruikt (https://www.smarty.net/docsv2/en/) en voor de zone e-mails Smarty 3 (https://www.smarty.net/docs/en/)


Hieronder een voorbeeld voor het opzetten van een basis countdown timer Smarty 3 met een einddatum welke 1 maand in de toekomst ligt en waarbij de font "OpenSans-Regular" wordt gebruikt;

Countdown timer basis voorbeeld 
<html dir="ltr">
    <head>
        <title>Countdown timer - Deployteq</title>
    </head>
    <body>
      <!-- Instellingen voor de countdown timer -->
      {{$timestamp="+1 month"|date_format:'%Y-%m-%d %H:%M:%S'}}
      {{$format="%02d"}}
      {{$color="#000000"}}
      {{$bgColor="#FF0000"}}
      {{$size="61"}}
      {{$font="OpenSans-Regular"}}
      Ingestelde einddatum en tijd: {{$timestamp}}<br/><br/>

      <!-- Genereren van de afbeeldingen -->
      {{capture assign='days'}}{{ctdays timestamp=$timestamp template_plural=$format template_singular=$format color=$color bgcolor=$bgColor size=$size font=$font}}{{/capture}}
      {{capture assign='hours'}}{{cthours timestamp=$timestamp template_plural=$format template_singular=$format color=$color bgcolor=$bgColor size=$size font=$font}}{{/capture}}
      {{capture assign='minutes'}}{{ctminutes timestamp=$timestamp template_plural=$format template_singular=$format color=$color bgcolor=$bgColor size=$size font=$font}}{{/capture}}
      {{capture assign='seconds'}}{{ctseconds timestamp=$timestamp template_plural=$format template_singular=$format color=$color bgcolor=$bgColor size=$size font=$font}}{{/capture}}
        
      <!-- Tonen van de afbeeldingen in de e-mail -->
      <img src="{{$days}}" height="40" alt="" style="border: 0; display: inline;" /> Dagen
      <img src="{{$hours}}" height="40" alt="" style="border: 0; display: inline;" /> Uren
      <img src="{{$minutes}}" height="40" alt="" style="border: 0; display: inline;" /> Minuten
      <img src="{{$seconds}}" height="40" alt="" style="border: 0; display: inline;" /> Secondes
    </body>
</html>


Tevens is het mogelijk om teksten toe te voegen aan de getoonde afbeeldingen: 

Dit kan bereikt worden met de onderstaande voorbeeld HTML:

Countdown timer basis voorbeeld 
<html dir="ltr">
    <head>
        <title>Countdown timer - Deployteq</title>
    </head>
    <body>
      <!-- Instellingen voor de countdown timer -->      
      {{$timestamp="+1 month"|date_format:'%Y-%m-%d %H:%M:%S'}}
      {{$format="%02d"}}
      {{$color="#000000"}}
      {{$bgColor="#FFFFFF"}}
      {{$size="61"}}
      {{$font="OpenSans-Regular"}}
      Ingestelde einddatum en tijd: {{$timestamp}}<br/><br/>

      <!-- Genereren van de afbeeldingen -->
 	  {{capture assign='days'}}{{ctdays timestamp="$timestamp" template_plural="Nog $format dagen, " template_singular="Nog $format dagen, " color="$color" bgcolor="$bgColor" size="$size" font="$font"}}{{/capture}}
 	  {{capture assign='hours'}}{{cthours timestamp="$timestamp" template_plural="$format uren, " template_singular="$format uren, " color="$color" bgcolor="$bgColor" size="$size" font="$font"}}{{/capture}}
 	  {{capture assign='minutes'}}{{ctminutes timestamp="$timestamp" template_plural="$format minuten, " template_singular="$format minuten, " color="$color" bgcolor="$bgColor" size="$size" font="$font"}}{{/capture}}
      {{capture assign='seconds'}}{{ctseconds timestamp="$timestamp" template_plural="$format secondes" template_singular="$format secondes" color="$color" bgcolor="$bgColor" size="$size" font="$font"}}{{/capture}}
        
      <!-- Tonen van de afbeeldingen in de e-mail -->
      <img src="{{$days}}" height="40" alt="" style="border: 0; display: inline;" />
      <img src="{{$hours}}" height="40" alt="" style="border: 0; display: inline;" />
      <img src="{{$minutes}}" height="40" alt="" style="border: 0; display: inline;" />
      <img src="{{$seconds}}" height="40" alt="" style="border: 0; display: inline;" />
    </body>
</html>

Instellingen countdown timer

Hieronder een overzicht van alle mogelijke instellingen van de Smarty functies ctdays, cthours, ctminutes en ctseconds;

elementomschrijving

timestamp

Hierin dient te timestamp worden geplaatst waar de countdown timer naar toe dient af te tellen. Dit kan alleen een datum zijn, maar ook een datum met tijd.

2018-01-01 00:00:00

template_plural

Weergave van meervoud van aantal dagen, uren, minuten en seconden.

  • %d minuten - getal zonder voorloop nul
  • %02d dagen - getal met voorloop nul

Bijvoorbeeld: Nog 2 dagen.

template_singular

Weergave van enkelvoud van aantal dagen, uren, minuten en seconden.

  • %d minuut - getal zonder voorloop nul
  • %02d dag- getal met voorloop nul

Bijvoorbeeld: Nog 1 dag.

colorDit is de kleur van cijfers/tekst in de afbeeldingen, bijvoorbeeld #ff0000
bgcolorDe achtergrondkleur dient ingevuld te worden anders worden de afbeeldingen korrelig weergegeven, bijvoorbeeld #ff0000
sizeDit is in points (pt). Je dient hier even mee te spelen icm met het font om te kijken hoe groot de afbeeldingen worden gerenderd zodat je deze met de juiste maten kan weergeven, al dan niet geoptimaliseerd voor retina schermen. Een getal is hier voldoende.

font

De volgende fonts worden op dit moment ondersteund:

  • arialbd
  • arial
  • calibrib
  • calibri
  • cour
  • freesansbold
  • freesans
  • georgia
  • impact
  • LucidaSans-Regular
  • OpenSans-Bold
  • OpenSans-BoldItalic
  • OpenSans-ExtraBold
  • OpenSans-ExtraBoldItalic
  • OpenSans-Italic
  • OpenSans-Light
  • OpenSans-LightItalic
  • OpenSans-Regular
  • OpenSans-Semibold
  • OpenSans-SemiboldItalic
  • roboto
  • tahoma
  • times
  • Trebuchet_MS_Bold
  • verdana


Mocht het gewenste font er niet tussen staan, dan kan deze aangeleverd worden bij de offerteaanvraag via tpm@deployteq.com 

Largest unit

Vanaf  is het mogelijk om aan te geven wat de grootste eenheid is welke teruggekoppeld moet worden. Bijvoorbeeld als de wens is om geen dagen te tonen, maar alles in uren en minuten aan te geven: Nog 48 uur en 20 minuten!

Mogelijke waardes:

  • days
  • hours 
  • minutes 
  • seconds


Ondersteunende mailclients

Interactie in de e-mail is niet voor elke e-mailclient weggelegd, de interactieve Countdown Timer wordt alleen ondersteund in de volgende e-mailclients:

  • Apple Mail
  • Outlook op Mac
  • Android Mail 4.4
  • iOS mail app
  • AOL mail
  • Samsung Mail App
  • Gmail
  • Outlook.com
  • Office 365


Alle overige e-mailclients tonen:

  • Het aantal dagen, uren, minuten en seconden vanaf verzending
  • Visueel worden de ronde hoeken niet ondersteund in de zakelijke Outlook e-mailcients


De countdown timer die in de mail bij de ontvanger getoond worden zal gedurende één minuut aftellen.