Edytor szablonów

Szablon to e-mail, który Frontmail renderuje i wysyła: temat, odbiorcy, treść HTML i tekstowa, a do tego schemat parametrów, które wypełnia twój formularz albo kod. Ta strona omawia listę szablonów i wszystkie części edytora. Zasady działania opisują artykuły Szablony HTML, Handlebars i Parametry i typy.

Tworzenie i edycja szablonów wymaga roli Właściciel, Administrator albo Programista. Obserwator i rola Płatności otwierają szablony w trybie Tylko do odczytu – widzą wszystko i mogą użyć Eksportuj (.json), ale nie mogą niczego zmieniać ani wysyłać.

Lista szablonów

Otwórz Szablony w menu bocznym.

Każdy wiersz pokazuje Nazwa (pod nią opis), ID szablonu (tpl_…, potrzebne w kodzie), Język, liczbę Parametrów i kiedy szablon został Zmieniony wraz z bieżącą wersją (np. 2 godziny temu · v3).

Limit szablonów i zamrożone szablony

Liczba szablonów zależy od planu – Free 3, Starter 10, Pro i Business bez limitu. Gdy osiągniesz limit, lista pokazuje komunikat Używasz 3 z 3 szablonów dostępnych w twoim planie., a przyciski nowych szablonów są nieaktywne. Właściciel i rola Płatności widzą tam od razu przycisk Przejdź na wyższy.

Po przejściu na niższy plan szablony ponad nowy limit zostają zamrożone (te najdawniej zmieniane) i dostają plakietkę Zamrożony. Zamrożony szablon zachowuje treść i wersje, ale wysyłka z jego użyciem kończy się błędem, dopóki nie przejdziesz znów na wyższy plan. Zobacz Zmiany planu.

Jak utworzyć szablon

Nad listą są trzy przyciski.

Nowy szablon (od zera)

1. Kliknij Nowy szablon.
2. Wpisz Nazwa i wybierz Język (np. English albo Polski).
3. Kliknij Utwórz.

Wybrany język staje się językiem domyślnym szablonu. Później możesz go zmienić na dowolny inny w Ustawienia → Ogólne → Język domyślny, a kolejne języki dodasz na pasku Języki.

Nowy szablon zaczyna jako prosty e-mail z formularza kontaktowego: parametry name, email i message, pole Do ustawione na twój adres i Reply-To ustawione na {{email}}. CAPTCHA jest wymagana, jeśli twoja organizacja dodała swoje klucze Turnstile, w przeciwnym razie jest na początku wyłączona. Dostosuj szablon do swoich potrzeb.

Z galerii

1. Kliknij Z galerii.
2. W prawym górnym rogu wybierz język i przefiltruj szablony według Kategorii (Formularze, Biznes, Rezerwacje, E-commerce…).
3. Kliknij Podgląd, żeby obejrzeć szablon w pełnym rozmiarze.
4. Kliknij Użyj szablonu. W twojej organizacji powstanie kopia, która otworzy się w edytorze.

Szablony z galerii są responsywne, obsługują tryb ciemny i mają przykładowe dane. Zobacz Galeria szablonów.

Import

1. Kliknij Importuj.
2. Wybierz Plik – plik .html albo szablon wyeksportowany z Frontmail (.json) – albo wklej HTML w polu Lub wklej HTML. Plik może mieć maksymalnie 2 MB.
3. Sprawdź Nazwa i kliknij Importuj.

Eksport .json przenosi treść, parametry, wersje językowe i większość ustawień. Usługa, usługa zapasowa i szablon automatycznej odpowiedzi nie są częścią eksportu, więc ustaw je ponownie w Ustawieniach. Po zaimportowaniu samego HTML otwórz Parametry i kliknij Wykryj z szablonu.

Edytor w skrócie

Nagłówek pokazuje nazwę szablonu, jego wersję (np. v3) i plakietki: Niezapisane zmiany, gdy masz niezapisane poprawki, oraz w razie potrzeby Zamrożony i Tylko do odczytu. Po prawej znajdziesz:

