Preskočiť na obsah

Editor šablón

Šablóna je e-mail, ktorý Frontmail vykreslí a odošle: predmet, príjemcovia, telo v HTML a v texte a k tomu schéma parametrov, ktoré vypĺňa váš formulár alebo kód. Táto stránka prechádza zoznamom šablón a všetkými časťami editora. Pojmy, na ktorých stojí, vysvetľujú stránky HTML šablóny, Handlebars a Parametre a typy.

Vytváranie a úprava šablón vyžaduje rolu Vlastník, Administrátor alebo Vývojár. Čitatelia a členovia s rolou Fakturácia otvárajú šablóny Len na čítanie – môžu si všetko pozrieť a použiť Exportovať (.json), ale nemôžu nič meniť ani posielať.

V bočnom menu otvorte Šablóny.

Zoznam Šablóny s tlačidlami Importovať, Z galérie a Nová šablóna a stĺpcami Názov, ID šablóny, Jazyk, Parametre a Upravené

Každý riadok ukazuje Názov (s popisom pod ním), ID šablóny (tpl_…, potrebné vo vašom kóde), Jazyk, počet Parametrov a kedy bola šablóna Upravená, spolu s aktuálnou verziou (napr. pred 2 hodinami · v3).

Počet šablón závisí od vášho tarifu – Free 3, Starter 10, Pro a Business neobmedzene. Keď dosiahnete limit, zoznam uvádza Používate 3 z 3 šablón vo svojom tarife. a tlačidlá na nové šablóny sú neaktívne. Vlastníci a členovia s rolou Fakturácia tam majú priamo tlačidlo Prejsť na vyšší.

Po prechode na nižší tarif sú šablóny nad nový limit Zmrazené (tie, ktoré boli najdlhšie neupravené). Zmrazená šablóna si ponechá obsah aj verzie, ale posielanie s ňou zlyhá, kým opäť neprejdete na vyšší tarif. Pozrite si Zmeny tarifu.

Nad zoznamom sú tri tlačidlá.

  1. Kliknite na Nová šablóna.
  2. Zadajte Názov a vyberte Jazyk.
  3. Kliknite na Vytvoriť.

Tento jazyk sa stane predvoleným jazykom šablóny. Neskôr ho môžete zmeniť na akýkoľvek jazyk v Nastavenia → Všeobecné → Predvolený jazyk a ďalšie jazyky pridať v lište Jazyky.

Nová šablóna začína ako jednoduchý e-mail z kontaktného formulára: parametre name, email a message, Komu nastavené na vašu vlastnú adresu a Reply-To na {{email}}. CAPTCHA je povinná, ak vaša organizácia pridala svoje kľúče Turnstile, inak je na začiatku vypnutá. Prispôsobte si ju podľa potreby.

  1. Kliknite na Z galérie.
  2. Vpravo hore prepnite jazyk (napríklad Slovenčina) a filtrujte podľa Kategórie (Formuláre, Biznis, Rezervácie, E-shop, …).
  3. Kliknutím na Náhľad si šablónu pozriete v plnej veľkosti.
  4. Kliknite na Použiť šablónu. Vo vašej organizácii sa vytvorí kópia a otvorí sa v editore.

Galéria šablón s prepínačom jazyka, filtrami kategórií a kartami s miniatúrou, popisom a tlačidlami Náhľad a Použiť šablónu

Šablóny z galérie sú responzívne, podporujú tmavý režim a obsahujú vzorové údaje. Pozrite si Galéria šablón.

  1. Kliknite na Importovať.
  2. Buď vyberte Súbor – súbor .html alebo šablónu exportovanú z Frontmailu (.json) –, alebo vložte HTML do poľa Alebo vložte HTML. Súbory môžu mať najviac 2 MB.
  3. Skontrolujte Názov a kliknite na Importovať.

Export vo formáte .json prenesie obsah, parametre, jazykové verzie a väčšinu nastavení. Služba, záložná služba a šablóna automatickej odpovede nie sú súčasťou exportu, preto ich znova nastavte v časti Nastavenia. Po importe čistého HTML otvorte Parametre a kliknite na Zistiť zo šablóny.

