Editor šablon

Šablona je e-mail, který Frontmail vykreslí a odešle: předmět, příjemci, HTML a textová verze a k tomu schéma parametrů, které vyplní váš formulář nebo kód. Tahle stránka projde seznam šablon a všechny části editoru. Principy popisují články HTML šablony, Průvodce Handlebars a Parametry a typy.

Vytvářet a upravovat šablony smí role Vlastník, Admin a Vývojář. Čtenář a role Fakturace otevírají šablony Jen pro čtení – vidí všechno a můžou použít Exportovat (.json), ale nic měnit ani odesílat.

Seznam šablon

V postranním menu otevřete Šablony.

Seznam šablon s tlačítky Importovat, Z galerie a Nová šablona a sloupci Název, ID šablony, Jazyk, Parametry a Upraveno

V každém řádku je Název (pod ním popis), ID šablony (tpl_…, potřebujete ho v kódu), Jazyk, počet Parametrů a kdy byla šablona Upravena i s aktuální verzí (např. před 2 hodinami · v3).

Limit šablon a zmrazené šablony

Počet šablon závisí na tarifu – Free 3, Starter 10, Pro a Business neomezeně. Když limit vyčerpáte, seznam hlásí Používáte 3 z 3 šablon, které váš tarif umožňuje. a tlačítka pro nové šablony nejdou použít. Vlastník a role Fakturace tam rovnou uvidí tlačítko Vyšší tarif.

Po přechodu na nižší tarif se šablony nad nový limit zmrazí (ty nejdéle neupravované) a dostanou štítek Zmrazená. Zmrazená šablona si ponechá obsah i verze, ale odesílání přes ni selže, dokud nepřejdete na vyšší tarif. Viz Změny tarifu.

Jak vytvořit šablonu

Nad seznamem jsou tři tlačítka.

Nová šablona (od nuly)

Klikněte na Nová šablona.
Vyplňte Název a zvolte Jazyk (English nebo Čeština).
Klikněte na Vytvořit.

Nová šablona začíná jako jednoduchý e-mail z kontaktního formuláře: parametry name, email a message, pole Komu s vaší adresou a Odpovědět na nastavené na {{email}}. CAPTCHA je zapnutá, pokud organizace přidala své klíče Turnstile, jinak začíná vypnutá. Upravte si ji podle potřeby.

Z galerie

Klikněte na Z galerie.
Vpravo nahoře přepněte English / Čeština a vyfiltrujte Kategorii (Formuláře, Byznys, Rezervace, E-shop…).
Tlačítkem Náhled si šablonu prohlédnete ve skutečné velikosti.
Klikněte na Použít šablonu. Ve vaší organizaci vznikne kopie a otevře se v editoru.

Galerie šablon s přepínačem jazyka, filtry kategorií a kartami s náhledem, popisem a tlačítky Náhled a Použít šablonu

Šablony z galerie jsou responzivní, podporují tmavý režim a mají ukázková data. Viz Galerie šablon.

Import

Klikněte na Importovat.
Buď vyberte Soubor – soubor .html nebo šablonu exportovanou z Frontmailu (.json) –, nebo vložte HTML do pole Nebo vložte HTML. Soubor může mít nejvýš 2 MB.
Zkontrolujte Název a klikněte na Importovat.

Export .json přenese obsah, parametry i většinu nastavení. Služba, záložní služba a šablona automatické odpovědi v exportu nejsou, nastavte je proto znovu v Nastavení. Po importu čistého HTML otevřete Parametry a klikněte na Najít v šabloně.

Editor v kostce

Editor šablony na kartě Obsah: vlevo pole Předmět a editor HTML kódu, vpravo náhled s přepínači Počítač/Mobil, Světlý/Tmavý a HTML/Text

V záhlaví je název šablony, její verze (např. v3) a štítky: Neuložené změny, dokud máte neuložené úpravy, a případně Zmrazená nebo Jen pro čtení. Vpravo najdete:

Poslat test – viz Testovací e-maily,
Uložit – viz Ukládání,
Další akce (⋯) – Exportovat (.json), Nahradit HTML a Smazat.

Pod záhlavím jsou čtyři karty: Obsah, Nastavení, Kód pro web a Verze.

