mailinapp
Documentation menu

Produkt-Block

Eine Produktkarte mit einer Jetzt kaufen-Schaltfläche. Ihr Feld Checkout legt fest, wohin ein Tap tatsächlich führt. MailInApp-Checkout (Stripe) wickelt eine echte Zahlung direkt ab: kein Onlineshop, keine separate Checkout-Seite, die Sie bauen müssten, keine Kartendaten, die je die eigenen Server von MailInApp berühren. Auf externen Shop-Checkout verlinken schickt den Käufer stattdessen direkt zu einer Produktseite in Ihrem eigenen Shopify-/WooCommerce-Shop, für den Fall, dass Sie den Verkauf (und dessen Lagerbestand, Steuern, Rabatte) lieber auf dem Shop behalten möchten, den Sie bereits betreiben.

MailInApp-Checkout (Stripe)

Dies ist der Standardmodus des Blocks, und alles in diesem Abschnitt bezieht sich speziell darauf — siehe Stattdessen zum Checkout Ihres eigenen Shops verlinken weiter unten für den anderen Modus. Verbinden Sie zunächst Ihr eigenes Stripe-Konto unter Einstellungen → Zahlungen (Stripe Connect, Standard/OAuth); jede Zahlung wird direkt auf dieses Konto abgerechnet.

Anders als bei einer Abstimmung oder Bewertung kann ein Kauf nur sicher auf Stripes eigener gehosteter Checkout-Seite abgeschlossen werden, daher hat dieser Block überhaupt keine E-Mail-interne kinetische Stufe. Jetzt kaufen ist überall link-first, E-Mail eingeschlossen. Ein Tap darauf öffnet immer zuerst die gehostete Live-Ansicht auf einer Bestätigungsseite (/v/[token]/act?blockId=...&blockType=product&action=buy), die Name und Preis des Produkts erneut anzeigt und einen weiteren Tap („Weiter zur Zahlung“) verlangt, bevor tatsächlich etwas erstellt wird.

Diese Bestätigen-dann-POST-Form ist absichtlich so gestaltet: Ein Sicherheitsscanner oder Unternehmens-Proxy, der jeden Link in einer E-Mail vorab abruft, darf niemals eine echte Stripe-Checkout-Session bei einem bloßen GET auslösen. Nur der explizite POST von der Bestätigungsseite trifft auf POST /api/checkout. Diese Route ermittelt Preis, Name und Lagerbestand serverseitig aus der eigenen gespeicherten Konfiguration des Blocks, nie aus etwas, das der Client sendet. Anschließend erstellt sie eine Checkout-Session auf dem verbundenen Stripe-Konto des Inhabers, schreibt eine Bestellung im Status pending und leitet mit 303 zu Stripe weiter.

Eine Bestellung im Status pending zählt noch nicht als Verkauf. Nur POST /api/webhooks/stripe versetzt eine Bestellung jemals in den Status paid. Sie wird durch Stripes eigene Signatur authentifiziert, dasselbe Vertrauensmodell wie die HMAC-URLs der Countdown- und Open-Tracking-Endpunkte, da die Success-URL-Weiterleitung, auf der der Browser des Käufers landet, nur der Benutzerführung dient und nicht als Zahlungsnachweis vertraut werden kann.

Bei diesem Webhook prüft MailInApp den Lagerbestand vor der Bestätigung transaktional erneut. Wenn zwei Käufer um die letzte Einheit konkurrierten und beide durch Stripe kamen, wird die Zahlung des Verlierers automatisch zurückerstattet und er erhält eine entsprechende E-Mail-Benachrichtigung, statt dass das Produkt stillschweigend überverkauft wird. Ein bestätigter Kauf schreibt außerdem ein purchase-Interaktionsereignis, sodass Umsatz durch dieselbe Aggregations- und Projekt-Webhook-Pipeline fließt, die auch die Antworten jedes anderen Blocks nutzen. Siehe Interaktionen & Analysen.

