Ereignisse (Relay)

Reagieren Sie im Browser, wenn Ihre Kunden mit dem Angebot interagieren.

Die Nachrichtenbrücke

Das iframe von Cord Elements ist so gebaut, dass Ihre Website nie von dem abgeschnitten ist, was darin passiert. Über eine bidirektionale Brücke mit window.postMessage leitet Cord die Ereignisse der Karte direkt an Ihre übergeordnete window-Umgebung weiter („Relay“).

Damit können Sie zum Beispiel Analytics-Pixel auslösen (wie Meta Pixel oder Google Analytics), eine Konfetti-Animation starten, wenn ein Angebot bestätigt wird, oder den Nutzer nach einer erfolgreichen Zahlung auf eine Dankesseite weiterleiten.

Ereignisse empfangen

Sie können die Ereignisse nativ empfangen, indem Sie einen addEventListener an den DOM-Knoten des eingebetteten Elements hängen:

const container = document.querySelector('[data-cord-token]');

container.addEventListener('cord:approved', (event) => {
  console.log('The quote was approved!');
  console.log('Approved by:', event.detail.signed_by);
});

Verzeichnis der Ereignisse

Alle Ereignisse tragen das Präfix cord:, um Namenskonflikte mit anderen Bibliotheken zu vermeiden. Das detail jedes Ereignisses enthält immer token (das öffentliche Token des Angebots) und folio (z. B. "COT-0148"), zusätzlich zu den unten aufgeführten eigenen Feldern.

Lebenszyklus der Komponente

cord:ready: Wird genau in dem Moment ausgelöst, in dem das SDK den Inhalt fertig gerendert und die endgültige Höhe berechnet hat und die Schriften geladen sind.
cord:resize: Wird fortlaufend gesendet, sobald sich die Höhe des iframes ändert (nur nützlich, wenn Sie Ihren eigenen Container schreiben und embed.js nicht verwenden).
cord:viewed: Wird zusammen mit cord:ready ausgelöst, sobald der Angebotsrechner im iframe fertig gerendert ist – das Signal, dass der Inhalt für Ihre Host-Seite sichtbar ist. Die offizielle Erfassung in der Datenbank, dass der Kunde das Angebot angesehen hat, läuft über einen separaten internen Mechanismus, der verlangt, dass der Tab tatsächlich sichtbar ist (damit der Verkäufer, der seinen eigenen Link in der Vorschau ansieht, nicht als „Ansicht“ zählt); gehen Sie nicht davon aus, dass beides im selben Moment geschieht.

Kommerzielle Interaktion

cord:approved: Wird in dem Moment gesendet, in dem der Nutzer die Bedingungen des Angebots bestätigt. Liefert im detail nützliche Daten wie den Validierungs-Hash und wer signiert hat (signed_by).
cord:signed: Wird im SELBEN Moment wie cord:approved ausgelöst, mit demselben detail (signed_by, hash) – in Cord sind Bestätigen und Signieren eine einzige Aktion des Kunden, nicht zwei zeitlich getrennte Schritte. Hören Sie auf dasjenige, das für Ihren Code semantisch klarer ist; erwarten Sie nicht, dass eines „nach“ dem anderen ankommt.
cord:pay: Wird gesendet, wenn der Nutzer auf die Schaltfläche klickt, um den Online-Zahlungsablauf zu starten (Karte, Banküberweisung oder die anderen Zahlungsmethoden, die das Unternehmen aktiviert hat). Das detail enthält die absolute url der Zahlungsseite. Cord öffnet sie bereits in einem eigenen Fenster (die Zahlung läuft nie im iframe): Navigieren Sie Ihre Seite nicht zu dieser URL, sondern nutzen Sie sie nur für Ihre Analytics.
cord:rejected: Wird ausgelöst, wenn der Kunde das Angebot ausdrücklich ablehnt. Das detail enthält den comentario, den er hinterlassen hat.
cord:message: Wird jedes Mal ausgelöst, wenn der Kunde einen allgemeinen Kommentar oder ein Gegenangebot im Chat des Angebots hinterlässt.
cord:item_comment: Wird ausgelöst, wenn der Nutzer einen Kommentar zu einer bestimmten Position (Produktzeile) des Angebots hinterlässt, mit der zugehörigen item_id im detail.

Status

cord:updated: Das Angebot hat sich geändert, während es geöffnet war (der Verkäufer hat Positionen, Beträge oder Bedingungen bearbeitet). Der Angebotsrechner hat sich bereits selbst neu gezeichnet; nutzen Sie das Ereignis, um zu aktualisieren, was Ihre Seite drumherum anzeigt.
cord:status_changed: Der Status hat sich geändert (sent, viewed, approved, rejected, paid, expired…). Das detail enthält den neuen status (und bei der Rechnung saldo).
cord:paid: Nur bei <cord-invoice>: Die Rechnung ist beglichen. Das detail enthält folio, moneda und saldo.

cord:ready enthält außerdem status, moneda und total, damit Ihre Seite ohne weiteren Aufruf eine eigene Zusammenfassung darstellen kann.

Nur-Lese-Modus

Wenn Ihre Organisation unter Einstellungen › Einbettbarer Angebotsrechner keine erlaubten Domains hat oder die Host-Seite nicht auf dieser Liste steht, wird der Angebotsrechner schreibgeschützt angezeigt: Er bietet weder Bestätigen noch Signieren, Bezahlen oder Schreiben an, und die Schaltfläche öffnet den öffentlichen Link des Angebots in einem neuen Tab. In diesem Modus kommen die Ereignisse ohne detail an: Eine Seite, die nicht auf Ihrer Liste steht, erfährt weder, wer signiert hat, noch Beträge oder die Zahlungs-URL.

Debug-Leiste

Mit aktivem debug zeichnet Elements auf Ihrer Website ein Panel mit den Ereignissen des iframes, jeder API-Anfrage mit ihrer request_id und den Konfigurationshinweisen (zum Beispiel appearance-Werte, die Cord verworfen hat).

<cord-quote token="a1b2c3d4e5f60718" debug></cord-quote>
<!-- oder mit embed.js -->
<div data-cord-token="a1b2c3d4e5f60718" data-cord-debug></div>

In React <CordProvider debug>. Das Panel erscheint nur mit einem pk_test_-Schlüssel; mit pk_live_ beschränkt es sich auf einen Hinweis in der Konsole. Ohne Schlüssel (Web Component oder embed.js) erscheint es nur auf localhost oder wenn die URL ?cord_debug=1 enthält, damit ein vergessenes Attribut es nicht Ihren Kunden zeigt.