Dodawanie treści dynamicznych i spersonalizowanych w Emailify

Dodawaj do e-maili treści dynamiczne, łącząc merge tagi z Twojej platformy e-mail marketingu z blokami własnego kodu w składni tej platformy.

Poradnik wideo: dodawanie treści dynamicznych do e-maili HTML w Figmie

Ten film pokazuje, jak dodać treści dynamiczne do e-maili HTML w Figmie za pomocą wtyczki Emailify.

Poradnik wideo: dodawanie dynamicznego feedu produktów do e-maili Klaviyo w Figmie

Ten film pokazuje, jak za pomocą wtyczki Emailify do Figmy dodać własne feedy produktów z platformy Klaviyo do własnych szablonów HTML.

Poradnik wideo: tworzenie w Figmie szablonu e-maila dla przepływu porzuconego koszyka w Klaviyo

Ten film pokazuje, jak za pomocą wtyczki Emailify do Figmy dodać własne przepływy porzuconego koszyka z platformy Klaviyo do własnych szablonów HTML.

Dodawanie treści personalizowanych dla konkretnej platformy ​

Spersonalizowany tekst, na przykład imiona odbiorców, dodasz za pomocą merge tagów od Twojego dostawcy usług e-mailowych (np. MailChimp, Klaviyo). Wystarczy wpisać merge tag w warstwach tekstowych Emailify.

Na przykład po dodaniu do treści warstwy tekstowej w Figmie Hello, %FIRSTNAME% lub Hello, *|FNAME|* (zależnie od składni i wartości Twojej platformy) merge tag zostanie automatycznie zastąpiony prawdziwymi danymi podczas wysyłki e-maila.

Te znaczniki różnią się w zależności od platformy, z której wysyłasz e-maile, więc sprawdź w dokumentacji szablonów swojego dostawcy usług e-mailowych, jakich znaczników możesz używać.

Dokumentacja zmiennych szablonów wybranych platform ​

Poniżej znajdziesz linki do dokumentacji niektórych (nie wszystkich) popularnych platform:

Dodawanie logiki if/else między warstwami Row, Wrapper i Hero ​

Warstwa typu 🧑‍💻 Custom Code pozwala wstawić własną logikę szablonów między wierszami w projektach. Upewnij się, że składnia jest poprawna dla platformy e-mail marketingu, z której korzystasz. Może to wyglądać mniej więcej tak:

{% if customer_type == 'premium' %}

Tutaj wiersz Emailify

{% else %}

Tutaj inny wiersz Emailify

{% endif %}

Dodawanie spersonalizowanych i dynamicznych obrazów ​