Fulfillment hängt vom Feld Fulfillment ab:

  • Digital — Sie geben den Lieferinhalt (einen Download-Link oder -Code) direkt am Block ein; sobald der Webhook die Zahlung bestätigt, wird dieser Inhalt automatisch an den Käufer gemailt.
  • Physisch — Stripe Checkout erfasst als Teil des Zahlungsvorgangs eine Versandadresse; die Bestellung bleibt in der Bestellungen-Tabelle des Projekts, bis Sie auf Als erfüllt markieren klicken, was dem Käufer eine Versandbenachrichtigung per E-Mail sendet.

Lagerbestand ist eine optionale Obergrenze (0 = unbegrenzt). Versendetes HTML ist zum Sendezeitpunkt statisch, derselben Konvention folgend wie die Frist des Countdown-Blocks und das Beitrittsfenster des Meeting-Link-Blocks, sodass der Bestand eines begrenzten Produkts nicht als Text fest eingebacken wird. Stattdessen bettet die E-Mail ein kleines, serverseitig gerendertes Bestands-Badge-Bild ein („noch 3“ / „Ausverkauft“), das bei jedem Öffnen neu generiert wird, sodass es nie Tage nach dem Versand eine veraltete Verfügbarkeit zeigt. Auf der gehosteten Live-Ansicht wird der Lagerbestand live und dynamisch geprüft: Sobald bezahlte Bestellungen die Obergrenze erreichen, wird Jetzt kaufen vollständig durch ein deaktiviertes „Ausverkauft“-Element ersetzt, statt nur ein Badge neben einer weiterhin klickbaren Schaltfläche zu zeigen. So oder so ist die transaktionale Neuprüfung des Webhooks zum Zahlungszeitpunkt die eigentliche Quelle der Wahrheit; das Badge und die deaktivierte Schaltfläche sind lediglich UX-Annehmlichkeiten, nicht der Durchsetzungsmechanismus.

Wenn Sie einen Shopify- oder WooCommerce-Shop verbunden haben, erscheint über diesen Feldern ein Suchfeld Aus Shop importieren, das Produkte aus dem eigenen Katalog dieses Shops auflistet. Es bleibt automatisch im Hintergrund synchron, ohne separate Schaltfläche zum Drücken. Die Auswahl eines Produkts füllt Name, Beschreibung, Bild und Preis für Sie aus.

Wenn dieses synchronisierte Produkt eine bekannte Storefront-Seite hat (Shopifys eigenes Produkt-Handle oder die Seiten-URL von WooCommerce), schaltet der Import Checkout außerdem auf Auf externen Shop-Checkout verlinken und trägt diese Seite als URL der externen Produktseite ein. Ein importiertes Produkt ist dann bereit, in Ihrem eigenen Shop verkauft zu werden, ohne dass noch etwas zu konfigurieren wäre. Ein Produkt, das synchronisiert wurde, bevor Ihre Shop-Verbindung Seiten-URLs erfasste, bleibt stattdessen bei MailInApp-Checkout, ohne dass sich darunter etwas ändert.

Es handelt sich um eine einmalige Kopie, keinen Live-Link. Jedes Feld bleibt danach frei von Ihnen editierbar, und der beim Checkout tatsächlich berechnete Preis ist immer der, den der Block gerade enthält, nie erneut aus dem Shop abgerufen. Die folgenden Felder funktionieren mit oder ohne verbundenen Shop gleich — der Import ist eine Abkürzung, keine Voraussetzung.

Stattdessen zum Checkout Ihres eigenen Shops verlinken