Editor šablóny na karte Obsah: pole Predmet a editor HTML kódu vľavo, náhľad s prepínačmi Počítač/Mobil, Svetlý/Tmavý a HTML/Text vpravo

Hlavička zobrazuje názov šablóny, jej verziu (napr. v3) a odznaky: Neuložené zmeny, kým máte neuložené úpravy, a Zmrazená a Len na čítanie, ak platia. Vpravo:

  • Poslať test – pozrite si Testovacie e-maily,
  • Uložiť – pozrite si Ukladanie,
  • Ďalšie akcie (⋯) – Exportovať (.json), Nahradiť HTML a Vymazať.

Pod hlavičkou je lišta Jazyky a pod ňou štyri karty: Obsah, Nastavenia, Kód a Verzie.

Lišta Jazyky zobrazuje predvolený jazyk šablóny (štítok Predvolený) a jeden čip pre každý preklad. Kliknutím na jazyk ho začnete upravovať; všetko na kartách nižšie sa potom týka tohto jazyka. Preklad môže mať štítok Zastaraný (predvolený jazyk sa od jeho uloženia zmenil) alebo Strojový (strojový preklad).

  • Pridať jazyk – pridá preklad: kópiu predvoleného jazyka, strojový preklad s vlastným API kľúčom vašej organizácie alebo prázdny preklad.
  • Keď je vybraný preklad: Preložiť znova, Označiť ako aktuálny (pri zastaranom preklade) a Odstrániť jazyk.

Prekladá sa len predmet, HTML, text a meno odosielateľa – príjemcovia, parametre a nastavenia sú spoločné pre všetky jazyky. Pozrite si Preklady šablón.

Vľavo upravujete, vpravo vidíte živý náhľad a kontroly. Pole Predmet je hore; pod ním je päť podkariet.

