Salta ai contenuti

Editor dei modelli

Un modello è l’email che Frontmail genera e invia: oggetto, destinatari, corpo HTML e testuale, più uno schema dei parametri che il tuo modulo o il tuo codice compila. Questa pagina percorre l’elenco dei modelli e ogni parte dell’editor. Per i concetti che ci stanno dietro, vedi Modelli HTML, Handlebars e Parametri e tipi.

Per creare e modificare modelli serve il ruolo Proprietario, Admin o Sviluppatore. Osservatori e membri con ruolo di fatturazione aprono i modelli in Sola lettura – possono vedere tutto e usare Esporta (.json), ma non modificare né inviare.

Apri Modelli nella barra laterale.

L’elenco Modelli con i pulsanti Importa, Dalla galleria e Nuovo modello e le colonne Nome, ID modello, Lingua, Parametri e Aggiornato

Ogni riga mostra il Nome (con la descrizione sotto), l’ID modello (tpl_…, che ti serve nel codice), la Lingua, il numero di Parametri e quando è stato Aggiornato, con la versione corrente (ad es. 2 ore fa · v3).

Il numero di modelli dipende dal piano – Free 3, Starter 10, Pro e Business illimitato. Quando raggiungi il limite, l’elenco dice Stai usando 3 modelli su 3 previsti dal tuo piano. e i pulsanti per i nuovi modelli sono disattivati. Proprietari e membri con ruolo di fatturazione trovano lì un pulsante Passa a questo piano.

Dopo il passaggio a un piano inferiore, i modelli oltre il nuovo limite vengono Congelati (quelli aggiornati meno di recente). Un modello congelato conserva contenuto e versioni, ma gli invii con esso falliscono finché non passi di nuovo a un piano superiore. Vedi Cambi di piano.

Sopra l’elenco ci sono tre pulsanti.

  1. Clicca su Nuovo modello.
  2. Inserisci un Nome e scegli la Lingua (ad es. italiano).
  3. Clicca su Crea.

Questa diventa la lingua predefinita del modello. Puoi cambiarla in qualsiasi momento in Impostazioni → Generale → Lingua predefinita e aggiungere altre lingue nella barra Lingue.

Il nuovo modello parte come una semplice email da modulo di contatto: parametri name, email e message, A impostato sul tuo indirizzo e Reply-To su {{email}}. Il CAPTCHA è obbligatorio se la tua organizzazione ha aggiunto le sue chiavi Turnstile, altrimenti parte disattivato. Adattalo alle tue esigenze.

  1. Clicca su Dalla galleria.
  2. Scegli la lingua in alto a destra e filtra per Categoria (Moduli, Business, Prenotazioni, E-commerce, …).
  3. Clicca su Anteprima per vedere un modello a grandezza piena.
  4. Clicca su Usa modello. Nella tua organizzazione viene creata una copia, che si apre nell’editor.

La galleria dei modelli con la scelta della lingua, i filtri per categoria e le schede con miniatura, descrizione e i pulsanti Anteprima e Usa modello

I modelli della galleria sono responsive, supportano la modalità scura e includono dati di esempio. Vedi Galleria dei modelli.

  1. Clicca su Importa.
  2. Scegli un File – un file .html o un modello esportato da Frontmail (.json) – oppure incolla l’HTML in Oppure incolla l’HTML. I file possono arrivare fino a 2 MB.
  3. Controlla il Nome e clicca su Importa.

Un export .json porta con sé contenuto, parametri, varianti linguistiche e la maggior parte delle impostazioni. Il servizio, il servizio di riserva e il modello di risposta automatica non fanno parte dell’export, quindi impostali di nuovo in Impostazioni. Dopo aver importato semplice HTML, apri Parametri e clicca su Rileva dal modello.

L’editor dei modelli sulla scheda Contenuto: il campo Oggetto e l’editor del codice HTML a sinistra, l’anteprima con i selettori Desktop/Mobile, Chiaro/Scuro e HTML/Testo a destra

L’intestazione mostra il nome del modello, la versione (ad es. v3) e alcuni badge: Modifiche non salvate quando hai delle modifiche, Congelato e Sola lettura quando si applicano. A destra:

  • Invia prova – vedi Email di prova,
  • Salva – vedi Salvataggio,
  • Altre azioni (⋯) – Esporta (.json), Sostituisci HTML ed Elimina.

Sotto l’intestazione c’è la barra Lingue, poi quattro schede: Contenuto, Impostazioni, Snippet e Versioni.

