Pokud jste se rozhodli vytvořit si vlastní šablony pro e-mailové rozesílky, máme pro vás několik praktických tipů, na co se zaměřit a čemu se vyhnout, aby vše fungovalo správně.
E-mailové šablony jsou psané v jazyce HTML, a proto je důležité dodržovat základní pravidla a omezení, která se vztahují na zobrazení e-mailů v různých e-mailových klientech (např. Gmail, Outlook apod.).
Jak složit vlastní šablonu |
Při vytváření e-mailových šablon doporučujeme používat zástupky – tedy speciální tagy, které se při odeslání automaticky nahradí konkrétními údaji z rezervace, voucheru nebo nastavení aplikace.
Seznam všech dostupných zástupek včetně jejich popisu najdete vždy v detailu konkrétní šablony, v sekci "Použitelné zástupky".
Například zástupka {%place_name%} bude v e-mailu automaticky nahrazena názvem provozovny dle nastavení. Díky použití zástupek není nutné šablony znovu upravovat, pokud se některé údaje v systému změní.
Tip: Kliknutím na zástupku v nastavení šablony ji vložíte do textu - můžete tak snadno nahradit text ve vaší šabloně za zástupku jedním kliknutím.Struktura e-mailové šablony
Většina e-mailových šablon se skládá z několika propojených částí:
Šablona obsahu - hlavní část šablony, která obsahuje HTML kód, text a strukturu e-mailu. Většina textu a designu bude umístěna právě zde.
Šablona položek - tato část definuje, jak se zobrazí jednotlivé zakoupené služby (např. 1 masáž nebo 5 voucherů). Do šablony obsahu se vkládá pomocí zástupky {%itemscontainer%}.
Fragment: pdf voucher - používá se pouze v případě, že máte aktivní vlastní PDF šablony voucherů nastavené naším týmem. Tento fragment definuje odkaz ke stažení PDF verze voucheru. Vkládá se do šablony položek pomocí zástupky {%pdfvouchercontainer%}.
Osvědčené tipy a triky |
Používejte „inline“ styly
E-mailoví klienti (Gmail, Outlook...) často nepodporují <style> v hlavičce, proto doporučujeme všechny styly psát přímo do tagů:✅ style="color: red;"❌ <style>p {color: red}</style>
Struktura pomocí tabulek
Většina e-mailových klientů nemá plnou podporu moderního HTML/CSS, proto je pro layout bezpečnější používat <table>, raději než <div>.
Pevná šířka a zarovnání
Doporučujeme nastavit šířku maximálně na 600px (standardní šířka pro e-maily) a text a obrázky zarovnávat pomocí align nebo text-align.
Responsivita
Pokročilé media queries často nefungují (hlavně pro Outlook), doporučujeme místo toho používat jednoduché layouty s velkým písmem a dostatečnými mezerami.
Používejte web-safe fonty
Např. Arial, Verdana nebo Georgia. Na načtení Google Fonts ani jiných specifických fontů se nedá 100% spolehnout.
Odkazy nastavujte bezpečně
Pro odkazy vždy používejte https://..., tlačítka řešte jako odkazy ve stylizovaném <a> tagu, raději než <button>.
Nepoužívejte JavaScript
E-mailoví klienti JavaScript nepodporují, navíc spam filtry je mohou vyhodnotit jako bezpečnostní riziko a váš e-mail nakonec skončí ve spam složce.
Bezpečné zobrazení obrázků
Outlook, Gmail, Apple Mail a další často blokují obrázky cíleně, kvůli ochraně soukromí, kvůli tomu bohužel není možné 100% zaručit, že se obrázky načtou automaticky a vždy. Dodržením základních pravidel lze ale šanci značně zvýšit:
- Hostujte obrázky na spolehlivém serveru - nedoporučujeme používat odkazy na Google disk nebo Dropbox, které často nejsou "embed-friendly".
- Vždy používejte absolute URL - obrázek musí být načítán z veřejného webového serveru.
- Nepoužívejte obrázky ve formátu .svg - raději volte .png
- Vkládejte "alternativní text", aby v případě nezobrazení obrázku host věděl, co tam mělo být zobrazeno (např. "Logo").
- Používejte display: block a nastavujte rozměry - zabráníte tím nechtěným mezerám a pomůžete správnému zobrazení.
- Optimalizujte velikost obrázků - ideální velikost je max 100-200 kB.
- Nepoužívejte base64 vkládání (inline obrázky) - ač technicky funkční, většina e-mailových klientů je buď přímo zablokuje nebo neukáže správně.
Vyhněte se iframe, form, embed, video
Tyto prvky nejsou většinou e-mailových klientů vůbec zobrazeny.
Nenechávejte prázdné buňky/tabulky
Někteří e-mailoví klienti (např. Outlook) prázdnéí buňky vůbec nezobrazí a tím rozhodí celý design. Vkládejte např. pro výplň bez rizika.
Testujte různé schránky
Před nasazením otestujte odeslání na Gmail, Seznam.cz, Outlook, mobilní zařízení, abyste měli jistotu, že se váš design v různých e-mailových klientech nerozbije (např. Gmail může ignorovat margin, je proto lepší používat padding).
Nespoléhejte na AI
AI nástroje jako je Chat GPT, Claude apod. jsou dobří pomocníci, ale nenechte se unést na první pohled krásně vypadající šablonou. AI nástroje často fabulují a i při sebelepším promptu vám mohou naservírovat "poškozenou" šablonu - v tomto případě platí "důvěřuj, ale prověřuj".
BONUS:
Používejte vlastní e-mailovou doménu (např. @hoteltime.com) - do vaší aplikace vám umíme nastavit vlastní poštovní server.Mějte dobře nastavené SPF, DKIM a DMARC.Nepoužívejte podezřelý obsah, jako je málo textu, ALL CAPS či velké množství obrázků.Přidejte do e-mailu i čistý textový fallback - v nastavení šablon vaší aplikace pro to najdete samostatné textboxy označené jako "Textová verze".
Jak nahrát a aktivovat šablony |
Jakmile máte šablonu připravenou a otestovanou, můžete si ji nahrát přímo v aplikaci:
- Přejděte do Concierge > Seznam šablon
- Klikněte na ikonu tužky u příslušného jazyka
- Vložte HTML kód šablony do editoru
Potřebujete upravit jazykové mutace?
V sekci Concierge > Concierge nastavení si můžete sami určit:
- které jazyky mají být dostupné pro danou šablonu (aktivace/deaktivace),
- jaký jazyk má být výchozí – ten se použije v případě, že host pochází ze země, pro kterou nemáte šablonu definovanou.
Náhled před uložením
Před uložením si můžete zobrazit náhled pomocí tlačítka „Test šablony“ – zobrazí se verze s testovacími daty.
Pozor: Náhled v prohlížeči slouží pouze pro základní kontrolu. Výsledné zobrazení se může lišit v konkrétním e-mailovém klientovi (např. Outlook nebo Gmail).Uložení a aktivace
Kliknutím na tlačítko „Uložit“ se šablona okamžitě aktivuje a bude použita pro všechny budoucí e-maily tohoto typu.