Obsah

Vlevo upravujete, vpravo vidíte živý náhled a kontroly. Nahoře je pole Předmět, pod ním pět podkaret.

HTML

Plnohodnotný editor kódu pro HTML se zvýrazněním Handlebars. Po napsání {{ nabízí vaše parametry, helpery jako #if a #each a systémové proměnné. Viz Průvodce Handlebars.

Vizuální

Jednoduchý textový editor pro šablony, které jsou hlavně text: Tučně, Kurzíva, Nadpis 1, Nadpis 2, Odrážky, Číslovaný seznam, Citace, Odkaz, Zpět/Znovu a Vložit parametr. Upravuje jen obsah <body>; hlavička a styly zůstanou beze změny.

Karta Vizuální s lištou formátování a nabídkou Vložit parametr

Na spoustu šablon je ale moc jednoduchý. Pokud HTML obsahuje tabulky pro rozložení, inline styly, prvky div nebo obrázky, bloky Handlebars (#if, #each) nebo CSS třídy, uvidíte hlášku Na vizuální editor je šablona příliš složitá i s důvody. Můžete:

Upravovat dál v HTML – vrátit se do editoru kódu (doporučujeme),
Přesto upravit (zjednodušit) – otevřít vizuální editor; po uložení se rozložení ztratí a zůstane jen jednoduché formátování.

Text

Textová verze, která se posílá spolu s HTML. Ve výchozím stavu se generuje z HTML automaticky (Textová verze se generuje z HTML automaticky.). Tlačítkem Napíšu ji sám ji můžete upravit ručně – jako výchozí bod se použije aktuálně vygenerovaný text. Automatické generování zapnete znovu v Nastavení → Zpráva → Generovat textovou verzi automaticky.

Ukázková data

Formulář vytvořený podle vašich parametrů. Hodnoty se používají pro náhled a testovací e-maily – se skutečnými e-maily se nikdy neposílají. U seznamů jsou tlačítka Přidat položku, Posunout nahoru, Posunout dolů a Odebrat položku. Pokud hodnota porušuje pravidlo (je moc dlouhá, má špatný typ, chybí povinná hodnota), pole ukáže chybu – stejnou, jakou by vrátilo API.

Karta Ukázková data s polem pro každý parametr

Parametry

Schéma parametrů: u každého Název, Typ a jestli je Povinné.

Karta Parametry s tlačítky Přidat parametr a Najít v šabloně a tabulkou parametrů

Jak najít parametry v šabloně

Použijte parametry v HTML, předmětu nebo příjemcích, např. {{name}}.
Klikněte na Najít v šabloně.

Frontmail přidá všechny parametry, které najde, a řekne, kolik z nich je nových (Našli jsme 2 nové parametry.). Typ odhadne podle názvu a použití (třeba parametr v {{#each}} bude seznam) – typy a pravidla pak zkontrolujte.

Jak přidat nebo upravit parametr

Klikněte na Přidat parametr, nebo na tužku u existujícího parametru.
Vyplňte:
- Název – písmena, číslice, _ a -, musí být jedinečný,
- Typ – Text (jeden řádek), Text (víc řádků), E-mail, URL adresa, Číslo, Ano / ne, Datum, Výběr z možností, HTML (očištěné) nebo Seznam,
- Popisek a Popis – zobrazí se ve formuláři ukázkových dat,
- Povinné,
- pravidla podle typu: Min. délka, Max. délka a Vzor (regex) u textových typů, Minimum/Maximum u čísel, Povolené hodnoty u výběru (oddělené čárkami), Pole položky a Min. položek/Max. položek u seznamů (např. name:string!, qty:number – ! znamená povinné),
- Výchozí hodnota a Ukázková hodnota (u seznamů v JSON).
Klikněte na Uložit.

Parametr odeberete ikonou koše. Typy a pravidla vysvětluje článek Parametry a typy.

Živý náhled

Náhled vykresluje šablonu přesně tak, jak to udělá odesílač, s vašimi ukázkovými daty a průběžně při psaní. Nad ním můžete přepínat:

Počítač / Mobil – šířku náhledu,
Světlý / Tmavý – simulaci poštovního klienta v tmavém režimu (vaše styly prefers-color-scheme),
HTML / Text – HTML nebo textovou verzi.

Nad e-mailem vidíte vykreslený Předmět, Komu a Odpovědět na. Když šablonu nejde vykreslit (třeba kvůli neuzavřenému {{#if}}), zobrazí se Šablonu nejde vykreslit s chybou. V tarifu Free obsahuje náhled patičku Odesláno přes Frontmail, stejně jako skutečné e-maily. Víc v článku Náhled a testovací odeslání.

Kontroly

Pod náhledem ukazují Kontroly problémy už při psaní – například parametry, které se používají, ale nejsou definované, definované, ale nepoužité, neplatné Handlebars, chybějící text alt nebo příliš velký e-mail. Každá položka je Chyba nebo Upozornění, často i s číslem řádku. Karta Obsah ukazuje počet problémů v odznaku. Všechno vypadá dobře. znamená, že není co opravovat.

Chyby blokují uložení změn obsahu (Před uložením opravte chyby v kontrolách.), upozornění ne.

Nastavení

Karta Nastavení s kartami Obecné, Zpráva, Doručování a Ochrana

Obecné

Název a Popis – pro vás a váš tým.
Jazyk – podle něj se formátují data a čísla a patička v tarifu Free.

Zpráva

Všechna pole mohou obsahovat parametry, např. {{name}}.

Předmět (stejné pole jako na kartě Obsah).
Komu – více adres oddělte čárkami.
Jméno odesílatele a E-mail odesílatele – odesílatel musí být takový, jakého vaše služba povoluje. Když E-mail odesílatele necháte prázdný, použije se výchozí odesílatel služby.
Odpovědět na, CC, BCC.
Při uložení vložit CSS do prvků – přesune styly do atributů style, protože spousta poštovních klientů <style> ignoruje.
Generovat textovou verzi automaticky – doporučujeme; textová verze vznikne z HTML při každém uložení.

Doručování

Služba – která e-mailová služba šablonu odesílá. Výchozí služba znamená tu, která je zrovna nastavená jako výchozí.
Záložní služba – použije se automaticky, když hlavní služba selže. Volba Žádná znamená bez zálohy. Viz Přehled služeb.
Šablona automatické odpovědi – jiná šablona, která po odeslání tohoto e-mailu odejde tomu, kdo formulář vyplnil. Viz Automatická odpověď.

Ochrana

Vyžadovat CAPTCHA (Turnstile) – doporučujeme pro veřejné formuláře; zastaví boty dřív, než vás budou stát kredity. Nové šablony ho mají zapnuté, jakmile organizace přidá vlastní klíče Turnstile v Zabezpečení → Ochrana proti botům (Turnstile). Bez klíčů přepínač zapnout nejde a poznámka odkáže na stránku Zabezpečení. Se zapnutým Povolit mobilní aplikace ho zapnout můžete – editor upozorní, že mobilní aplikace fungovat budou (používají sdílený klíč Frontmailu), ale požadavky z webů skončí chybou captcha_not_configured, dokud klíče nepřidáte. Viz Turnstile.
Povolit dynamického příjemce – parametry pak mohou určit Komu/Kopie/Skrytou kopii. S veřejným klíčem je obsah takové šablony uzamčený: CAPTCHA je povinná, odesílatel / jméno odesílatele / Reply-To musí být pevné, HTML parametry se nepřijímají, texty mají nejvýš 500 znaků a odkazy smějí vést jen na povolené domény. Bez CAPTCHA editor zobrazí varování s odkazem na nastavení Turnstile – nebo šablonu posílejte ze serveru privátním klíčem.
Povolit jen odkazy na povolené domény – použije kontrolu odkazů na každý požadavek, i s privátním klíčem. U šablon z galerie s dynamickým příjemcem je zapnutá automaticky.
Povolit přílohy z formuláře – přijímat soubory poslané s požadavkem. Limit velikosti závisí na tarifu.
Pevné přílohy – soubory přiložené ke každému e-mailu z této šablony. Viz Přílohy.

Sběr kontaktů

Zaškrtnutím Sbírat kontakty z této šablony se každý, kdo formulář odešle, uloží do Kontaktů. Pak zvolte Parametr s e-mailem, případně Parametr se jménem, a do Dalších polí vypište názvy parametrů (oddělené čárkami), které se mají ke kontaktu uložit. Viz Sběr kontaktů.

Kód pro web

Hotový kód ke zkopírování pro HTML / JS, React, Vue, Svelte, React Native, Node.js a cURL, už vyplněný vaším veřejným klíčem, službou a ID šablony a všemi jejími parametry.

Když šablona vyžaduje CAPTCHA, obsahují ukázky pro web widget Turnstile se site key vaší organizace (dokud klíče nepřidáte, je v nich zástupný text YOUR_TURNSTILE_SITE_KEY) a ukázka pro React Native používá <TurnstileWebView> se sdíleným mobilním klíčem Frontmailu – site key tam nepotřebujete.

Karta Kód pro web s přepínačem frameworků a blokem kódu s tlačítkem kopírování

Veřejný klíč můžete bez obav použít v prohlížeči. Ukázky pro Node.js a cURL jsou pro servery, kde místo něj použijete privátní klíč – viz Veřejné a privátní klíče.

Jak poslat testovací e-mail

Klikněte na Poslat test.
Do pole Komu zadejte adresu (předvyplněná je ta vaše).
Případně zvolte jinou Službu; Služba nastavená v šabloně použije tu z Nastavení.
Klikněte na Poslat test.

Dialog Poslat testovací e-mail s poli Komu a Služba a počítadlem zbývajících testovacích e-mailů

Test použije aktuální, i neuložený obsah s vašimi ukázkovými daty, takže změny vyzkoušíte ještě před uložením. Předmět začíná [Test]. Testovací e-maily jsou zdarma: až 20 za den na organizaci (počítáno podle UTC), což ukazuje text Dnes zbývá N z 20 testovacích e-mailů. V Historii jsou označené jako test.

Verze

Každé uložení obsahu šablony vytvoří novou verzi. Karta Verze je vypisuje se sloupci Verze, Autor, Uloženo a Poznámka; aktuální verze má štítek aktuální.

Karta Verze se seznamem verzí

Změny – co se změnilo oproti předchozí verzi.
Porovnat s aktuální – rozdíly mezi touto a aktuální verzí.

Porovnání se otevře pod seznamem. Přepínačem HTML, Text, Předmět, Parametry a Příjemci zobrazíte jednotlivé části.

Jak obnovit starší verzi

U verze klikněte na Obnovit.
Potvrďte. Pokud máte neuložené změny, přepíšou se.

Obnovení vytvoří novou verzi se starým obsahem – nic se neztratí. Nastavení šablony (služba, ochrana, sběr kontaktů) se neverzuje. Viz Verze, diff a rollback.

Ukládání a verze

Klikněte na Uložit nebo stiskněte Ctrl + S (na Macu ⌘ + S). Uvidíte Uloženo jako verze N.
Změny obsahu (předmět, HTML, text, příjemci, parametry) vytvoří novou verzi; změny názvu a nastavení se uloží bez ní.
Když se pokusíte odejít z editoru s neuloženými změnami, prohlížeč se zeptá, jestli opravdu chcete odejít.

Když mezitím uložil někdo jiný

Pokud kolega šablonu uložil, zatímco jste ji upravovali, Frontmail jeho práci potichu nepřepíše. Dialog Šablonu mezitím uložil někdo jiný nabídne:

Porovnat HTML – ukáže jeho HTML vedle vašeho,
Načíst jejich verzi – načte jeho verzi; vaše změny se zahodí,
Ponechat moji – uloží vaši verzi přes jeho.

Nahradit HTML, export a smazání

Všechno najdete v nabídce Další akce (⋯).

Nahradit HTML – nahrajte soubor .html nebo vložte HTML, které nahradí tělo šablony. Parametry se nemění – zkontrolujte je (nebo použijte Najít v šabloně) a uložte.
Exportovat (.json) – stáhne šablonu jako soubor .frontmail.json, který můžete importovat do jiné organizace.
Smazat – odstraní šablonu i všechny její verze. Už odeslané e-maily v Historii zůstanou.