Plnohodnotný editor kódu pre telo v HTML so zvýrazňovaním Handlebars. Keď napíšete {{, ponúkne vám vaše parametre, helpery ako #if a #each a systémové premenné. Pozrite si Sprievodcu Handlebars.

Jednoduchý editor formátovaného textu pre šablóny, ktoré sú prevažne textové: Tučné, Kurzíva, Nadpis 1, Nadpis 2, zoznamy, Citácia, Odkaz, Späť/Znova a Vložiť parameter. Upravuje len obsah <body>; hlavička a štýly zostávajú bez zmeny.

Karta Vizuálne s panelom formátovania a ponukou Vložiť parameter

Mnohé šablóny sú preň príliš bohaté. Ak HTML používa tabuľky na rozloženie, inline štýly, prvky div či obrázky, bloky Handlebars (#if, #each) alebo CSS triedy, uvidíte hlásenie Táto šablóna je na vizuálny editor príliš zložitá s dôvodmi. Môžete:

  • Pokračovať v HTML – vrátiť sa do editora kódu (odporúčame),
  • Upraviť napriek tomu (zjednodušiť) – otvoriť vizuálny editor; uloženie z neho zahodí rozloženie a ponechá len jednoduché formátovanie.

Textová verzia, ktorá sa posiela spolu s HTML. Predvolene sa generuje z HTML automaticky (Textová verzia sa generuje z HTML automaticky.). Kliknite na Napíšem ju sám, ak ju chcete upravovať ručne – ako východisko sa použije aktuálny vygenerovaný text. Automatické generovanie môžete znova zapnúť v Nastavenia → Správa → Generovať textovú verziu automaticky.

Formulár vygenerovaný z vašich parametrov. Hodnoty sa používajú v náhľade a v testovacích e-mailoch – so skutočnými e-mailmi sa nikdy neposielajú. Zoznamy majú Pridať položku, Posunúť vyššie, Posunúť nižšie a Odstrániť položku. Ak hodnota poruší pravidlo (príliš dlhá, nesprávny typ, chýbajúca povinná hodnota), pole zobrazí chybu – rovnako, ako by to urobilo API.

Karta Vzorové údaje s jedným poľom pre každý parameter

Schéma parametrov: Názov a Typ každého parametra a či je Povinný.

Karta Parametre s tlačidlami Pridať parameter a Zistiť zo šablóny a tabuľkou parametrov

Ako zistiť parametre zo šablóny

  1. Použite parametre v HTML, predmete alebo príjemcoch, napr. {{name}}.
  2. Kliknite na Zistiť zo šablóny.

Frontmail pridá každý parameter, ktorý nájde, a oznámi, koľko z nich je nových (Našli sa 2 nové parametre.). Typ každého parametra odhadne podľa názvu a spôsobu použitia (napríklad parameter použitý v {{#each}} sa stane zoznamom) – typy a pravidlá potom skontrolujte.

Ako pridať alebo upraviť parameter

  1. Kliknite na Pridať parameter alebo na ceruzku vedľa existujúceho parametra.
  2. Vyplňte:
    • Názov – písmená, číslice, _ a -, musí byť jedinečný,
    • Typ – Text (jeden riadok), Text (viac riadkov), E-mail, URL adresa, Číslo, Áno / nie, Dátum, Výber z možností, HTML (vyčistené) alebo Zoznam,
    • Označenie a Popis – zobrazujú sa vo formulári vzorových údajov,
    • Povinné,
    • pravidlá pre daný typ: Min. dĺžka, Max. dĺžka a Vzor (regex) pre textové typy, Minimum/Maximum pre čísla, Povolené hodnoty pre výber (oddelené čiarkami), Polia položky a Min. položiek/Max. položiek pre zoznamy (napr. name:string!, qty:number – ! znamená povinné),
    • Predvolená hodnota a Vzorová hodnota (pri zoznamoch JSON).
  3. Kliknite na Uložiť.

Parameter odstránite ikonou koša. Typy a pravidlá vysvetľuje stránka Parametre a typy.

Náhľad vykresľuje šablónu presne tak ako odosielač, s vašimi vzorovými údajmi, priamo počas písania. Nad ním môžete prepínať:

  • Počítač / Mobil – šírku náhľadu,
  • Svetlý / Tmavý – simuluje e-mailovú aplikáciu v tmavom režime (vaše štýly prefers-color-scheme),
  • HTML / Text – verziu v HTML alebo textovú verziu.

Nad e-mailom vidíte vykreslený Predmet, Komu a Reply-To. Ak šablónu nie je možné vykresliť (napríklad neuzavretý {{#if}}), uvidíte Šablónu nie je možné vykresliť s chybou. V tarife Free obsahuje náhľad pätičku Odoslané cez Frontmail, rovnako ako skutočné e-maily. Viac v časti Náhľad a testovacie odoslania.

Pod náhľadom Kontroly počas písania vypisujú problémy – napríklad parametre použité, ale nedefinované, definované, ale nepoužité, neplatné Handlebars, chýbajúci text alt alebo príliš veľký e-mail. Každá položka je Chyba alebo Upozornenie, často s číslom riadka. Karta Obsah zobrazuje počet problémov v odznaku. Všetko vyzerá v poriadku. znamená, že nie je čo opravovať.

Chyby blokujú uloženie zmien obsahu (Pred uložením opravte chyby v kontrolách.); upozornenia nie.

Karta Nastavenia s kartami Všeobecné, Správa, Doručovanie a Ochrana

  • Názov a Popis – pre vás a váš tím.
  • Predvolený jazyk – jazyk hlavného obsahu, ktorý sa pošle, keď odosielateľ jazyk neurčí alebo šablóna požadovaný jazyk nemá. Môžete zvoliť akýkoľvek jazyk. Riadi sa ním aj formátovanie dátumov a čísel a pätička v tarife Free pri e-mailoch v tomto jazyku.

Všetky polia môžu obsahovať parametre, napr. {{name}}.

  • Predmet (to isté pole ako na karte Obsah).
  • Komu – viac adries oddeľte čiarkami.
  • Meno odosielateľa a E-mail odosielateľa – odosielateľ musí byť taký, ktorý vaša služba smie používať. Ak necháte E-mail odosielateľa prázdny, použije sa predvolený odosielateľ služby.
  • Reply-To, CC, BCC.
  • Pri uložení vložiť CSS do atribútov – presunie štýly do atribútov style, pretože mnohé e-mailové klienty <style> ignorujú.
  • Generovať textovú verziu automaticky – odporúčame; textová verzia sa vytvorí z HTML pri každom uložení.
  • Služba – ktorá e-mailová služba túto šablónu posiela. Predvolená služba sa riadi tým, ktorá služba je práve predvolená.
  • Záložná služba – použije sa automaticky, keď hlavná služba zlyhá. Ak záložnú službu nechcete, vyberte Žiadna. Pozrite si Záložná služba.
  • Šablóna automatickej odpovede – iná šablóna, ktorá sa po odoslaní tohto e-mailu pošle človeku, ktorý formulár odoslal. Pozrite si Automatická odpoveď.
  • Vyžadovať CAPTCHA (Turnstile) – odporúčame pre verejné formuláre; zablokuje boty skôr, ako vás budú stáť kredity. Nové šablóny ju majú zapnutú, len čo vaša organizácia pridá vlastné kľúče Turnstile v Zabezpečenie → Ochrana pred botmi (Turnstile). Bez kľúčov prepínač zapnúť nemožno a poznámka odkazuje na stránku Zabezpečenie. Ak je zapnuté Povoliť mobilné aplikácie, zapnúť ho môžete aj tak – editor upozorní, že mobilné aplikácie budú fungovať (používajú zdieľaný kľúč Frontmailu), ale požiadavky z webov budú zlyhávať s chybou captcha_not_configured, kým kľúče nepridáte. Pozrite si Turnstile.
  • Povoliť dynamického príjemcu – umožní parametrom nastaviť To/CC/BCC. S verejným kľúčom je obsah takejto šablóny uzamknutý: CAPTCHA je povinná, From / meno odosielateľa / Reply-To musia byť pevné, parametre typu HTML sa neprijímajú, texty sú obmedzené na 500 znakov a odkazy smú viesť len na povolené domény. Bez CAPTCHA editor zobrazí upozornenie s odkazom na nastavenie Turnstile – alebo šablónu posielajte zo svojho servera so súkromným kľúčom.
  • Povoliť len odkazy na povolené domény – uplatní kontrolu povolených odkazov na každú požiadavku vrátane odoslaní so súkromným kľúčom. Pri šablónach z galérie s dynamickým príjemcom je predvolene zapnuté.
  • Povoliť prílohy z formulára – prijímať súbory odoslané s požiadavkou. Limit veľkosti závisí od vášho tarifu.
  • Statické prílohy – súbory pripojené ku každému e-mailu tejto šablóny. Pozrite si Prílohy.

Zaškrtnite Zbierať kontakty z tejto šablóny, ak chcete každého, kto odošle formulár, uložiť do Kontaktov. Potom vyberte Parameter s e-mailom, voliteľne Parameter s menom a do poľa Ďalšie polia vypíšte parametre (názvy oddelené čiarkami), ktoré sa majú uložiť ku kontaktu. Pozrite si Zber kontaktov.

Kód pripravený na vloženie pre HTML / JS, React, Vue, Svelte, React Native, Node.js a cURL, v ktorom je už vyplnený váš verejný kľúč, služba a ID šablóny a všetky jej parametre.

Keď šablóna vyžaduje CAPTCHA, webové ukážky obsahujú widget Turnstile so site key vašej organizácie (ak ste kľúče ešte nepridali, zástupný text YOUR_TURNSTILE_SITE_KEY) a ukážka pre React Native používa <TurnstileWebView> so zdieľaným mobilným kľúčom Frontmailu – site key netreba.

Karta Kód s kartami frameworkov a blokom kódu s tlačidlom na kopírovanie

Ak má šablóna preklady, vyberte nad kódom Jazyk a do kódu sa pridá voľba locale; bez nej sa e-maily posielajú v predvolenom jazyku.

Verejný kľúč môžete bezpečne používať v prehliadači. Ukážky pre Node.js a cURL sú určené pre servery, kde namiesto neho použijete súkromný kľúč – pozrite si Verejný a súkromný kľúč.

  1. Kliknite na Poslať test.
  2. Zadajte adresu do poľa Poslať na (vaša vlastná adresa je predvyplnená).
  3. Ak má šablóna preklady, vyberte Jazyk (predvybraný je ten, ktorý máte otvorený v editore).
  4. Voliteľne vyberte inú Službu; Služba šablóny použije tú z Nastavení.
  5. Kliknite na Poslať test.

Dialóg Poslať testovací e-mail s poľami Poslať na a Služba a počítadlom testovacích e-mailov, ktoré dnes zostávajú

Test používa aktuálny, neuložený obsah s vašimi vzorovými údajmi, takže zmeny môžete vyskúšať ešte pred uložením. Predmet začína [Test]. Testovacie e-maily sú zadarmo: najviac 20 na organizáciu za deň (počíta sa v UTC), čo sa zobrazuje ako Dnes zostáva N z 20 testovacích e-mailov. V Histórii sú označené ako test.

Každé uloženie obsahu šablóny vytvorí novú verziu. Karta Verzie ich vypisuje so stĺpcami Verzia, Autor, Uložené a Poznámka; aktuálna je označená ako aktuálna.

Karta Verzie so zoznamom verzií

  • Zmeny – čo sa zmenilo oproti predchádzajúcej verzii.
  • Porovnať s aktuálnou – rozdiely medzi touto verziou a aktuálnou.

Porovnanie sa otvorí pod zoznamom. Prepínaním medzi HTML, Text, Predmet, Parametre a Príjemcovia uvidíte jednotlivé časti.

Ako obnoviť staršiu verziu

  1. Kliknite na Obnoviť vedľa verzie.
  2. Potvrďte. Ak máte neuložené zmeny, nahradia sa.

Obnovenie vytvorí novú verziu so starým obsahom – nič sa nestratí. Nastavenia šablóny (služba, ochrana, zber kontaktov) sa neverzujú. Pozrite si Verzie, porovnanie a návrat.

Keď máte v lište Jazyky vybraný preklad, karta namiesto toho zobrazuje vlastné verzie tohto prekladu so stĺpcami Vychádza z (verzia predvoleného jazyka, ku ktorej bol preklad uložený) a Pôvod (Ručný alebo Strojový).

  • Kliknite na Uložiť alebo stlačte Ctrl + S (na Macu ⌘ + S). Zobrazí sa Uložené ako verzia N.
  • Zmeny obsahu (predmet, HTML, text, príjemcovia, parametre) vytvoria novú verziu; zmeny názvu a nastavení sa uložia bez nej.
  • Ak sa pokúsite opustiť editor s neuloženými zmenami, prehliadač vás požiada o potvrdenie.

Ak kolega uložil šablónu, kým ste ju upravovali, Frontmail jeho prácu potichu neprepíše. Dialóg Túto šablónu medzitým uložil niekto iný ponúka:

  • Porovnať HTML – zobrazí jeho HTML vedľa vášho,
  • Načítať ich verziu – načíta jeho verziu; vaše zmeny sa stratia,
  • Nechať moju – uloží vašu verziu cez jeho.

Všetky tri akcie sú v ponuke Ďalšie akcie (⋯).

  • Nahradiť HTML – nahrajte súbor .html alebo vložte HTML, ktorým sa nahradí telo tejto šablóny. Parametre sa nemenia – skontrolujte ich (alebo použite Zistiť zo šablóny) a uložte.
  • Exportovať (.json) – stiahne šablónu vrátane jej prekladov ako súbor .frontmail.json, ktorý môžete importovať do inej organizácie.
  • Vymazať – odstráni šablónu so všetkými jej verziami a prekladmi. Už odoslané e-maily zostanú v Histórii.