Szablony transakcyjnych wiadomości e-mail typu open source

Podczas konfigurowania nowego konta SendGrid tworzenie zestawu szablonów wiadomości e-mail dla konta jest jednym z najważniejszych zadań do wykonania. Jeśli planujesz wysyłać wiadomości e-mail za pośrednictwem naszego interfejsu API dla swojej aplikacji lub usługi, najprawdopodobniej będziesz potrzebować kilku różnych typów szablonów wiadomości e-mail. Niektóre z najczęstszych to resetowanie hasła, potwierdzenia e-mailem i pokwitowania.

Chociaż w Internecie dostępny jest szeroki wybór gotowych szablonów wiadomości e-mail, znalezienie zestawu, który można łatwo dostosować do Twojej marki, nie zawsze jest łatwe.

Ważne jest również, aby dokładnie przetestować szablony w popularnych klientach poczty e-mail. Ten proces może być czasochłonny i spowolnić proces konfiguracji konta SendGrid i rozpoczęcia wysyłania wiadomości e-mail.

Zdałem sobie sprawę, że zespół SendGrid może zapewnić wartość naszym klientom, tworząc zestaw szablonów wiadomości e-mail typu open source, z których użytkownicy mogą korzystać w celu uwzględnienia tych typowych przypadków użycia. Szablony są nie tylko łatwe do dostosowania, ale także szybko się przygotujesz i wyślesz!

Nasz zestaw szablonów, który nazywamy „Wklej”, obejmuje 5 przypadków użycia:

• Resetowanie hasła
• Potwierdzenie e-mailem
• Listy powitalne
• Wpływy kasowe
• Streszczenia (dzienne, tygodniowe lub miesięczne)

Pobierz szablony na GitHub

Aby rozpocząć korzystanie z naszych szablonów wklejania, przejdź do serwisu GitHub i sklonuj repozytorium lub pobierz folder szablonów wklejania. Warto również wspomnieć, że te szablony znajdują się w repozytorium szablonów wiadomości e-mail typu open source, do którego inni użytkownicy SendGrid pomogli podczas naszego ostatniego Hacktoberfest.

Dostosowywanie szablonów wklejania

Gdy masz lokalną kopię szablonów wklejania, otwórz je w preferowanym edytorze kodu (polecam VSCode lub Atom; oba są bezpłatne).

Polecam zacząć od base.html, ponieważ zawiera większość komponentów wielokrotnego użytku, które można znaleźć w wielu innych szablonach. Wszystkie te szablony mają wspólną strukturę dla kodu HTML i chociaż w dokumencie istnieje kilka stylów podstawowych, większość stylów znajduje się w tekście.

Podczas przeczesywania kodu HTML zauważysz wiele komentarzy HTML, które wskazują, gdzie zaczynają się i kończą bloki. Są to ważne uwagi, które pomogą Ci przeglądać szablony i zaczynać je modyfikować.

Zauważysz również style elementów HTML dla kolorów tła, typografii, odstępów itp. Zachęcam do eksperymentowania z nimi, aby dowiedzieć się, jak zmieniają wygląd i działanie tych szablonów.

Dodaj swoje logo do szablonów

Jedną z pierwszych rzeczy, które będziesz chciał zrobić, jest zastąpienie logo szablonów wklejania własnym. Możesz szybko znaleźć blok logo, wyszukując jego komentarz HTML, wskazujący jego miejsce początkowe:

W tym bloku będziesz chciał zlokalizować tag kotwicy (<a> ) i zmienić HREF na swój adres URL. Szablon powinien być domyślnie połączony ze stroną główną SendGrid.

Po dostosowaniu adresu URL zamieńmy logo Wklej na własne. Zalecam przechowywanie logo w miejscu, do którego można łatwo utworzyć łącze, na przykład na serwerze internetowym lub w sieci CDN. Po wymianie źródła logo dostosuj style wbudowane tak, aby szerokość/wysokość były prawidłowe — będzie to zależeć od proporcji Twojego logo. Domyślnie logo Wklej ma rozmiar 48 pikseli, więc ustawiliśmy style szerokości na 48 pikseli.

Przykład:

W tym przykładzie adres URL logo wklejania jest przywoływany wraz z niektórymi stylami szerokości, aby ustawić go na żądany rozmiar 48 pikseli. Dostosuj te wartości do własnego logo, aby upewnić się, że wygląda ostro.

