Der Aktions-Button

Mit dem Aktions-Button schließt dein Kunde die Konfiguration ab: Er fordert ein Angebot per E-Mail an, lädt ein PDF herunter oder schickt die Konfiguration an dein eigenes System. Der Aktions-Button ist ein Merkmal mit eigenen Einstellungen. Dieser Artikel erklärt alle Aktionen, die Platzhalter für E-Mail und PDF und was du gegen Spam tun solltest.

Aktions-Button anlegen

1. Öffne die Komponente und klicke im Strukturbaum an der gewünschten Gruppe auf + (Merkmal hinzufügen).
2. Stelle unter Grundeinstellungen die Datenkategorie auf Frontend und den Datentyp auf Aktions-Button.
3. Trage unter Bezeichnung die Beschriftung des Buttons ein, z. B. „Angebot anfordern“ – je Inhaltssprache.
4. Wähle im Abschnitt Button-Einstellungen die Aktion und fülle die zugehörigen Felder aus (siehe unten).
5. Speichere und veröffentliche die Komponente.

Der Button trägt die Bezeichnung. Ist sie leer, zeigt V3 den internen Namen. In Legacy erscheinen unter dem Button zusätzlich die Informationen des Merkmals, in V3 nur der Button.

Die übrigen Felder wie Sichtbarkeit, Reihenfolge und CSS-Klasse funktionieren wie bei jedem Merkmal – siehe Merkmale & Werte anlegen.

Die Aktionen

Vor jeder Aktion prüft der Konfigurator die Eingaben: Fehlt ein Pflichtfeld, steht die Meldung am Merkmal und es wird nichts verschickt. In V3 hält auch eine Fehler-Regel den Button auf – siehe Regelwerk aufbauen.

Eigene URL

Unter Eigene POST-URL trägst du die Adresse ein, an die die Konfiguration gehen soll, z. B. https://www.meinshop.de/anfrage.php.

Mit {$baseurl}/pfad wird die Adresse zur Domäne der Seite ergänzt, auf der der Konfigurator gerade läuft. So funktioniert derselbe Button auf mehreren Domänen.

So kommt die Konfiguration an (V3): configento.app schickt sie als JSON an deine URL. Für jedes Merkmal gibt es einen Eintrag unter seinem internen Namen mit u. a. label (Bezeichnung), value (Wert bzw. Eingabe), valueLabel (Bezeichnung des Werts), choiceSku (Artikelnummer des Werts), valueQty (Menge) und visibility. Dazu kommt _combined_sku mit der kombinierten Artikelnummer des konfigurierten Produkts (siehe Komponenten-Einstellungen). Antwortet deine URL mit einem PDF, lädt der Browser des Kunden es herunter.

Antwort deiner URL (V3): Ein HTTP-Status 2xx gilt als Erfolg. Danach geht es zur Seite unter Redirect nach Aktion, ohne sie steht unter dem Button „Erfolgreich übermittelt.“ Antwortet deine URL mit einem PDF (Content-Type: application/pdf), lädt der Browser des Kunden es herunter. Den übrigen Inhalt der Antwort wertet der Konfigurator nicht aus, auch keine Felder wie message oder redirect. Jeder andere Status erscheint unter dem Button als „Übermittlung fehlgeschlagen: HTTP …“ mit dem Status. Willst du die Antwort selbst auswerten, etwa deine eigene Meldung zeigen oder das Formular ausblenden, nutze das Ereignis action – siehe JavaScript-Schnittstelle.

Herkunft prüfen (V3): configento.app schickt die Konfiguration von seinem Server an deine URL, nicht aus dem Browser. Jede Anfrage ist mit dem Sicherheitsschlüssel deines Dienstes signiert. Du findest ihn im Service-Portal auf der Seite Dienste. So erkennt deine URL Anfragen, die nicht von configento.app kommen, und lehnt sie ab. Enthält die Komponente ein Captcha, leitet configento.app nur Anfragen mit gelöstem Captcha weiter. Eine gültige Signatur heißt also auch: Das Captcha wurde gelöst.

Prüfe die Signatur über den unveränderten Body der Anfrage und lehne Anfragen ab, die älter als fünf Minuten sind. Beispiel in PHP:

$body      = file_get_contents('php://input');
$timestamp = $_SERVER['HTTP_X_CONFIGENTO_TIMESTAMP'] ?? '';
$signature = $_SERVER['HTTP_X_CONFIGENTO_SIGNATURE'] ?? '';
$expected  = 'sha256=' . hash_hmac('sha256', $timestamp . '.' . $body, 'DEIN-SICHERHEITSSCHLUESSEL');