• Wyślij test – zobacz E-maile testowe,
• Zapisz – zobacz Zapisywanie,
• Więcej akcji (⋯) – Eksportuj (.json), Zastąp HTML i Usuń.

Pod nagłówkiem jest pasek Języki, a pod nim cztery karty: Treść, Ustawienia, Kod i Wersje.

Języki

Pasek Języki pokazuje język domyślny szablonu (oznaczony jako Domyślny) i osobny chip dla każdego tłumaczenia. Kliknij język, żeby go edytować – wszystko na kartach poniżej dotyczy wtedy tego języka. Tłumaczenie może mieć plakietkę Nieaktualny (język domyślny zmienił się od jego zapisania) albo Maszynowe (przetłumaczone maszynowo).

• Dodaj język – dodaje tłumaczenie: kopię języka domyślnego, tłumaczenie maszynowe z własnym kluczem API twojej organizacji albo pustą wersję.
• Gdy wybrane jest tłumaczenie: Przetłumacz ponownie, Oznacz jako aktualne (przy nieaktualnym) i Usuń język.

Tłumaczone są tylko temat, HTML, tekst i nazwa nadawcy – odbiorcy, parametry i ustawienia są wspólne dla wszystkich języków. Zobacz Tłumaczenia szablonów.

Treść

Po lewej edytujesz, po prawej widzisz podgląd na żywo i kontrole. Na górze jest pole Temat, pod nim pięć podkart.

HTML

