Deine E-Mails zu Customer.io hochladen

Lade E-Mails per API direkt als Design-Studio-E-Mails oder Vorlagen zu Customer.io hoch oder exportiere eine ZIP-Datei, um das HTML manuell einzufügen.

Video-Tutorial: E-Mails zu Customer.io hochladen

Dieses Video zeigt dir, wie du HTML-E-Mails aus dem Figma-Plugin Emailify manuell zu Customer.io hochlädst.

Emailify bietet zwei Exportoptionen für Customer.io:

  • Customer.io (API) lädt deine E-Mails direkt als E-Mails oder wiederverwendbare E-Mail-Vorlagen in das Design Studio von Customer.io hoch.
  • Customer.io (Zip) exportiert eine ZIP-Datei, deren Inhalt du manuell in Customer.io einfügen kannst.

Direkt in das Design Studio von Customer.io hochladen ​

Wähl im Export-Panel von Emailify in der Dropdown-Liste die Option Customer.io (API), füge einen gültigen App API Key von Customer.io ein und wähl die Customer.io-Region, die zu deinem Workspace passt.

Wenn dein Customer.io-Workspace in der EU gehostet wird, wähl in Emailify die Region EU. Andernfalls lass die Standardregion US ausgewählt.

Mit der Einstellung Upload As legst du fest, ob Emailify in Customer.io wiederverwendbare E-Mail-Vorlagen oder normale Design-Studio-E-Mails erstellt. Aus Gründen der Abwärtskompatibilität ist standardmäßig Template eingestellt. Wenn du so weit bist, klick auf den Button Upload To Customer.io. Emailify exportiert dann die in Figma ausgewählten E-Mails als HTML und lädt sie automatisch in das Design Studio von Customer.io hoch.

Du brauchst einen App API Key von Customer.io, der in deinem Customer.io-Workspace Design-Studio-E-Mails erstellen darf.

Beim Upload über die Customer.io-API lädt Emailify unterstützte E-Mail-Bilder standardmäßig zu Customer.io Assets hoch. Dafür nutzt es in Customer.io Assets einen Ordner emailify und legt ihn automatisch an, falls er noch nicht existiert. Bilder, die Customer.io Assets nicht annimmt, etwa Bilder über dem Dateilimit von 2 MB bei Customer.io, werden als Fallback zu Hypermatic hochgeladen. So kann die Design-Studio-E-Mail oder -Vorlage trotzdem auf eine gehostete Bild-URL verweisen.

Aus Emailify hochgeladene E-Mails und Vorlagen in Customer.io aktualisieren ​

Wenn deine E-Mails oder Vorlagen in Customer.io automatisch aktualisiert statt bei jedem Upload neu angelegt werden sollen, kannst du in den Exporteinstellungen des Plugins den Schalter Enable Updatable Templates aktivieren (bzw. Enable Updatable Emails, wenn die Einstellung Upload As auf Email steht).

Damit wird automatisch ein customerioEmailId- oder customerioTemplateId-Wert an den Ebenennamen des hochgeladenen Figma-Frames angehängt. Wird derselbe Frame beim nächsten Export aus dem Plugin erneut über die API zu Customer.io hochgeladen, wird diese ID wiederverwendet.

Hinweis: Der Schalter Enable Updatable Templates bzw. Enable Updatable Emails muss schon vor dem Upload deiner ersten E-Mail oder Vorlage aktiviert sein. Nur dann wird die ID der ursprünglichen E-Mail oder Vorlage in Customer.io an den Namen deines Figma-Frames angehängt. Diese ID wird dann bei allen künftigen Uploads genutzt, um dasselbe Element in deinem Customer.io-Konto zu aktualisieren (statt jedes Mal ein neues anzulegen) – vorausgesetzt, der jeweilige Schalter bleibt ebenfalls aktiviert.

Um E-Mails oder Vorlagen in Customer.io zu aktualisieren, brauchst du einen App API Key für denselben Customer.io-Workspace und dieselbe Region, in die ursprünglich hochgeladen wurde.

ZIP-Export manuell zu Customer.io hochladen ​

Wähl im Export-Panel von Emailify in der Dropdown-Liste die Option Customer.io (Zip). Wenn du so weit bist, klick auf den Button Export For Customer.io, um die in Figma ausgewählten E-Mails als HTML zu exportieren.

Wenn der Export fertig ist, lade die .zip-Datei auf deinen Computer herunter und entpacke sie. Öffne dann die Datei index.html im Ordner mit dem Namen deiner E-Mail in einem Code- oder Texteditor und kopiere das gesamte HTML aus der Datei. Danach:

  • Melde dich bei deinem Customer.io-Konto an.
  • Klapp in der Admin-Navigation den Menüpunkt Content auf.
  • Klick dann auf den Menüpunkt Email Layouts.
  • Klick auf den Button Create Layout.
  • Klick auf die Option Start from scratch.
  • Gib deinem Layout einen Namen und klick auf Create Layout.
  • Füge das kopierte HTML aus der exportierten index.html-Datei in den Editor im Tab Edit ein.
  • Klick auf den Button Save changes.

Ein komplett leeres Layout in Customer.io erstellen ​

Achte darauf, ein komplett leeres Layout zu verwenden! Customer.io fügt jedem neu erstellten Layout standardmäßig eigene HTML-Tags hinzu (zum Beispiel head, body usw.). Du musst diesen Code entfernen, sonst sieht deine HTML-Vorlage beim Versand kaputt aus.

Wenn du in Customer.io eine E-Mail erstellst, musst du ein Layout auswählen. Dieses muss komplett leer sein, damit nur deine eigene HTML-Vorlage gerendert wird.

Ein E-Mail-Layout in Customer.io auswählen

Wie du im Screenshot unten siehst, ist ein Layout, das leer aussieht, gar nicht leer (es enthält automatisch die <html>-Tags, die den Inhalt deiner HTML-Vorlage umschließen).

Standard-HTML in einem Customer.io-Layout

Um das zu beheben, musst du das HTML, das Customer.io deinem leeren Layout hinzufügt, manuell entfernen und nur das Tag content stehen lassen (siehe unten).

Leeres Customer.io-Layout nur mit dem Tag content

Sobald das Layout gespeichert ist und nur noch das Tag content enthält, sollte deine eigene HTML-Vorlage wie erwartet gerendert werden.