if (!hash_equals($expected, $signature) || abs(time() - (int) $timestamp) > 300) {
    http_response_code(403);
    exit;
}
$konfiguration = json_decode($body, true);

Hat dein Dienst keinen Sicherheitsschlüssel, fehlen X-Configento-Timestamp und X-Configento-Signature.

In Legacy schickt der Browser des Kunden die Konfiguration direkt an deine URL. Dein Server muss Anfragen von der Domäne deines Shops erlauben (CORS).

An die Seite übergeben

Mit dieser Aktion schickt nicht configento.app die Konfiguration ab, sondern deine Seite: Der Button prüft die Eingaben und übergibt die Konfiguration an dein JavaScript, das sie an deinen eigenen Server schickt. Das passt, wenn du ohnehin einen eigenen Endpunkt hast oder je nach Shop oder Sprache anders reagierst, etwa mit eigenen Empfängern. Regeln und Sichtbarkeit des Buttons wirken wie bei jeder anderen Aktion.

Die Aktion braucht die Engine V3; eine Komponente mit diesem Button läuft deshalb immer mit V3. Wie dein JavaScript die Konfiguration entgegennimmt und das Captcha auf deinem Server prüft, steht in JavaScript-Schnittstelle.

PDF erzeugen

Den PDF-Inhalt bearbeitest du per Klick auf die Vorschau (Zum Bearbeiten klicken). Unter Body-CSS (optional) kannst du eigene CSS-Regeln für das PDF hinterlegen. Kopf- und Fußzeile, Logo und Schrift kommen aus dem Branding.

Der Download funktioniert nur in V3. In Legacy wird das PDF zwar erzeugt, aber nicht an den Kunden ausgeliefert – nimm dort E-Mail mit PDF verschicken.

E-Mail verschicken

Empfänger-Feld vorbereiten: Zur Auswahl stehen nur Merkmale vom Typ Kleines Eingabefeld mit Erlaubte Eingabe = E-Mail. Gibt es keines, zeigt der Editor „Lege ein Text-Merkmal mit E-Mail-Validierung an, um es als Empfänger zu verwenden.“ Lege es an und stelle Pflichtfeld auf Ja. Die Liste zeigt die internen Namen der Merkmale.

Absender und Versand: Die E-Mail geht über deinen eigenen SMTP-Server raus. Absender-Adresse und -Name kommen aus Einstellungen → E-Mail-Versand. Ohne vollständige Einstellungen dort wird keine E-Mail verschickt – siehe Globale Einstellungen.

Sprachen: Betreff und Inhalt pflegst du für jede Inhaltssprache. Der Editor warnt, solange in der gewählten Sprache ein Teil fehlt. Verschickt wird in der Sprache, in der der Kunde den Konfigurator benutzt; fehlt dafür ein Text, nimmt configento.app die Standardsprache der Komponente. Legacy entscheidet nach der Sprache des Browsers: Deutsch oder sonst Englisch.

E-Mail mit PDF verschicken zeigt die Felder für E-Mail und PDF zusammen.

Redirect nach Aktion

Unter Redirect nach Aktion trägst du optional eine Seite ein, auf die der Kunde nach erfolgreicher Aktion geleitet wird, z. B. eine Danke-Seite. Ohne Redirect zeigt V3 unter dem Button „Erfolgreich übermittelt.“ Legacy zeigt ohne Redirect keine Meldung – trag dort eine Danke-Seite ein, damit der Kunde sieht, dass seine Anfrage angekommen ist.

Platzhalter

Platzhalter funktionieren in Betreff, E-Mail-Inhalt, PDF-Inhalt und Dateiname.

Bei {{characteristic:NAME.FELD}} ist NAME der interne Name des Merkmals und FELD eines davon:

Beispiel: Hallo {{characteristic:name.value}}, deine Farbe: {{characteristic:farbe.valueLabel}}.

Bei Checkbox und Mehrfachauswahl werden mehrere Werte mit Komma verbunden. Ein unbekannter Name ergibt einen leeren Text.

{{configuration_table}} zeigt nur Merkmale mit Sichtbarkeit Ja (sichtbar) oder Nur Backend, die einen Wert haben. Die Spaltenköpfe lauten immer „Merkmal“, „Auswahl“, „Artikel-Nr.“ und „Menge“.

Spam-Schutz mit Captcha

