---
url: "/de/emailify/integrations/customer-io.md"
description: "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."
---

# 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.
[Embedded media](https://www.youtube-nocookie.com/embed/KQyaQy6gYps)

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 {#uploading-directly-to-customer-io-design-studio}

Wähl im Export-Panel von Emailify in der Dropdown-Liste die Option **Customer.io (API)**, füge einen gültigen [App API Key](https://docs.customer.io/integrations/api/app/) von Customer.io ein und wähl die Customer.io-Region, die zu deinem Workspace passt.

> **Note:** 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.

> **Note:** 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](https://docs.customer.io/integrations/api/app/#tag/assets/createAsset) 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 {#updating-customer-io-emails-and-templates-uploaded-from-emailify}

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.

> **Tip:** 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.

> **Note:** 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 {#manually-uploading-a-zip-export-to-customer-io}

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](https://fly.customer.io/login) 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 {#creating-a-totally-blank-layout-in-customer-io}

> **Warning:** **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](https://customer.io/docs/journeys/3-layouts-and-customerio/) auswählen. Dieses muss komplett leer sein, damit nur deine eigene HTML-Vorlage gerendert wird.

![Ein E-Mail-Layout in Customer.io auswählen](/assets/images/emailify/customer-io-one.jpg)

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

![Standard-HTML in einem Customer.io-Layout](/assets/images/emailify/customer-io-two.jpg)

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](/assets/images/emailify/customer-io-three.jpg)

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