Dostosowywanie kolorów tła

Jak wspomniano powyżej, kolor tła jest ustawiany na różnych blokach, aby ustalić domyślny styl szablonów wklejania (szare i białe). Możesz to łatwo zmienić (i powinieneś), aby pasował do kolorów Twojej marki.

Najprostszym sposobem na przeskakiwanie między tymi stylami jest użycie edytora do wyszukiwania stylów wbudowanych, koloru bgcolor i koloru tła. Wartość tych właściwości można zastąpić wartościami szesnastkowymi (np. #000000) lub nazwami kolorów (np. czarny). Podczas pracy nad tymi zmianami łatwo jest zachować zakładkę, jeśli otworzysz jeden z szablonów w preferowanej przeglądarce i odświeżysz go w miarę wprowadzania zmian.

Przykład:

W tym przykładzie tag body jest stylizowany na jasnoszary kolor tła. Ta wartość koloru i inne w szablonie powinny być dostosowane do Twojej marki.

Dostosowywanie przycisków

Przyciski to jeden z najczęstszych elementów interfejsu w szablonach wiadomości e-mail. Użyjesz ich jako wezwania do działania, podkreślającego najważniejszą czynność, którą użytkownik ma wykonać, na przykład potwierdzenie adresu e-mail.

Domyślnie przyciski Wklej są stylizowane na niebieskie bloki z subtelnym promieniem obramowania, aby zaokrąglić rogi. Dostosowywanie tych przycisków do Twojej marki jest podobne do modyfikacji, które już wprowadziliśmy w kolorze tła naszego szablonu. Wyszukaj blok, korzystając z komentarza HTML, który dla Ciebie dodaliśmy:

Mamy kilka komórek tabeli, które mają zastosowane białe tło (#ffffff), aby utworzyć blok wokół przycisku, ale będziesz chciał znaleźć komórkę tabeli, która ma następujące style.

Przykład:

W tym przykładzie <td> ma bgcolor, który jest używany do ustawienia koloru przycisku, wraz z border-radius, aby delikatnie zaokrąglić rogi. Eksperymentuj z tymi stylami, aby uzyskać niepowtarzalny wygląd przycisków pasujących do Twojej marki.

Druga część naszego przycisku to kotwica (<a> ) w komórce tabeli pokazanej powyżej.

Ta kotwica steruje adresem URL, pod którym zostanie umieszczony przycisk po kliknięciu, a także stylami tekstu etykiety. Możesz dostosować style, aby dostosować etykietę na podstawie swoich preferencji i tego, co pasuje do Twojej marki.

Dostosowywanie typografii

Domyślnie szablony wklejania są ładowane do czcionki internetowej Source Sans Pro za pośrednictwem czcionek Google. Możesz użyć innej czcionki internetowej z kolekcji Google lub użyć standardowego zestawu czcionek dostępnych obecnie na większości komputerów (Arial, Georgia, Times itp.).

Jeśli planujesz używać innej czcionki internetowej, zapoznaj się z moimi poradami i poradami dotyczącymi tworzenia wiadomości e-mail, aby uzyskać przydatne wskazówki. Upewnij się, że przeczesujesz kod HTML w poszukiwaniu stylów wbudowanych, które odwołują się do rodziny czcionek i dostosuj je zgodnie z własnymi preferencjami.

Przykład:

W tym przykładzie <td> ma styl rodziny czcionek ustawiony na użycie Source Sans Pro, z pewnymi odwrotami do bardziej standardowych czcionek na wypadek, gdyby czcionka internetowa nie została załadowana.

Kończące myśli

Mam nadzieję, że te wskazówki pomogą Ci dostosować te szablony, aby pasowały do ​​Twojej marki i uruchomiły Cię na platformie SendGrid. W przyszłości mam nadzieję rozszerzyć nasze repozytorium szablonów e-mail o więcej szablonów, ale także o narzędzie do budowania, które znacznie przyspieszy proces dostosowywania.

Jeśli napotkasz jakiekolwiek problemy po drodze, zgłoś problem z repozytorium GitHub, a jeśli chcesz wnieść swój wkład, prześlij żądanie ściągnięcia. Szukasz więcej szablonów do eksperymentowania? Wypróbuj bezpłatne responsywne szablony wiadomości e-mail w formacie HTML firmy SendGrid.