Stellen Sie Checkout auf Auf externen Shop-Checkout verlinken und legen Sie eine URL der externen Produktseite fest — Ihre Shopify-Produktseite, ein Cart-Permalink, eine WooCommerce-Produktseite, jeder beliebige https://-Link —, um den eigenen Zahlungsablauf von MailInApp vollständig zu überspringen. Jetzt kaufen verhält sich dann genau wie eine einfache verlinkte Schaltfläche oder ein verlinktes Bild: keine Bestätigungsseite, kein /api/checkout, kein Stripe. Der Klick wird weiterhin erfasst (er zählt also zur Klick-Heatmap), und der Käufer landet direkt in Ihrem Shop, um den Kauf dort abzuschließen.

Da MailInApp nie Teil dieser Zahlung ist, gilt für ein externes Produkt nichts von der oben beschriebenen MailInApp-Checkout-Mechanik. Es gibt keine pending-/paid-Bestellung, keinen Eintrag in der Bestellungen-Tabelle, keine Fulfillment- oder Rückerstattungsaktionen, keine Durchsetzung des Lagerbestands oder Bestandsstatus-Badge und keinen durch den Kauf ausgelösten Journey-Schritt. Verfolgen Sie diesen Umsatz so, wie Sie jeden anderen Verkauf in Ihrem eigenen Shop verfolgen würden. Shopify-Bestell- und Checkout-Umsatzverfolgung behandelt, wie shopseitige Käufe der E-Mail zugeordnet werden, die sie ausgelöst hat.

Wenn URL der externen Produktseite leer gelassen wird oder kein gültiger https://-Link ist, während Checkout auf extern gesetzt ist, fällt der Block still auf ein Verhalten wie im MailInApp-Checkout-Modus zurück, statt eine tote Schaltfläche zu rendern.

Rabatt pro Produkt

Sobald ein Block über Aus Shop importieren befüllt wurde (er trägt also eine echte storeProductId, keine handgetippte URL) und Checkout auf extern gesetzt ist, erscheint ein Umschalter Rabatt pro Produkt. Schalten Sie ihn ein und legen Sie einen Rabatttyp (Prozentsatz oder fester Betrag), einen Rabattwert und Läuft ab (Tage nach Versand) fest. Die Studio-Arbeitsfläche zeichnet sich sofort mit demselben Rabatt-Badge und durchgestrichenen Preis neu, den Empfänger sehen werden — Sie müssen die Live-Ansicht nicht öffnen, um es zu prüfen. Kurz bevor die E-Mail jedes Empfängers gerendert wird, prägt MailInApp einen Einmal-Rabattcode in Ihrem verbundenen Shopify- oder WooCommerce-Shop — beschränkt auf diesen Empfänger und nur dieses Produkt, nicht Ihren gesamten Shop — und schreibt Jetzt kaufen zu einem Einlöse-Link um, der den Käufer zurück auf die eigene Seite dieses Produkts führt, wobei der Code bereits angewendet ist. Dies ist unabhängig vom projektweiten Rabattangebot auf der Senden-Seite (siehe Rabattangebot): Ein Projekt kann eines von beiden, beides oder keines verwenden, und jedes behält seine eigene Abklingzeit, sodass eines das andere nie blockiert. Ein Block, dessen Produkt nicht aus einem verbundenen Shop importiert wurde, zeigt stattdessen einen Hinweis, der erklärt, warum der Umschalter ausgeblendet ist. Schritt für Schritt durchgearbeitet in Shopify-Produktrabattcodes und WooCommerce-Produktrabattcodes.

Für Shopify-Shops kann ein optionaler App-Block dasselbe Badge auch direkt auf der Live-Produktseite selbst anzeigen, noch vor dem Checkout — Einrichtungsschritte finden Sie unter Den Rabatt auf Ihrer Produktseite anzeigen (Shopify).

Schlägt das Prägen für einen Empfänger fehl — kein passender Shop-Kunde, ein Token, das neu verbunden werden muss, eine kurzzeitige API-Störung —, wird seine E-Mail trotzdem versendet; Jetzt kaufen fällt dann einfach auf den einfachen, nicht rabattierten Produktlink des Blocks zurück.