Pełnoprawny edytor kodu HTML z podświetlaniem Handlebars. Wpisz {{, żeby dostać podpowiedzi twoich parametrów, helperów takich jak #if i #each oraz zmiennych systemowych. Zobacz przewodnik po Handlebars.

Wizualny

Prosty edytor tekstu sformatowanego dla szablonów, które są głównie tekstem: Pogrubienie, Kursywa, Nagłówek 1, Nagłówek 2, listy, Cytat, Link, Cofnij/Ponów i Wstaw parametr. Edytuje tylko zawartość <body>; nagłówek dokumentu i style pozostają bez zmian.

Wiele szablonów jest dla niego zbyt rozbudowanych. Jeśli HTML zawiera tabele układu, style inline, elementy div lub obrazki, bloki Handlebars (#if, #each) albo klasy CSS, zobaczysz komunikat Ten szablon jest zbyt złożony dla edytora wizualnego wraz z powodami. Możesz:

• Edytuj dalej HTML – wrócić do edytora kodu (zalecane),
• Edytuj mimo to (uprość) – otworzyć edytor wizualny; zapisanie z niego usunie układ i zostawi tylko proste formatowanie.

Tekst

Wersja tekstowa wysyłana razem z HTML. Domyślnie jest generowana automatycznie z HTML (Wersja tekstowa jest generowana automatycznie z HTML.). Kliknij Napiszę ją sam, żeby edytować ją ręcznie – jako punkt wyjścia posłuży aktualnie wygenerowany tekst. Automatyczne generowanie włączysz ponownie w Ustawienia → Wiadomość → Generuj wersję tekstową automatycznie.

Przykładowe dane

Formularz wygenerowany na podstawie twoich parametrów. Wartości są używane w podglądzie i w e-mailach testowych – nigdy nie są wysyłane w prawdziwych e-mailach. Listy mają przyciski Dodaj element, Przesuń w górę, Przesuń w dół i Usuń element. Jeśli wartość łamie regułę (jest za długa, ma zły typ, brakuje wymaganej wartości), pole pokazuje błąd – taki sam, jaki zwróciłoby API.

Parametry

Schemat parametrów: dla każdego parametru Nazwa, Typ i czy jest Wymagane.

Jak wykryć parametry z szablonu

1. Użyj parametrów w HTML, temacie albo odbiorcach, np. {{name}}.
2. Kliknij Wykryj z szablonu.

Frontmail dodaje każdy znaleziony parametr i informuje, ile z nich jest nowych (Znaleziono 2 nowe parametry.). Typ zgaduje na podstawie nazwy i sposobu użycia (np. parametr użyty w {{#each}} staje się listą) – potem sprawdź typy i reguły.

Jak dodać lub edytować parametr

1. Kliknij Dodaj parametr albo ołówek przy istniejącym parametrze.
2. Wypełnij:
   • Nazwa – litery, cyfry, _ i -, musi być unikalna,
   • Typ – Tekst (jedna linia), Tekst (wiele linii), E-mail, URL, Liczba, Tak / nie, Data, Wybór, HTML (oczyszczony) albo Lista,
   • Etykieta i Opis – wyświetlane w formularzu przykładowych danych,
   • Wymagane,
   • reguły dla danego typu: Min. długość, Maks. długość i Wzorzec (regex) dla typów tekstowych, Minimum/Maksimum dla liczb, Dozwolone wartości dla wyboru (oddzielone przecinkami), Pola elementu i Min. elementów/Maks. elementów dla list (np. name:string!, qty:number – ! oznacza wymagane),
   • Wartość domyślna i Przykładowa wartość (dla list w JSON).
3. Kliknij Zapisz.

Parametr usuniesz ikoną kosza. Typy i reguły wyjaśnia artykuł Parametry i typy.

Podgląd na żywo

Podgląd renderuje szablon dokładnie tak, jak robi to wysyłka, z twoimi przykładowymi danymi, na bieżąco podczas pisania. Nad nim możesz przełączać:

• Komputer / Telefon – szerokość podglądu,
• Jasny / Ciemny – symulację programu pocztowego w trybie ciemnym (twoje style prefers-color-scheme),
• HTML / Tekst – wersję HTML albo tekstową.

Nad e-mailem widzisz wyrenderowane Temat, Do i Reply-To. Jeśli szablonu nie da się wyrenderować (np. przez niezamknięty {{#if}}), zobaczysz komunikat Nie można wyrenderować szablonu z opisem błędu. W planie Free podgląd zawiera stopkę Wysłano przez Frontmail, tak samo jak prawdziwe e-maile. Więcej w artykule Podgląd i wysyłki testowe.

Kontrole

Pod podglądem sekcja Kontrole pokazuje problemy już podczas pisania – np. parametry używane, ale niezdefiniowane, zdefiniowane, ale nieużywane, błędną składnię Handlebars, brak tekstu alt albo za duży e-mail. Każda pozycja to Błąd albo Ostrzeżenie, często z numerem linii. Karta Treść pokazuje liczbę problemów na plakietce. Wszystko wygląda dobrze. oznacza, że nie ma nic do poprawienia.

Błędy blokują zapisanie zmian w treści (Przed zapisaniem popraw błędy wskazane w kontrolach.), ostrzeżenia – nie.

Ustawienia

Ogólne

• Nazwa i Opis – dla ciebie i twojego zespołu.
• Język domyślny – język głównej treści, wysyłany, gdy nadawca nie wskaże języka albo wskaże taki, którego szablon nie ma. Możesz wybrać dowolny język. Decyduje też o formatowaniu dat i liczb oraz o stopce planu Free w e-mailach w tym języku.

Wiadomość

Wszystkie pola mogą zawierać parametry, np. {{name}}.

• Temat (to samo pole co na karcie Treść).
• Do – kilka adresów oddziel przecinkami.
• Nazwa nadawcy i E-mail nadawcy – nadawca musi być taki, jakiego twoja usługa może używać. Zostaw E-mail nadawcy puste, żeby użyć domyślnego nadawcy usługi.
• Reply-To, CC, BCC.
• Wstawiaj CSS inline przy zapisie – przenosi style do atrybutów style, bo wiele programów pocztowych ignoruje <style>.
• Generuj wersję tekstową automatycznie – zalecane; wersja tekstowa powstaje z HTML przy każdym zapisie.

Doręczanie

• Usługa – która usługa e-mail wysyła ten szablon. Usługa domyślna oznacza tę usługę, która jest akurat ustawiona jako domyślna.
• Usługa zapasowa – używana automatycznie, gdy główna usługa zawiedzie. Wybierz Brak, jeśli nie chcesz usługi zapasowej. Zobacz Usługa zapasowa.
• Szablon automatycznej odpowiedzi – inny szablon wysyłany do osoby, która wypełniła formularz, po wysłaniu tego e-maila. Zobacz Automatyczna odpowiedź.

Ochrona

• Wymagaj CAPTCHA (Turnstile) – zalecane dla publicznych formularzy; blokuje boty, zanim zużyją twoje kredyty. Nowe szablony mają tę opcję włączoną, gdy tylko twoja organizacja doda własne klucze Turnstile w Bezpieczeństwo → Ochrona przed botami (Turnstile). Bez kluczy przełącznika nie da się włączyć, a notatka odsyła na stronę Bezpieczeństwo. Jeśli włączona jest opcja Zezwól na aplikacje mobilne, możesz go jednak włączyć – edytor ostrzeże, że aplikacje mobilne będą działać (używają wspólnego klucza Frontmail), ale żądania ze stron będą kończyć się błędem captcha_not_configured, dopóki nie dodasz kluczy. Zobacz Turnstile.
• Zezwól na dynamicznego odbiorcę – pozwala parametrom ustawiać Do/DW/UDW. Przy kluczu publicznym treść takiego szablonu jest zablokowana: CAPTCHA jest wymagana, nadawca / nazwa nadawcy / Reply-To muszą być stałe, parametry HTML nie są przyjmowane, teksty mają limit 500 znaków, a linki mogą prowadzić tylko do dozwolonych domen. Bez CAPTCHA edytor pokazuje ostrzeżenie z linkiem do konfiguracji Turnstile – możesz też wysyłać szablon ze swojego serwera kluczem prywatnym.
• Zezwalaj tylko na linki do dozwolonych domen – stosuje kontrolę linków do każdego żądania, także wysyłanego kluczem prywatnym. Domyślnie włączone w szablonach z galerii z dynamicznym odbiorcą.
• Zezwól na załączniki z formularza – przyjmuje pliki wysłane z żądaniem. Limit rozmiaru zależy od twojego planu.
• Stałe załączniki – pliki dołączane do każdego e-maila z tego szablonu. Zobacz Załączniki.

Zbieranie kontaktów

Zaznacz Zbieraj kontakty z tego szablonu, żeby zapisywać w Kontaktach każdego, kto wyśle formularz. Potem wybierz Parametr z e-mailem, opcjonalnie Parametr z imieniem, i wypisz w Dodatkowe pola nazwy parametrów (oddzielone przecinkami), które mają być zapisane przy kontakcie. Zobacz Kontakty.

Kod

Gotowy kod do wklejenia dla HTML / JS, React, Vue, Svelte, React Native, Node.js i cURL, już uzupełniony twoim kluczem publicznym, usługą i ID szablonu oraz wszystkimi jego parametrami.

Gdy szablon wymaga CAPTCHA, fragmenty kodu dla stron zawierają widżet Turnstile z kluczem witryny twojej organizacji (dopóki nie dodasz kluczy, jest w nich symbol zastępczy YOUR_TURNSTILE_SITE_KEY), a fragment dla React Native używa <TurnstileWebView> ze wspólnym kluczem mobilnym Frontmail – klucz witryny nie jest tam potrzebny.

Jeśli szablon ma tłumaczenia, wybierz Język nad kodem, żeby dodać opcję locale; bez niej e-maile są wysyłane w języku domyślnym.

Klucz publiczny można bezpiecznie używać w przeglądarce. Fragmenty dla Node.js i cURL są przeznaczone dla serwerów, gdzie zamiast niego używasz klucza prywatnego – zobacz Klucze publiczne i prywatne.

Jak wysłać testowy e-mail

1. Kliknij Wyślij test.
2. Wpisz adres w polu Wyślij do (twój adres jest wypełniony automatycznie).
3. Jeśli szablon ma tłumaczenia, wybierz Język (domyślnie ten, który jest otwarty w edytorze).
4. Opcjonalnie wybierz inną Usługę; Usługa szablonu używa tej z Ustawień.
5. Kliknij Wyślij test.

Wysyłka testowa używa bieżącej, niezapisanej treści z twoimi przykładowymi danymi, więc możesz wypróbować zmiany przed zapisaniem. Temat zaczyna się od [Test]. Wysyłki testowe są darmowe: do 20 na organizację dziennie (liczone według UTC), co pokazuje komunikat Dziś zostało N z 20 testowych e-maili. W Historii są oznaczone jako test.

Wersje

Każde zapisanie treści szablonu tworzy nową wersję. Karta Wersje wyświetla je z kolumnami Wersja, Autor, Zapisano i Notatka; bieżąca wersja jest oznaczona jako bieżąca.

• Zmiany – co się zmieniło w porównaniu z poprzednią wersją.
• Porównaj z bieżącą – różnice między tą wersją a bieżącą.

Porównanie otwiera się pod listą. Przełączaj między HTML, Tekst, Temat, Parametry i Odbiorcy, żeby zobaczyć poszczególne części.

Jak przywrócić starszą wersję

1. Kliknij Przywróć przy wybranej wersji.
2. Potwierdź. Jeśli masz niezapisane zmiany, zostaną zastąpione.

Przywrócenie tworzy nową wersję ze starą treścią – nic nie przepada. Ustawienia szablonu (usługa, ochrona, zbieranie kontaktów) nie są wersjonowane. Zobacz Wersje, diff i rollback.

Gdy na pasku Języki wybrane jest tłumaczenie, karta pokazuje zamiast tego jego własne wersje z kolumnami Na podstawie (wersja języka domyślnego, względem której je zapisano) i Pochodzenie (Ręczne albo Maszynowe).

Zapisywanie i wersje

• Kliknij Zapisz albo naciśnij Ctrl + S (na Macu ⌘ + S). Zobaczysz komunikat Zapisano jako wersję N.
• Zmiany treści (temat, HTML, tekst, odbiorcy, parametry) tworzą nową wersję; zmiany nazwy i ustawień zapisują się bez niej.
• Jeśli spróbujesz opuścić edytor z niezapisanymi zmianami, przeglądarka poprosi o potwierdzenie.

Gdy w międzyczasie zapisał ktoś inny

Jeśli współpracownik zapisał szablon, gdy go edytowałeś, Frontmail nie nadpisze po cichu jego pracy. Okno Ktoś inny zapisał ten szablon oferuje:

• Porównaj HTML – pokazuje jego HTML obok twojego,
• Wczytaj ich wersję – wczytuje jego wersję; twoje zmiany przepadną,
• Zachowaj moją – zapisuje twoją wersję na jego wersji.

Wskazówka

Wiadomości zawsze zapamiętują wersję szablonu, z którą zostały wyrenderowane. E-maile czekające w kolejce wstrzymanych wiadomości są wysyłane z wersją, która była bieżąca w chwili ich przyjęcia.

Zastępowanie HTML, eksport i usuwanie

Wszystkie trzy akcje są w menu Więcej akcji (⋯).

• Zastąp HTML – prześlij plik .html albo wklej HTML, który zastąpi treść tego szablonu. Parametry się nie zmieniają – sprawdź je (albo użyj Wykryj z szablonu) i zapisz.
• Eksportuj (.json) – pobiera szablon razem z tłumaczeniami jako plik .frontmail.json, który możesz zaimportować do innej organizacji.
• Usuń – usuwa szablon ze wszystkimi wersjami i tłumaczeniami. Wysłane już e-maile zostają w Historii.