---
url: "/de/emailify/integrations/klaviyo.md"
description: "Emailify hat eine integrierte Anbindung an Klaviyo, mit der du HTML-E-Mails direkt aus dem Figma-Plugin in deine Klaviyo-Vorlagen hochlädst."
---

# Deine E-Mails zu Klaviyo hochladen

> Emailify hat eine integrierte Anbindung an Klaviyo, mit der du HTML-E-Mails direkt aus dem Figma-Plugin in deine Klaviyo-Vorlagen hochlädst.

### Video-Tutorial: Deine E-Mails zu Klaviyo hochladen

Dieses Video zeigt, wie du HTML-E-Mails aus dem Figma-Plugin Emailify zu Klaviyo hochlädst.
[Embedded media](https://www.youtube-nocookie.com/embed/7OCqmOsrAYk)

> **Tip:** Wenn du in deinen [Textabsätzen](/de/emailify/content/link-paragraphs) Links mit Klaviyo-Vorlagensyntax brauchst (zum Beispiel `{{ event.url }}`), blockiert das native Linkfeld von Figma sie als ungültige URLs. Um das zu umgehen, kannst du stattdessen das spezielle Klaviyo-Linkformat von Emailify verwenden, `https://klaviyo.invalid/?{{ event.url }}`. Emailify gibt dann im exportierten HTML die unveränderte Klaviyo-Vorlagensyntax aus.

Wähle im Export-Panel von Emailify die Option **Klaviyo** aus der Dropdown-Liste und füge dann einen gültigen privaten Klaviyo-API-Schlüssel ein (siehe die Schritte unten):

1. Melde dich bei Klaviyo an und öffne die [Einstellungsseite für Klaviyo-API-Schlüssel](https://www.klaviyo.com/settings/account/api-keys).
2. Klick auf den Button **Create Private API Key**.
3. Gib dem Schlüssel einen Namen (zum Beispiel „Emailify API Key“) und klick auf das Optionsfeld **Custom Key**.
4. Setz das Optionsfeld für den API-Scope **Templates** auf **Read/Write Access** (alle anderen API-Scopes können auf _No Access_ bleiben).
5. Klick auf dem Bestätigungsbildschirm nach dem Anlegen des Schlüssels im Bereich **Your Private Key** auf den Icon-Button **Copy**.
6. Füge den kopierten API-Schlüssel (er sieht ungefähr so aus: `pk_b3338b071136f98817d2a0e0a9581137ee`) in das Emailify-Plugin ein.

Wenn du so weit bist, klick auf den Button **Upload To Klaviyo**, um die in Figma ausgewählten E-Mails als HTML zu exportieren und automatisch auf deine Seite mit [Klaviyo-Vorlagen](https://www.klaviyo.com/email-templates/list) hochzuladen.

> **Info:** Wenn deine HTML-E-Mail kleiner als 102kb ist, nach dem Versand über Klaviyo in Gmail aber trotzdem gekürzt wird, liegt das am aktivierten Link-Tracking in Klaviyo. Es ersetzt deine ursprünglichen Link-URLs automatisch durch viel längere „Tracking-URLs“ und vergrößert so das versendete HTML. Um das zu verhindern, kannst du optional die Einstellung für Link-Tracking/GA in deinem Klaviyo-Konto ausschalten.

## Aus Emailify hochgeladene Klaviyo-Vorlagen aktualisieren {#updating-klaviyo-templates-uploaded-from-emailify}

Wenn Emailify automatisch dieselbe Klaviyo-Vorlage aktualisieren soll, statt jedes Mal eine neue anzulegen, kannst du optional den Schalter **Enable Updatable Templates** in den Exporteinstellungen des Plugins aktivieren, wenn die Option **Klaviyo** ausgewählt ist.

Dann hängt Emailify nach dem ersten erfolgreichen Upload automatisch einen Wert `klaviyoTemplateId` an den Namen des Figma-Frames an und verwendet diese gespeicherte Vorlagen-ID wieder, wenn derselbe Frame das nächste Mal zu Klaviyo hochgeladen wird.

> **Tip:** Achte darauf, dass der Schalter **Enable Updatable Templates** aktiviert ist, bevor du die Vorlage zum ersten Mal hochlädst. Erst dieser erste Upload speichert die ursprüngliche Klaviyo-Vorlagen-ID im Namen deines Figma-Frames für spätere Uploads.

> **Warning:** Damit wird nur die gespeicherte Vorlage in deiner Klaviyo-Vorlagenbibliothek aktualisiert. Wurde diese Vorlage bereits in einer Klaviyo-Kampagne oder einem Flow verwendet, legt Klaviyo für diese Nachricht eine Kopie an. Ein erneuter Upload aus Emailify ersetzt diese verwendeten Kopien also nicht automatisch.

## Hochgeladene Klaviyo-E-Mail-Vorlage in einer Kampagne verwenden {#using-your-uploaded-klaviyo-email-template-in-a-campaign}

1. Leg in Klaviyo eine neue [E-Mail-Kampagne](https://www.klaviyo.com/campaigns) an
2. Klick in der Liste auf der Seite **Templates** im Tab **Email:saved** auf den Namen deiner neuen Vorlage.
3. Klick im Vorschau-Popup auf den Button **Use template**.
4. Klick auf der Seite des Code-Editors auf den Button **Save** (**dieser Schritt ist wichtig**)
5. Klick nach der Meldung „Your changes have been saved.“ auf den Button **Back to Content**.
6. Plane deine E-Mail-Kampagne nach Bedarf.

## A/B-Tests mit eigenen HTML-Vorlagen in Klaviyo {#a-b-testing-custom-html-templates-in-klaviyo}

Klaviyo unterstützt A/B-Tests mit eigenen HTML-E-Mails, beim Anlegen des Tests wird Variation B aber automatisch als identische Kopie von Variation A erstellt. So testest du zwei verschiedene Emailify-Designs:

1. Gib den beiden Emailify-Frames in Figma eindeutige Namen, zum Beispiel **Summer Sale - Test A** und **Summer Sale - Test B**. Emailify verwendet diese Frame-Namen als Namen der gespeicherten Vorlagen in Klaviyo.
2. Lade beide Frames als separate gespeicherte Vorlagen zu Klaviyo hoch.
3. Erstelle deine Klaviyo-Kampagne mit der Vorlage Test A und klick dann über der Betreffzeile auf **Create A/B test**. Klaviyo legt Variation B als Kopie von Variation A an.
4. Öffne in einem anderen Browser-Tab die gespeicherte Vorlage Test B unter **Content > Templates**, öffne ihren Code-Editor und kopiere das gesamte HTML.
5. Kehr zur Kampagne zurück, öffne Variation B, klick auf **Edit**, ersetze das kopierte HTML von Test A durch das HTML von Test B und speichere deine Änderungen.
6. Gib beiden Variationen aussagekräftige Namen, sieh dir dann jede Version in der Vorschau an oder schick eine Testmail und prüfe die Nur-Text-Version, bevor du die Kampagne planst.

> **Tip:** Wenn du das Design oder den Inhalt der E-Mail testest, lass Betreffzeile und Absenderangaben gleich, damit sich nur eine Variable ändert.

Mehr zum Einrichten des Tests und zur Auswahl einer Gewinnermetrik findest du im [A/B-Testing-Leitfaden](https://help.klaviyo.com/hc/en-us/articles/115005228148) von Klaviyo.

## Bearbeitbare Texte/Bilder in Klaviyo (optional) {#editable-text-images-in-klaviyo-optional}

> **Warning:** **WICHTIG: Der neue Editor von Klaviyo fügt bearbeitbaren Textblöcken und Buttons automatisch Padding hinzu**. Leider musst du jeden dieser Werte manuell wieder auf „0“ setzen, damit die E-Mail wie dein ursprüngliches Design aus Figma aussieht. Folge dazu dem Video im Abschnitt **Automatische Padding-Überschreibungen von Klaviyo in bearbeitbaren Kampagnen beheben** weiter unten.

Wenn Inhaltsblöcke nach dem Upload der Vorlage zu Klaviyo bearbeitbar sein sollen, aktiviere in den Exportoptionen von Emailify den Schalter **Editable Content** und folge dann diesen Schritten in Klaviyo:

1. Leg in Klaviyo eine neue [E-Mail-Kampagne](https://www.klaviyo.com/campaigns) an
2. Klick im Kampagnenschritt **Content** auf die Option **Drag and Drop**
3. Klick auf den Tab **My Templates** und dann auf deine neue Vorlage
4. Klick auf den Button **Save** und dann auf **Back to Content**
5. Klick auf den Button **Edit Email**

### Automatische Padding-Überschreibungen von Klaviyo in bearbeitbaren Kampagnen beheben {#fixing-klaviyo-s-automatic-padding-overrides-in-editable-campaigns}

[Video](/assets/videos/emailify/export/klaviyo-padding-overrides.mp4)

Klaviyo hat [seinen Editor aktualisiert](https://help.klaviyo.com/hc/en-us/articles/13160284274459) und erzwingt ihn seit dem 6. Juni 2023 für alle Vorlagen. Wenn du HTML-E-Mails mit aktiviertem Schalter **Editable Content** aus Emailify exportierst, fügt Klaviyo deshalb leider standardmäßig automatisch rund ~18px zusätzliches Padding um jedes Textelement hinzu. Bei einer bearbeitbaren Vorlage geschieht das über ein Inline-Attribut `style` an einem neuen ``-Element, das Klaviyo in das HTML einfügt.

Wenn du in Emailify den Schalter **Force the padding added by Klaviyo's new editor to be 0px** aktivierst, wird automatisch zusätzliches CSS eingefügt, das dieses Padding in allen mobilen Clients und in Desktop-Clients außer Outlook (etwa Gmail) entfernt. _Outlook_ **stellt das Padding aber weiterhin dar**, solange du nicht beim Bearbeiten der E-Mail für deine Kampagne im Klaviyo-Editor jeden „Padding“-Wert aller bearbeitbaren Textblöcke deiner Vorlage manuell auf „0“ setzt.

## Einen dynamischen Produkt-Feed zu deinen Klaviyo-E-Mails hinzufügen {#adding-a-dynamic-product-feed-to-your-klaviyo-emails}

### Video-Tutorial: Einen dynamischen Produkt-Feed zu deinen Klaviyo-E-Mails hinzufügen

Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Produkt-Feeds in eigene HTML-Vorlagen einfügst.
[Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo)

Um deiner HTML-E-Mail-Vorlage in Emailify einen dynamischen Klaviyo-[Produkt-Feed](https://help.klaviyo.com/hc/en-us/articles/115005082787) hinzuzufügen, kannst du eine der Komponentenvorlagen im Tab **Ecomm** unter den Kategorie-Tabs des Emailify-Plugins verwenden.

Nachdem du die Komponente zu deinem Emailify-Frame hinzugefügt hast, ersetzt du in der eingefügten Komponente den Namen `YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE` durch den Namen deines eigenen Produkt-Feeds, den du in deinem Klaviyo-Konto angelegt hast.

Um eigene HTML-Produkt-Feeds in Klaviyo zu verwenden, musst du außerdem den Schalter **Editable Content** in den Exportoptionen von Emailify aktivieren. Damit kannst du nach dem Upload zu deinen Klaviyo-Vorlagen einen standardmäßigen „Product“-Block aus der Seitenleiste „Blocks“ des Klaviyo-Editors per Drag-and-drop in deine E-Mail ziehen.

Es lohnt sich, dem Video-Tutorial oben zu folgen und Schritt für Schritt zu sehen, wie das geht, damit deine Klaviyo-Vorlage richtig eingerichtet ist. Sonst werden die Daten aus deinem Produkt-Feed möglicherweise nicht angezeigt, wenn du die Schritte nicht korrekt befolgt hast.

> **Note:** **Wenn du dabei Hilfe brauchst**, wende dich bitte an einen Entwickler in deinem Team oder an [deinen Ansprechpartner beim Klaviyo-Support](https://www.klaviyo.com/support). Wir (Emailify) können keine technische Expertise bieten und nicht bei individuellen Umsetzungen dieser fortgeschrittenen Vorlagenfunktion in Klaviyo helfen.

### Bearbeitbaren Bereich für den Klaviyo-Produkt-Feed per Drag-and-drop manuell hinzufügen {#manually-adding-editable-region-to-drag-drop-the-klaviyo-product-feed}

Seit 2025 musst du diesen bearbeitbaren Bereich offenbar außerdem _zuerst_ manuell über den eigenen HTML-Code-Editor von Klaviyo in deine HTML-Vorlage einfügen und die Vorlage erneut speichern, bevor du sie in einer Kampagne verwendest, damit der dynamische Produkt-Feed Daten lädt:

```

        Drag and Drop your Klaviyo Product Feed Block Here

        NOTE: Remove this text element in Klaviyo's editor when you're done!

        Video Tutorial: https://www.youtube.com/watch?v=PaRSIxVLYlo

```

Du kannst ihn im Vorlageneditor von Klaviyo in die Zeile über ` **Note:** **Wenn du dabei Hilfe brauchst**, wende dich bitte an einen Entwickler in deinem Team oder an [deinen Ansprechpartner beim Klaviyo-Support](https://www.klaviyo.com/support). Wir (Emailify) können keine technische Expertise bieten und nicht bei individuellen Umsetzungen dieser fortgeschrittenen Vorlagenfunktion in Klaviyo helfen.