Adres URL obrazu dla wybranej warstwy obrazu w projekcie e-maila nadpiszesz, wpisując wartość w polu Override Image Src. Możesz użyć adresu URL obrazu, który jest już gdzieś przesłany (na przykład https://mycdn/img.jpg), albo zmiennej dynamicznej z języka szablonów Twojej platformy e-mailowej (na przykład { variable.my_image }). Przy eksporcie do HTML wartość zostanie automatycznie wstawiona do atrybutu src znacznika <img />.

Opcjonalne ustawianie wysokości (z szerokością „auto”) dla obrazu dynamicznego ​

Jeśli w przypadku obrazów dynamicznych chcesz kontrolować wysokość, a szerokość ma dopasować się naturalnie (bo wymiary pliku pod dynamicznym adresem URL mogą nie być znane z góry), zrób w Figmie następujące kroki:

  1. Włącz Lock aspect ratio dla warstwy obrazu w interfejsie Figmy.
  2. Ustaw wartość Max height dla warstwy obrazu w interfejsie Figmy.

Po tych ustawieniach obraz wyświetli się ze stałą wysokością (równą maksymalnej wysokości z Figmy) i automatycznie dopasowaną szerokością, zamiast domyślnego zachowania (stała szerokość, automatyczna wysokość). Dzięki temu obrazy dynamiczne zajmują właściwą przestrzeń w pionie i zachowują naturalne proporcje.

To zachowanie dotyczy tylko obrazów z dynamicznymi adresami URL; nie wpływa na statyczne obrazy eksportowane przez Emailify ani na obrazy na platformach MJML.

Przycinanie długich treści tekstowych ​

Długie znaczniki treści dynamicznych w projektach e-maili mogą czasem psuć projekt, sztucznie zwiększając wysokość niektórych elementów, obrazów tła itp., podczas gdy ostateczna treść (która w wysłanym e-mailu zastąpi znaczniki dynamiczne) może być krótsza niż sam znacznik.

Aby temu zapobiec, możesz ustawić przycinanie warstwy tekstowej w Figmie do wybranej maksymalnej liczby wierszy. Wykonaj te kroki:

  1. Kliknij warstwę tekstową w ramce Emailify w Figmie
  2. Ustaw ustawienie rozmiaru tekstu warstwy tekstowej na Auto width
  3. Otwórz panel Type settings (klikając ikonę ...)
  4. Ustaw opcję Truncate text na Truncate enabled
  5. Ustaw właściwość Max lines (poniżej) na maksymalną liczbę wierszy, na które może się rozciągać tekst
  6. Ustaw właściwość Horizontal resizing w Auto layout warstwy tekstowej na Fill container

Przycięcie działa tylko na płótnie Figmy, aby pełna wartość tekstu dynamicznego nie zajmowała więcej wysokości, niż powinna. Końcowy eksport HTML nie zawiera żadnego przycinania, bo tekst dynamiczny zostanie automatycznie zastąpiony prawdziwą treścią, gdy e-mail zostanie wysłany do odbiorców przez platformę e-mail marketingu, z której pochodzą znaczniki dynamiczne.

Wąskie przyciski mimo długiego tekstu zastępczego ​

Jeśli przycisk zawiera długą zmienną lub tekst zastępczy, który później zostanie zastąpiony krótszą datą lub etykietą, dopasuj rozmiar warstwy tekstowej do ostatecznej etykiety. W przeciwnym razie tekst zastępczy może sprawić, że wyeksportowany przycisk będzie za szeroki, a Outlook może zachować tę szerokość nawet po podstawieniu wartości przez platformę e-mailową.

  1. Zaznacz w Figmie warstwę tekstową wewnątrz przycisku (Button).
  2. Ustaw Horizontal resizing tej warstwy na Fixed width i wybierz szerokość, która zmieści oczekiwaną ostateczną datę lub etykietę.
  3. Otwórz Type settings, włącz Truncate text i ustaw Max lines na 1.
  4. Zostaw w warstwie tekstowej pełną zmienną lub tekst zastępczy, a potem ponownie wyeksportuj e-mail.
  5. Wyślij test przez platformę e-mailową, aby sprawdzić przycisk z ostatecznym tekstem, w tym w Outlooku, jeśli problem go dotyczy.

Przycięcie zmienia tylko sposób wyświetlania tekstu zastępczego na płótnie Figmy. Pełny tekst zastępczy pozostaje w eksportowanym HTML, aby platforma e-mailowa mogła go podstawić. Zostaw wystarczająco dużo miejsca na najdłuższą etykietę, jaką zamierzasz wysłać.

Dodawanie dynamicznych zmiennych kolorów i rodzin fontów ​

Dynamiczne zmienne kolorów ​

Jeśli chcesz, aby kolor tła, tekstu lub obrysu w projekcie e-maila był eksportowany jako dynamiczny fragment kodu (na przykład {{ primary_color }}) zamiast zwykłej wartości szesnastkowej koloru z Figmy (na przykład #000000), utwórz styl koloru w Figmie i upewnij się, że pole Name stylu koloru zawiera podwójne nawiasy klamrowe (na przykład {{ my_color_var_name }}). Wartość Name ze stylu koloru zostanie automatycznie użyta jako wartość CSS color, background-color lub border-color podczas generowania HTML we wtyczce Emailify.

Dynamiczne zmienne rodzin fontów ​

Podobnie, jeśli chcesz, aby dowolna wartość CSS font-family była eksportowana jako dynamiczny fragment kodu (na przykład {{ customer.font_family }}) zamiast zwykłej wartości fontu z Figmy (na przykład Arial, sans-serif), utwórz styl tekstu w Figmie i upewnij się, że pole Name stylu tekstu zawiera podwójne nawiasy klamrowe (na przykład {{ my_font_var_name }}). Wartość Name ze stylu zostanie automatycznie użyta jako wartość CSS font-family podczas generowania HTML we wtyczce Emailify.

Powtarzanie wiersza Data Table Row w pętli z danymi dynamicznymi ​

Aby przejść w pętli przez dane z platformy e-mailowej, zaznacz warstwę Data Table Row i otwórz Settings. Dodaj składnię pętli w polach Opening Code Wrapper (na przykład {% for product in collection.products %}) i Closing Code Wrapper (na przykład {% endfor %}). Emailify wstawi te znaczniki wokół elementu <tr></tr> tego wiersza w eksportowanym HTML.

Po dodaniu znaczników otaczających do warstwy Data Table Row możesz w razie potrzeby wypełnić warstwy wiersza treścią dynamiczną.

Możesz masowo zastosować ustawienia: otwórz Settings, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.