W panelu eksportu Emailify wybierz z listy rozwijanej opcję Custom Webhook URL, a następnie wklej adres URL własnego endpointu, przygotowanego do obsługi ładunku JSON wysyłanego z Emailify.

Gdy wszystko będzie gotowe, kliknij przycisk POST, aby wyeksportować zaznaczone w Figmie e-maile i wysłać je jako żądanie POST na Twój endpoint webhooka.

Twoje obrazy zostaną automatycznie przesłane do naszego CDN i dodane jako atrybut src wszystkich znaczników `` we właściwości html wysyłanej w ładunku.

Kod jest domyślnie eksportowany jako HTML. Jeśli Twój endpoint potrzebuje innego formatu, w opcjach eksportu Webhook możesz wybrać MJML Source Code lub format konkretnej platformy.

Obiekt ładunku JSON wysyłany metodą POST na Twój adres URL

Ładunek JSON wysyłany z Emailify zawiera poniższe klucze i wartości. Upewnij się, że Twój webhook jest przygotowany do obsługi tego ładunku – możesz go wykorzystać w dowolny sposób.

{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "<html><head></head><body>Exported email HTML</body></html>"
}

Wysyłanie źródła MJML do przepływu CI

Wybierz MJML Source Code w selektorze formatu Webhook, gdy Twój endpoint potrzebuje wygenerowanego źródła MJML do walidacji lub kompilacji. Wybierz tę samą wersję MJML, której używa Twój przepływ CI. Emailify dodaje pola mjml i mjmlVersion, zachowując skompilowane pole html:

{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "<html><head></head><body>Compiled email HTML</body></html>",
  "mjml": "<mjml><mj-body>Generated source MJML</mj-body></mjml>",
  "mjmlVersion": "mjml4"
}

Wartość mjmlVersion to mjml4 lub mjml5, zgodnie z wersją wybraną w Emailify. Twój endpoint może zapisać MJML, uruchomić walidację w CI i pozwolić CI sterować późniejszym przesłaniem na platformę e-mailową. Za pomocą opisanych niżej własnych pól JSON możesz dodać metadane przepływu pracy, np. nazwę aplikacji, szablonu, środowiska lub języka.

Dodawanie własnej treści JSON i nagłówków do ładunku

Opcjonalnie możesz wpisać w poniższych polach własny prawidłowy ciąg JSON. Zostanie on automatycznie dołączony do obiektu header lub obiektu treści data ładunku, który wtyczka wysyła na adres URL endpointu jako żądanie POST:

• Własne właściwości obiektu header ustawisz w polu Custom Request Headers (Optional) (na przykład { "Authorization": "Bearer xyz" }).
• Własne właściwości obiektu treści data ustawisz w polu Custom Extra JSON Data (Optional) (na przykład { "category": "emailify" }).
• Możesz też ustawić własne właściwości obiektu treści data dla poszczególnych e-maili w polu Extra Email-Specific JSON Payload Data (Optional) (na przykład { "id": 26, "tag": "email", "edit": true }) pod dowolnym e-mailem na liście w panelu eksportu. Zostaną one scalone z globalnymi danymi JSON ustawionymi wyżej.

Wysyłanie ładunku JSON przez serwer proxy

Wtyczki Figmy działają w izolowanym elemencie iFrame w aplikacji Figma, więc nie mają żadnego origin. Dlatego adres URL webhooka, na który wysyłasz ładunek JSON metodą POST, może odrzucić żądanie z powodu problemów z CORS.

Aby to obejść, możesz ustawić w funkcji webhooka nagłówek Access-Control-Allow-Origin na * (wszystkie) albo włączyć w ustawieniach wtyczki Emailify przełącznik Use Proxy (domyślnie włączony) podczas eksportu e-maila na własny webhook.

Włączenie przełącznika Use Proxy automatycznie kieruje żądanie przez serwer proxy, zanim trafi ono na adres URL webhooka. Dzięki temu przychodzące żądanie POST ma origin, co powinno rozwiązać problemy z CORS. Proxy jedynie przekazuje żądanie: dane JSON przechodzą przez nie bezpośrednio i trafiają prosto na Twój adres URL webhooka.

Po włączeniu ustawienia Use Proxy żądania kierowane przez serwer proxy będą za każdym razem pochodzić z dynamicznego adresu IP. Jeśli potrzebujesz statycznego adresu IP (na przykład przyjmujesz żądania tylko z określonych adresów IP, takich jak zakres adresów w sieci biurowej), wyłącz to ustawienie i ustaw w funkcji webhooka nagłówek Access-Control-Allow-Origin na *, aby przyjmować żądania POST bezpośrednio z wtyczki do Figmy (bez przekierowania przez serwer proxy).