Come inserire un countdown in una email

Prima di iniziare

Assicurati di aver installato l'app.

Puoi ora inserire un Countdown Timer direttamente dall'editor delle comunicazioni e transazionali.

Per creare una nuova Comunicazione segui il percorso:

Journey Lab  > clicca sul pulsante Crea > comunicazione 

Inserimento del Countdown Timer

In ogni box destinato al caricamento di un'immagine, è possibile inserire un Countdown Timer.
Rimuovi l'immagine di default  per aggiungere una nuova immagine.

Nella pagina di selezione dei Media da caricare, troverai il pulsante "Crea Countdown" con il quale scegliere e configurare il Countdown da aggiungere.

Configura il tempo residuo del countdown

• Nome interno:
  è il nome del Countdown. È un riferimento ad uso esclusivamente interno e non sarà visualizzato dai tuoi contatti.
• Tipo:
  puoi scegliere tra:
  • Imposta una data fissa:
    nel campo Data e ora della fine inserisci la data e ora in cui terminerà il conteggio. Quando la data sarà superata, verrà visualizzata la cifra 00:00:00. Se la durata è superiore a 100 giorni, in questo campo verrà visualizzato 99:99:99
  • Espressione calcolata:
    la scadenza del Countdown sarà il valore salvato in un campo contatti (che potrebbe quindi essere diverso per ciascuno di loro). Per selezionare questo valore, puoi inserire l'espressione contact.values.DATETIMEFIELD dove DATETIMEFIELD è il nome del campo in cui il valore è stato salvato. Per esempio puoi calcolare un valore pari a 7 giorni prima della data salvata nel campo DATETIMEFIELD, utilizzando l'espressione fn.dateadd(contact.values.DATETIMEFIELD,-7,'day').
• Stile
  puoi usare uno degli stili grafici predefiniti per il tuo Countdown, scegliendo tra:
  
  • Clock:
    
  • Boxes:
    
  • Bubbles:
    
  • Candy:
    

Personalizza lo stile

Modifica l'aspetto del Countdown configurando i seguenti parametri nel tab Stili:

• Carattere
  modifica il font del Countdown;
• Dimensione carattere:
  modifica le dimensioni del font del Countdown;
• Utilizza sfondo trasparente
  consigliato in ottica di comunicazione compatibile con il darkmode
• Sfondo:
  scegli il colore che sarà mostrato come sfondo inserendo in questo campo il codice esadecimale o cliccando nel box di selezione del colore.
  Puoi anche applicare uno sfondo trasparente, attivando l'opzione Usa sfondo trasparente.
• Colore primario:
  modifica il colore di base del Countdown;
• Colore per le cifre:
  modifica il colore delle cifre del Countdown;
• Colore per il testo:
  modifica il colore degli elementi di testo del Countdown;

Nella sezione Testi:

• Testo
  modifica la posizione degli elementi testuali (giorni, ore, minuti) rispetto alle cifre del Countdown.
  Il testo sarà disposto Sotto i numeri, Sopra i numeri, o Non sarà mostrato.
• Mostra:
  scegli se mostrare tutte le cifre del Countdown (Giorni, ore, minuti e secondi) o solo alcune di loro.
  
  Se scegli di mostrare anche i secondi, il Countdown sarà visualizzato come GIF animata in cui i secondi scorreranno dinamicamente.
  Se attivi contemporaneamente lo sfondo trasparente alcuni particolari del Countdown potrebbero non essere visualizzati correttamente. Ti consigliamo di controllare l'anteprima prima di aggiungere il Countdown.
• Testo Giorni/Ore/Minuti/Secondi:
  modifica le diciture Giorni, Ore, Minuti e Secondi mostrate all'interno del Countdown.
• Numero di secondi:
  la gif generata quando si sceglie di visualizzare anche i secondi, contiene un'immagine per ogni secondo (inserito in un frame diverso). Maggiore è il numero di secondi da mostrare, maggiore la dimensione finale della gif.

Una volta completata la configurazione del Countdown clicca su Crea in basso a destra nella pagina.
Visualizzerai la pagina in cui sono mostrate le proprietà dell'immagine Countdown che dovrai quindi inserire nelle tue comunicazioni.

Uso del parametro expiredate

Intervenendo nel codice della comunicazione è possibile aggiungere all'URL dell'immagine del Countdown un parametro expiredate che contiene la data finale del Countdown stesso.

[image:countdown_1558693205375.png from=newsletter w=273 h=64 url.expiredate='1420123803000']

Con il parametro expiredate è possibile per esempio configurare la scadenza del Countdown dopo alcuni giorni dalla data di spedizione della Comunicazione.
Anzitutto calcola una variabile (nell'esempio temp.expiredate) il cui valore sarà la data di invio del messaggio a cui vengono aggiunti 3 giorni, formattata come Unix timestamp:

<meta mn:tempvar mn:name="deliverydateplus3" mn:value="fn.datetostr(fn.dateadd(message.deliverydate, +3, 'day'),'unix_timestamp')" />

La tempvar creata sarà quindi impostata come valore dell'immagine dinamica del Countdown (nell'esempio: countdown_1558693205375.png):

[image:countdown_1558693205375.png from=newsletter w=273 h=64 url.expiredate=temp.deliverydateplus3]