Konfigurierbare Felder:

  • Name, Beschreibung, Bild — aus Ihrer Mediathek ausgewählt statt als URL eingetippt, oder durch Aus Shop importieren oben ausgefüllt.
  • Preis und Währung (USD, EUR oder GBP) — werden in jedem Fall auf der Karte angezeigt, auch im externen Modus, wo sie rein informativ sind.
  • Checkout — MailInApp-Checkout (Stripe) oder Auf externen Shop-Checkout verlinken.
  • URL der externen Produktseite — nur im externen Modus; wohin Jetzt kaufen den Käufer schickt.
  • Rabatt pro Produkt, Rabatttyp, Rabattwert, Läuft ab (Tage nach Versand) — nur im externen Modus und erst, sobald das Produkt des Blocks aus Aus Shop importieren stammt.
  • Fulfillment — Digital oder Physisch; nur im MailInApp-Checkout-Modus.
  • Lagerbestand — 0 für unbegrenzt; nur im MailInApp-Checkout-Modus.
  • Lieferinhalt — nur digital; der nach der Zahlung versendete Download-Link oder -Code; nur im MailInApp-Checkout-Modus.
  • Hintergrundfarbe, Innenabstand, Rahmen, Eckenradius sowie Textstil-Überschreibungen für Name und Beschreibung.

Beispiele

Subject

Back in stock: the Weekender Tote

Ein Merchandise-Drop oder eine limitierte Auflage passt direkt: Begrenzen Sie Lagerbestand auf die Auflagengröße und lassen Sie das Bestands-Badge die Knappheit kommunizieren, während sie schwindet. Das breitere Muster, direkt aus einem Promo-Versand zu verkaufen, statt Klicks über einen separaten Shop zu leiten, finden Sie unter E-Commerce & Produkt-Drops. Der Start eines digitalen Kurses oder E-Books verwendet Digital-Fulfillment, sodass der Käufer den Download-Link erhält, sobald die Zahlung bestätigt ist, ganz ohne manuellen Fulfillment-Schritt. Ein lokales Unternehmen, das ein physisches Zusatzprodukt verkauft (ein Markenartikel, eine saisonale Box), verwendet Physisch-Fulfillment und nutzt die Bestellungen-Tabelle wie eine schlanke Auftragswarteschlange, wobei jede Bestellung beim Versand als erfüllt markiert wird. Verwenden Sie Käufer kontaktieren, um ein Support-Ticket zu öffnen, falls eine Adresse bestätigt werden muss.

So sieht der statische Fallback aus

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <img src="https://mailinapp.com/api/product-status?p=proj123&b=prod-1&s=..."
       width="180" height="30" alt="" style="display:block;margin-bottom:8px" />
  <a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=prod-1&blockType=product&action=buy"
     style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
            color:#ffffff;border-radius:6px;text-decoration:none;
            font-size:14px;font-weight:600">
    Buy now
  </a>
</div>

Das Bestandsstatus-Bild wird nur gerendert, wenn ein Lagerbestand-Limit gesetzt ist; Jetzt kaufen öffnet immer die Bestätigungsseite, statt eine Zahlung direkt aus der E-Mail heraus abzusenden.

Im externen Checkout-Modus gibt es überhaupt keine Bestätigungsseite oder kein Bestands-Badge — Jetzt kaufen ist ein einfacher, klickverfolgter Link direkt zur URL der externen Produktseite:

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <a href="https://mailinapp.com/v/eyJhbGci.../click?blockId=prod-1&blockType=product&dest=https%3A%2F%2Fshop.example.com%2Fproducts%2Ftote-bag"
     style="display:inline-block;border:none;border-radius:6px;
            background-color:#4f46e5;color:#ffffff;padding:10px 20px;
            font-size:14px;font-weight:600;text-decoration:none">
    Buy now
  </a>
</div>

Siehe auch