Eine E-Mail-Aktion ist ein öffentliches Formular: Wer es findet, kann darüber Mails an beliebige Adressen auslösen – über deinen SMTP-Server. Enthält die Komponente kein Captcha, warnt der Editor: Spam-Risiko: kein Captcha in dieser Komponente.

So schützt du den Button:

1. Lege in derselben Komponente ein Merkmal mit dem Datentyp Captcha (nur V3) an, am besten direkt über dem Aktions-Button.
2. Stelle die Komponente auf die Frontend-Engine V3 – siehe Frontend-Engine: Legacy oder V3.

Sobald die Komponente ein Captcha enthält, verschickt configento.app E-Mails und PDFs nur noch mit gelöstem Captcha. Der Kunde merkt davon wenig: Das Captcha löst sein Browser im Hintergrund.

Zusätzlich begrenzt configento.app den Versand: höchstens 100 E-Mails pro Stunde je Aktions-Button und 10 pro Minute je Besucher. Schickt jemand dieselbe Konfiguration innerhalb einer Minute erneut ab, geht keine zweite E-Mail raus.

Was der Kunde sieht

Wann Änderungen gelten

Änderungen am Aktions-Button – Aktion, Texte, Empfänger-Feld – gelten im Shop erst nach dem Veröffentlichen. Änderungen an E-Mail-Versand und Branding in den Einstellungen wirken dagegen sofort.

Mehrere Buttons

Brauchst du mehrere Aktionen, legst du mehrere Aktions-Buttons an, z. B. „PDF herunterladen“ und „Angebot per E-Mail“. Jeder Button hat seine eigene Aktion und seine eigenen Texte.

Aktions-Button per KI-Agent

Der KI-Agent kann einen Aktions-Button für dich einrichten: „Lege einen Button ‚Angebot anfordern‘ an, der eine E-Mail mit PDF an die Adresse aus dem Feld E-Mail schickt, mit Kopie an vertrieb@meinshop.de.“ Prüfe danach Texte und Empfänger-Feld im Editor. Mehr dazu: KI-Agent: Konfigurator per Chat aufbauen.

Fehlersuche

1. Unter dem Button steht „Für diese Aktion ist kein Endpunkt konfiguriert.“ – bei Eigene URL fehlt die Eigene POST-URL. Bei den anderen Aktionen: Komponente speichern und veröffentlichen.
2. Es kommt keine E-Mail an – prüfe unter Einstellungen → E-Mail-Versand die Verbindung mit Verbindung testen und einer Test-E-Mail. Prüfe, ob ein Empfänger-Feld gewählt ist und der Kunde dort eine gültige Adresse eingetragen hat.
3. „Übermittlung fehlgeschlagen: HTTP 403“ – die Seite läuft auf einer Shop-Domäne, die nicht unter Einstellungen → Domänen steht, oder das Captcha wurde nicht gelöst. Die Vorschau im Admin und Shopify-Shops werden nie wegen der Domäne abgelehnt – den Button kannst du also in der Vorschau testen.
4. „Übermittlung fehlgeschlagen: HTTP 429“ – das Versandlimit ist erreicht. Warte ein paar Minuten.
5. „Übermittlung fehlgeschlagen: HTTP 500“ – meist fehlen die SMTP-Einstellungen oder der SMTP-Server lehnt ab.
6. Ein Platzhalter bleibt leer – prüfe den internen Namen (Groß-/Kleinschreibung) und das Feld. {{combined_image}} ist in Legacy immer leer und braucht außerdem ein kombiniertes Produktbild in der Komponente. {{combined_sku}} bleibt leer, wenn keiner der gewählten Werte und keines der Merkmale eine Artikelnummer hat.
7. Die E-Mail kommt in der falschen Sprache – für die Sprache des Kunden fehlen Betreff oder Inhalt. Wechsle bei Inhaltssprache: auf die Sprache und fülle beides aus.
8. Der Button tut nichts, ein Merkmal ist rot markiert – ein Pflichtfeld fehlt oder eine Fehler-Regel trifft zu. Die Meldung steht am Merkmal bzw. unter dem Gesamtpreis.
9. Unter dem Button steht „Die Seite hat keine Verarbeitung für diesen Button eingerichtet.“ – die Aktion An die Seite übergeben ist gewählt, aber auf der Seite fehlt das JavaScript, das die Konfiguration entgegennimmt. Siehe JavaScript-Schnittstelle.

Nächste Schritte

• Merkmale & Werte anlegen
• Globale Einstellungen
• Frontend-Engine: Legacy oder V3
• HTML-Snippet Integration