Karta Import w oknie New Email pozwala zacząć od istniejącego kodu e-maila zamiast budować każdy Row i Column od zera. Wklej HTML lub MJML albo wybierz plik, a następnie sprawdź źródło, zanim utworzysz edytowalną ramkę Emailify.

Import jest funkcją eksperymentalną i jest obecnie dostępny w lokalnie włączonych wersjach deweloperskich. W standardowej wersji wtyczki jest ukryty. Poniższe kroki dotyczą sytuacji, gdy okno New Email zawiera kartę Import.

Obsługiwane źródła

• HTML: wklej kod HTML e-maila albo wybierz plik .html lub .htm.
• MJML XML: wklej kompletny dokument <mjml> albo wybierz plik .mjml lub .xml.
• MJML JSON: wklej standardowe drzewo komponentów MJML albo wybierz plik .json.
• Skopiowane pakiety e-maili: wklej pakiet z eksperymentalnego rozszerzenia Copy to Emailify.

Dane wejściowe nie mogą przekraczać 2 MB. Kod MJML po skompilowaniu do HTML również musi zmieścić się w tym limicie. Wiadomości .eml, pliki ZIP i dowolne pliki JSON nie są obsługiwane. W przypadku wiadomości .eml przed importem wyodrębnij jej treść HTML i zadbaj o to, aby obrazy były dostępne.

Używaj dostępnych adresów URL obrazów. Obrazy wymagające logowania, pliki lokalne i odwołania do załączników, takie jak cid:, może być trzeba zastąpić zasobami hostowanymi w internecie.

Szukasz e-maila do wypróbowania? Wejdź na Really Good Emails, otwórz dowolny e-mail i wybierz Code, aby zobaczyć jego kod HTML. Skopiuj HTML, wklej go w pole Email code na karcie Import w Emailify, a następnie kliknij Preview Import, aby go sprawdzić przed utworzeniem e-maila.

Import e-maila

1. Otwórz Emailify w Figmie.
2. Kliknij ikonę + obok wyboru e-maila, aby otworzyć okno New Email.
3. Wybierz kartę Import na końcu rzędu kart.
4. Wklej kod e-maila w pole Email code, a następnie kliknij Preview Import. Możesz też kliknąć Choose file, aby wczytać i przeanalizować obsługiwany plik.
5. Sprawdź Preview i ewentualne Notes. Upewnij się, że źródło zawiera oczekiwane teksty, obrazy i tła.
6. Wpisz Email name, a następnie kliknij Create Email.
7. Obejrzyj utworzoną ramkę Emailify i jej edytowalne warstwy.
8. Przed eksportem sprawdź wygenerowaną wersję desktopową i mobilną w podglądzie HTML Emailify.

Panel Import pokazuje podgląd źródłowego e-maila. Nie pokazuje ostatecznego HTML eksportowanego z odtworzonych warstw Emailify. Zawsze sprawdzaj osobno utworzoną ramkę i podgląd wygenerowany przez Emailify.

Edycja źródła usuwa wcześniejsze przygotowanie importu. Przed utworzeniem zaktualizowanego e-maila ponownie kliknij Preview Import.

Import MJML

Podaj jeden kompletny dokument MJML z jednym mj-body. Na przykład:

<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Odpowiednik w JSON używa pól tagName, attributes, children i content:

{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}

Emailify waliduje MJML za pomocą MJML4, renderuje go do HTML, a następnie odtwarza edytowalne warstwy z tego HTML. Nie jest to bezpośrednie odtworzenie oryginalnego drzewa komponentów MJML. Po imporcie sprawdź niestandardowy CSS, fonty, odstępy i zachowanie responsywne.

• Przed importem wstaw bezpośrednio treść mj-include – dołączane pliki nie są wczytywane.
• Zastąp mj-raw edytowalnymi komponentami MJML albo zaimportuj jego wyrenderowany HTML do przejrzenia.
• Używaj statycznych wersji akordeonów i karuzel MJML – komponenty interaktywne nie są obsługiwane jako edytowalne importy.
• Usuń deklaracje XML DOCTYPE i encji. Przed ponowną próbą popraw nieprawidłową strukturę komponentów lub atrybuty.

Sprawdzanie wyniku

Porównaj utworzony e-mail ze źródłem w wersji desktopowej i w wąskiej szerokości mobilnej, na przykład 375px. Sprawdź wszystkie teksty, obrazy, obrazy tła, przyciski i adresy docelowe linków, a następnie przyjrzyj się układaniu kolumn, zawijaniu tekstu i wypełnieniu.

Import próbuje odwzorować źródło w strukturze układu obsługiwanej przez Emailify. Złożone zagnieżdżenia, niestandardowy CSS i niedostępne zasoby mogą wymagać ręcznych poprawek. Udane przygotowanie źródła nie gwarantuje dokładnej zgodności wizualnej ani poprawnego dostarczania we wszystkich klientach poczty.

Jeśli przygotowanie się nie powiedzie, otwórz Notes, aby zobaczyć zgłoszony problem. Popraw źródło lub zastąp niedostępne zasoby, a następnie ponownie uruchom podgląd. Jeśli utworzony układ wymaga poprawek, skorzystaj z Rows, Columns i ustawień responsywnych, a potem postępuj zgodnie z przewodnikiem po testowaniu e-maili.