La barra Lingue mostra la lingua predefinita del modello (contrassegnata come Predefinita) e un chip per ogni traduzione. Clicca su una lingua per modificarla: tutto nelle schede sottostanti si riferisce allora a quella lingua. Una traduzione può avere le etichette Non aggiornata (la lingua predefinita è cambiata dopo il suo salvataggio) o Automatica (tradotta automaticamente).

  • Aggiungi lingua – aggiunge una traduzione: una copia della lingua predefinita, una traduzione automatica con la chiave API della tua organizzazione oppure una traduzione vuota.
  • Con una traduzione selezionata: Traduci di nuovo, Segna come aggiornata (per una non aggiornata) ed Elimina lingua.

Si traducono solo oggetto, HTML, testo e nome del mittente – destinatari, parametri e impostazioni sono comuni a tutte le lingue. Vedi Traduzioni dei modelli.

A sinistra modifichi, a destra vedi l’anteprima in tempo reale e i controlli. Il campo Oggetto è in alto; sotto ci sono cinque sottoschede.

Un editor di codice completo per il corpo HTML, con evidenziazione di Handlebars. Scrivi {{ per ricevere suggerimenti sui tuoi parametri, sugli helper come #if e #each e sulle variabili di sistema. Vedi la guida a Handlebars.

Un semplice editor di testo formattato per i modelli composti soprattutto da testo: Grassetto, Corsivo, Titolo 1, Titolo 2, elenchi, Citazione, Link, Annulla/Ripeti e Inserisci parametro. Modifica solo il contenuto di <body>; head e stili restano come sono.

La scheda Visuale con la barra di formattazione e il menu Inserisci parametro

Molti modelli sono troppo ricchi per questo editor. Se l’HTML usa tabelle di layout, stili inline, div o immagini, blocchi Handlebars (#if, #each) o classi CSS, vedi Questo modello è troppo complesso per l’editor visuale con i motivi. Puoi:

  • Continua a modificare l’HTML – tornare all’editor del codice (consigliato),
  • Modifica comunque (semplifica) – aprire l’editor visuale; salvando da lì il layout viene perso e resta solo la formattazione semplice.

La versione in testo semplice inviata insieme all’HTML. Per impostazione predefinita viene generata automaticamente dall’HTML (La versione testuale viene generata automaticamente dall’HTML.). Clicca su La scrivo io per modificarla a mano – il testo generato attuale fa da punto di partenza. Puoi riattivare la generazione automatica in Impostazioni → Messaggio → Genera automaticamente la versione testuale.

Un modulo generato dai tuoi parametri. I valori servono per l’anteprima e per le email di prova – non vengono mai inviati con le email reali. Gli elenchi hanno Aggiungi elemento, Sposta su, Sposta giù e Rimuovi elemento. Se un valore viola una regola (troppo lungo, tipo sbagliato, valore obbligatorio mancante), il campo mostra l’errore, proprio come farebbe l’API.

La scheda Dati di esempio con un campo per ogni parametro

Lo schema dei parametri: per ogni parametro Nome, Tipo e se è Obbligatorio.

La scheda Parametri con i pulsanti Aggiungi parametro e Rileva dal modello e la tabella dei parametri

Come rilevare i parametri dal modello

  1. Usa i parametri nell’HTML, nell’oggetto o nei destinatari, ad es. {{name}}.
  2. Clicca su Rileva dal modello.

Frontmail aggiunge ogni parametro che trova e ti dice quanti sono nuovi (Trovati 2 nuovi parametri.). Frontmail deduce il tipo dal nome e da come il parametro viene usato (ad esempio un parametro usato in {{#each}} diventa un elenco) – poi controlla tipi e regole.

Come aggiungere o modificare un parametro

  1. Clicca su Aggiungi parametro, oppure sulla matita accanto a un parametro esistente.
  2. Compila:
    • Nome – lettere, cifre, _ e -, deve essere univoco,
    • Tipo – Testo (una riga), Testo (più righe), Email, URL, Numero, Sì / no, Data, Scelta, HTML (ripulito) o Elenco,
    • Etichetta e Descrizione – mostrate nel modulo dei dati di esempio,
    • Obbligatorio,
    • le regole per il tipo: Lunghezza min., Lunghezza max. e Pattern (regex) per i tipi di testo, Minimo/Massimo per i numeri, Valori consentiti per una scelta (separati da virgole), Campi dell’elemento ed Elementi min./Elementi max. per gli elenchi (ad es. name:string!, qty:number – ! significa obbligatorio),
    • Valore predefinito e Valore di esempio (JSON per gli elenchi).
  3. Clicca su Salva.

Rimuovi un parametro con l’icona del cestino. Tipi e regole sono spiegati in Parametri e tipi.

L’anteprima genera il modello esattamente come fa il sender, con i tuoi dati di esempio, mentre scrivi. Sopra puoi scegliere:

  • Desktop / Mobile – la larghezza dell’anteprima,
  • Chiaro / Scuro – simula un’app di posta in modalità scura (i tuoi stili prefers-color-scheme),
  • HTML / Testo – la versione HTML o quella in testo semplice.

Sopra l’email vedi Oggetto, A e Reply-To già generati. Se il modello non può essere generato (ad esempio per un {{#if}} non chiuso), vedi Impossibile generare il modello con l’errore. Sul piano Free l’anteprima include il piè di pagina Inviato con Frontmail, proprio come le email reali. Altro in Anteprima e invii di prova.

Sotto l’anteprima, Controlli elenca i problemi mentre scrivi – ad esempio parametri usati ma non definiti, definiti ma non usati, Handlebars non valido, testo alt mancante o un’email troppo grande. Ogni voce è un Errore o un Avviso, spesso con il numero di riga. La scheda Contenuto mostra il numero di problemi in un badge. È tutto a posto. significa che non c’è niente da correggere.

Gli errori bloccano il salvataggio delle modifiche al contenuto (Correggi gli errori nei controlli prima di salvare.); gli avvisi no.

La scheda Impostazioni con le schede Generale, Messaggio, Consegna e Protezione

  • Nome e Descrizione – per te e per il tuo team.
  • Lingua predefinita – la lingua del contenuto principale, inviata quando chi invia non indica una lingua o ne chiede una che il modello non ha. Va bene qualsiasi lingua. Determina anche la formattazione di date e numeri e il piè di pagina del piano Free delle email in questa lingua.

Tutti i campi possono contenere parametri, ad es. {{name}}.

  • Oggetto (lo stesso campo della scheda Contenuto).
  • A – separa più indirizzi con le virgole.
  • Nome mittente ed Email mittente – il mittente deve essere uno che il tuo servizio può usare. Lascia vuota Email mittente per usare il mittente predefinito del servizio.
  • Reply-To, CC, BCC.
  • CSS inline al salvataggio – sposta gli stili negli attributi style, perché molti client email ignorano <style>.
  • Genera automaticamente la versione testuale – consigliato; la versione testuale viene creata dall’HTML a ogni salvataggio.
  • Servizio – quale servizio email invia questo modello. Servizio predefinito segue il servizio che in quel momento è impostato come predefinito.
  • Servizio di riserva – usato automaticamente quando il servizio principale non funziona. Scegli Nessuno per non avere un servizio di riserva. Vedi Servizio di riserva.
  • Modello di risposta automatica – un altro modello inviato alla persona che ha compilato il modulo, dopo l’invio di questa email. Vedi Risposta automatica.
  • Richiedi CAPTCHA (Turnstile) – consigliato per i moduli pubblici; blocca i bot prima che ti costino crediti. I nuovi modelli lo hanno attivo quando la tua organizzazione ha aggiunto le proprie chiavi Turnstile in Sicurezza → Protezione dai bot (Turnstile). Senza chiavi l’interruttore non si può attivare e una nota rimanda alla pagina Sicurezza. Se Consenti app mobile è attivo, puoi comunque attivarlo – l’editor avvisa che le app mobile funzioneranno (usano la chiave condivisa di Frontmail), ma le richieste dai siti web falliranno con captcha_not_configured finché non aggiungi le chiavi. Vedi Turnstile.
  • Consenti destinatario dinamico – permette ai parametri di impostare A/CC/BCC. Con la chiave pubblica il contenuto di un modello del genere è bloccato: il CAPTCHA è obbligatorio, From / Nome mittente / Reply-To devono essere fissi, i parametri HTML non sono accettati, i testi sono limitati a 500 caratteri e i link possono puntare solo a domini consentiti. Senza CAPTCHA l’editor mostra un avviso con un link per configurare Turnstile – oppure invia il modello dal tuo server con una chiave privata.
  • Consenti solo link a domini consentiti – applica la lista dei link consentiti a ogni richiesta, compresi gli invii con chiave privata. Attivo per impostazione predefinita nei modelli della galleria con destinatario dinamico.
  • Consenti allegati dal modulo – accetta i file inviati con la richiesta. Il limite di dimensione dipende dal piano.
  • Allegati statici – file allegati a ogni email di questo modello. Vedi Allegati.

Spunta Raccogli contatti da questo modello per salvare in Contatti chiunque invii il modulo. Poi scegli il Parametro email, facoltativamente il Parametro nome, ed elenca in Campi aggiuntivi i nomi dei parametri (separati da virgole) da salvare con il contatto. Vedi Contatti.

Codice pronto da incollare per HTML / JS, React, Vue, Svelte, React Native, Node.js e cURL, già compilato con la tua chiave pubblica, il servizio e l’ID del modello e tutti i suoi parametri.

Quando il modello richiede il CAPTCHA, gli snippet per il web includono il widget Turnstile con la chiave del sito della tua organizzazione (YOUR_TURNSTILE_SITE_KEY come segnaposto se non hai ancora aggiunto le chiavi), e lo snippet React Native usa <TurnstileWebView> con la chiave mobile condivisa di Frontmail – senza bisogno di una chiave del sito.

La scheda Snippet con le schede dei framework e un blocco di codice con il pulsante per copiare

Se il modello ha delle traduzioni, scegli la Lingua sopra il codice per aggiungere l’opzione locale; senza, le email vengono inviate nella lingua predefinita.

La chiave pubblica si può usare tranquillamente nel browser. Gli snippet Node.js e cURL sono per i server, dove usi invece una chiave privata – vedi Chiavi pubbliche e private.

  1. Clicca su Invia prova.
  2. Inserisci l’indirizzo in Invia a (il tuo indirizzo è già compilato).
  3. Se il modello ha delle traduzioni, scegli la Lingua (quella aperta nell’editor è già selezionata).
  4. Se vuoi, scegli un altro Servizio; Servizio del modello usa quello delle Impostazioni.
  5. Clicca su Invia prova.

La finestra Invia un’email di prova con i campi Invia a e Servizio e il contatore delle email di prova rimaste oggi

La prova usa il contenuto attuale, anche non salvato, con i tuoi dati di esempio, così puoi provare le modifiche prima di salvarle. L’oggetto inizia con [Test]. Le email di prova sono gratuite: fino a 20 per organizzazione al giorno (conteggiate in UTC), indicate come Oggi ti restano N email di prova su 20. Compaiono in Cronologia contrassegnate come prova.

Ogni salvataggio del contenuto del modello crea una nuova versione. La scheda Versioni le elenca con Versione, Autore, ora di salvataggio (Salvata) e Nota; quella corrente è contrassegnata come attuale.

La scheda Versioni con l’elenco delle versioni

  • Modifiche – cosa è cambiato rispetto alla versione precedente.
  • Confronta con l’attuale – le differenze tra quella versione e quella attuale.

Il confronto si apre sotto l’elenco. Passa tra HTML, Testo, Oggetto, Parametri e Destinatari per vedere ogni parte.

Come ripristinare una versione precedente

  1. Clicca su Ripristina accanto alla versione.
  2. Conferma. Se hai modifiche non salvate, vengono sostituite.

Il ripristino crea una nuova versione con il vecchio contenuto – non si perde nulla. Le impostazioni del modello (servizio, protezione, raccolta contatti) non sono versionate. Vedi Versioni, differenze e rollback.

Con una traduzione selezionata nella barra Lingue, la scheda mostra invece le versioni di quella traduzione, con le colonne Basata su (la versione della lingua predefinita su cui è stata salvata) e Origine (Manuale o Automatica).

  • Clicca su Salva o premi Ctrl + S (⌘ + S su Mac). Vedi Salvato come versione N.
  • Le modifiche al contenuto (oggetto, HTML, testo, destinatari, parametri) creano una nuova versione; le modifiche a nome e impostazioni vengono salvate senza.
  • Se provi a uscire dall’editor con modifiche non salvate, il browser ti chiede conferma.

Se un collega ha salvato il modello mentre lo stavi modificando, Frontmail non sovrascrive il suo lavoro in silenzio. La finestra Qualcun altro ha salvato questo modello offre:

  • Confronta HTML – mostra il suo HTML accanto al tuo,
  • Ricarica la loro versione – carica la sua versione; le tue modifiche vanno perse,
  • Mantieni la mia – salva la tua versione sopra la sua.

Tutte e tre le azioni sono nel menu Altre azioni (⋯).

  • Sostituisci HTML – carica un file .html o incolla l’HTML per sostituire il corpo di questo modello. I parametri non vengono modificati – ricontrollali (o usa Rileva dal modello) e salva.
  • Esporta (.json) – scarica il modello, comprese le sue traduzioni, come file .frontmail.json da importare in un’altra organizzazione.
  • Elimina – rimuove il modello con tutte le sue versioni e traduzioni. Le email già inviate restano in Cronologia.