E-Mails an eine eigene Webhook-URL senden

Sende erzeugtes HTML oder den MJML-Quellcode aus Emailify als JSON-Webhook-Payload an deinen eigenen Endpunkt.

Wähl im Export-Panel von Emailify in der Dropdown-Liste die Option Custom Webhook URL und füge dann deinen eigenen URL-Endpunkt ein, der dafür eingerichtet ist, den JSON-Payload von Emailify zu verarbeiten.

Wenn du so weit bist, klick auf den Button POST. Emailify exportiert dann die in Figma ausgewählten E-Mails und sendet sie als POST-Request an deinen eigenen Webhook-Endpunkt.

Deine Bilder werden automatisch in unser CDN hochgeladen und im html-String des Payloads als src-Attribut aller ``-Tags eingefügt.

Dein Code wird standardmäßig als HTML exportiert. Wenn dein Endpunkt eine andere Übergabe braucht, kannst du in den Webhook-Exportoptionen MJML Source Code oder ein plattformspezifisches Format wählen.

Das JSON-Payload-Objekt, das per POST an deine URL gesendet wird ​

Der JSON-Payload von Emailify enthält die unten aufgeführten Schlüssel und Werte. Stell sicher, dass deine eigene Webhook-URL diesen Payload verarbeiten kann. Wie du ihn verwendest, bleibt dir überlassen.

{
  "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>"
}

MJML-Quellcode an einen CI-Workflow senden ​

Wähl im Formatwähler des Webhooks MJML Source Code, wenn dein Endpunkt den erzeugten MJML-Quellcode zur Validierung oder Kompilierung braucht. Wähl dieselbe MJML-Version, die dein CI-Workflow verwendet. Emailify ergänzt die Felder mjml und mjmlVersion und behält das kompilierte html-Feld bei:

json
{
  "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"
}

Der Wert von mjmlVersion ist mjml4 oder mjml5, passend zur in Emailify gewählten Version. Dein Endpunkt kann das MJML speichern, eine CI-Validierung auslösen und den späteren Upload zu deiner E-Mail-Plattform der CI überlassen. Mit den unten beschriebenen eigenen JSON-Feldern kannst du Workflow-Metadaten wie den Namen einer App, einer Vorlage, einer Umgebung oder einer Sprache hinzufügen.

Eigenen JSON-Body und eigene Header zum Payload hinzufügen ​

Optional kannst du in die unten genannten Eingabefelder deinen eigenen gültigen JSON-String eintragen. Er wird dann automatisch in das header-Objekt und/oder das data-Body-Objekt des Payloads übernommen, den das Plugin als POST-Request an deine Endpunkt-URL sendet:

  • Eigene Eigenschaften für das header-Objekt legst du im Feld Custom Request Headers (Optional) fest (zum Beispiel { "Authorization": "Bearer xyz" }).
  • Eigene Eigenschaften für das data-Objekt im Body legst du im Feld Custom Extra JSON Data (Optional) fest (zum Beispiel { "category": "emailify" }).
  • Alternativ kannst du eigene Eigenschaften für das data-Objekt im Body auch „pro E-Mail“ im Feld Extra Email-Specific JSON Payload Data (Optional) festlegen (zum Beispiel { "id": 26, "tag": "email", "edit": true }). Dieses Feld findest du unter jeder E-Mail in der Liste deines Export-Panels. Die Daten werden mit allen globalen JSON-Daten zusammengeführt, die du eventuell schon global (oben) festgelegt hast.

JSON-Payload per POST über einen Proxy-Server senden ​

Da Figma-Plugins in der Figma-App in einem abgeschotteten iFrame-Element laufen, haben sie keinen origin. Deine Webhook-URL, an die du den JSON-Payload per POST sendest, lehnt die Anfrage deshalb möglicherweise wegen Cross-Origin-Problemen (CORS) ab.

Um das zu umgehen, kannst du entweder deine eigene Webhook-Funktion so anpassen, dass Access-Control-Allow-Origin auf * (alle) gesetzt ist, oder du aktivierst beim Export deiner E-Mail an einen eigenen Webhook in den Einstellungen des Plugins Emailify den Schalter Use Proxy (standardmäßig aktiviert).

Mit aktiviertem Schalter Use Proxy wird deine Anfrage automatisch über einen Proxy-Server geleitet, bevor sie deine Webhook-URL erreicht. So hat die eingehende POST-Anfrage einen origin, was CORS-Probleme beheben sollte. Es handelt sich um eine reine Weiterleitung: Die JSON-Daten laufen direkt durch den Proxy und werden unverändert an deine eigene Webhook-URL weitergegeben.

Wenn die Einstellung Use Proxy aktiviert ist, kommen die über den Proxy-Server geleiteten Anfragen bei jedem Request von einer dynamischen IP-Adresse. Wenn du eine statische IP-Adresse brauchst (zum Beispiel, weil du eingehende Anfragen nur von bestimmten IPs zulässt, etwa aus dem IP-Bereich deines Büronetzwerks), deaktiviere diese Einstellung und passe deine Webhook-Funktion so an, dass Access-Control-Allow-Origin auf * gesetzt ist. Dann werden POST-Anfragen direkt vom Figma-Plugin angenommen (ohne Umweg über den Proxy-Server).