Für KI kopieren

Web Components und Vue

Framework-unabhängige Komponenten für maximale Kompatibilität mit jeder Architektur.

Web Component (Vanilla JS, PHP, Rails)

Wenn Sie weder React noch Vue verwenden oder Cord in eine serverseitig gerenderte Website integrieren (etwa mit Laravel, Django oder WordPress), können Sie das Standard-Web-Component <cord-quote> verwenden (<cord-cotizador> funktioniert weiterhin als Alias).

Diese Komponente ist nach den Standards der Webplattform kompiliert: Der Browser versteht sie nativ, ganz ohne Bundler.

<!-- ES-Modul importieren -->
<script type="module" src="https://unpkg.com/@flouviahq/elements/dist/index.mjs"></script>

<!-- Native Komponente rendern -->
<div style="height: 800px;">
  <cord-quote
    token="9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46"
    min-height="500">
  </cord-quote>
</div>

<script>
  // Standard-DOM-Ereignisse empfangen
  const quote = document.querySelector('cord-quote');

  quote.addEventListener('approved', (e) => {
    console.log('Approved by', e.detail.signed_by);
  });
</script>

Die Rechnung: <cord-invoice>

<cord-invoice> zeigt eine Rechnung von Cord (die unter /i/{token}) auf Ihrer Website an: offener Betrag, Status, Positionen, Gesamtbeträge und der PDF-Download. Das Token ist das der gehosteten Rechnung, dasselbe wie in der E-Mail, die Ihr Kunde erhält.

<cord-invoice token="INVOICE_TOKEN"></cord-invoice>

<script>
  document.querySelector('cord-invoice').addEventListener('paid', (e) => {
    console.log('Invoice paid', e.detail.folio);
  });
</script>

Die Zahlungsschaltfläche öffnet die gehostete Rechnung in einem Fenster von Cord: Zahlungsdaten werden nie im iframe erfasst. Solange die Rechnung offen ist, fragt das Embed ihren offenen Betrag ab und sendet status_changed, wenn er sich ändert, und paid, wenn sie beglichen ist. Mit embed.js fügen Sie dem div das Attribut data-cord-document="invoice" hinzu. Wie beim Angebot kommen die Ereignisse ohne erlaubte Domains unter Einstellungen › Einbettbarer Angebotsrechner ohne Daten an.

theme, variables und fonts der Appearance-API gelten für die Rechnung; rules und layout gehören zum Angebotsrechner.

Live-Zustand: state und statechange

<cord-quote> und <cord-invoice> fassen die Ereignisse des iframes zu einem Zustand zusammen, den Sie jederzeit über die Eigenschaft state lesen können, und senden statechange, sobald er sich ändert. So zeichnen Sie Ihre eigene Zusammenfassung, ohne jedes Ereignis einzeln zu empfangen.

<cord-quote token="9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46"></cord-quote>
<p id="summary"></p>

<script type="module">
  const quote = document.querySelector('cord-quote');
  const summary = document.querySelector('#summary');

  quote.addEventListener('statechange', (e) => {
    const s = e.detail; // entspricht quote.state
    if (!s.ready) return;
    const total = s.total === null ? '' : new Intl.NumberFormat('en-US', { style: 'currency', currency: s.moneda }).format(s.total);
    summary.textContent = `${s.folio ?? ''} ${s.status ?? ''} ${total}`;
    if (s.paid) summary.textContent += ' · paid';
  });
</script>

Feld	Inhalt
ready	Der Angebotsrechner ist fertig dargestellt.
status	sent, viewed, approved, rejected, paid, expired…
folio, moneda, total	Aus dem Dokument. Der Gesamtbetrag wird immer mit seiner Währung übertragen.
approved, rejected, paid	Boolesche Kurzformen. paid ist auch bei einem bereits abgerechneten Angebot wahr.
signedBy	Wer bestätigt hat, sofern in dieser Sitzung bestätigt wurde.
lastEvent	Das zuletzt empfangene Ereignis, zum Beispiel cord:approved.

Ohne erlaubte Domains unter Einstellungen › Einbettbarer Angebotsrechner kommen die Ereignisse ohne Daten an, und status, folio, moneda und total bleiben null. In React ist es onStateChange an <CordCotizador>, in Vue das Ereignis @state.

Styling: ::part

Beide Elemente leben in einem Shadow DOM: Ihre Styles beschädigen sie nicht, und deren Styles berühren Ihre Seite nicht. So passen Sie sie von außen an:

cord-quote::part(frame) {
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(10, 25, 47, 0.08);
}

cord-quote::part(skeleton) {
  border-radius: 24px;
}

Part	Element
root	Der Container des Elements.
skeleton	Der Ladeplatzhalter, der angezeigt wird, während das Dokument geladen wird.
frame	Das <iframe> mit dem Dokument von Cord.

Den Inhalt im iframe passen Sie mit der Appearance-API an (Attribut appearance als JSON oder Eigenschaft appearance als Objekt), nicht mit dem CSS Ihrer Seite.

Attribut	Detail
token	Pflicht. Das öffentliche Token des Dokuments.
appearance	Appearance als JSON.
min-height	Mindesthöhe des iframes in Pixeln (standardmäßig 420).
base-url	Origin von Cord, wenn Sie eine eigene Domain verwenden.
debug	Aktiviert die Debug-Leiste (siehe Ereignisse).

Steuerformular

<cord-fiscal-form> erfasst die Steuerdaten Ihres Kunden mit derselben Validierung wie Cord und fügt sich in Ihre HTML-Formulare ein. Siehe Steuerformular.

Vue und Nuxt

Das SDK von Cord bietet einen nativen Wrapper für Vue 3, der Reaktivität und Ereignisse nach dem Vue-Paradigma behandelt (@ oder v-on).

Installation

npm install @flouviahq/elements

Verwendung

Importieren Sie die Komponente <CordCotizador> aus dem Entrypoint /vue und verwenden Sie sie in Ihrem Template.

<script setup>
import { CordCotizador } from '@flouviahq/elements/vue';
import { ref } from 'vue';

const myToken = ref('9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46');

function handleApproved(detail) {
  console.log('The client signed:', detail.signed_by);
}

function handlePay(detail) {
  window.location.href = detail.url;
}
</script>

<template>
  <main class="quote-container">
    <CordCotizador
      :token="myToken"
      @approved="handleApproved"
      @pay="handlePay"
    />
  </main>
</template>

Framer

Wenn Sie Ihre Website in Framer bauen, können Sie Cord Elements als Code Component per Drag-and-drop hinzufügen.

Erstellen Sie in Framer eine neue Code-Komponente und fügen Sie Folgendes ein:

import { FramerCordCotizador } from '@flouviahq/elements/framer';
export default FramerCordCotizador;

Damit werden die Eigenschaftssteuerungen in der visuellen Oberfläche von Framer registriert (Property Controls), und das Feld Token erscheint im rechten Panel, sodass Ihre Designer es visuell ändern können, ohne Code anzufassen.

Webflow

Anders als Framer (eine echte Code-Komponente für React) führt Webflow keine React-Komponenten aus – deshalb stellt das SDK einen eigenen Entrypoint bereit (@flouviahq/elements/webflow), gedacht für den visuellen Editor von Webflow: ein selbstinitialisierendes Script, das keinen Code erfordert, nur benutzerdefinierte Attribute.

1. Fügen Sie in Webflow einen Div Block dort ein, wo der Angebotsrechner erscheinen soll.
2. Fügen Sie im Panel Settings des Elements ein Custom Attribute hinzu: data-cord-token mit dem Token Ihres Angebots als Wert. (Optional data-cord-base-url, wenn Sie eine eigene Domain verwenden, und data-cord-min-height für die Mindesthöhe des iframes.)
3. Fügen Sie unter Page Settings › Custom Code (oder in den Website-Einstellungen, wenn es für alle Seiten gelten soll) dieses Script vor </body> ein:

<script src="https://unpkg.com/@flouviahq/elements/dist/webflow.js"></script>

Das Script findet automatisch alle Elemente mit data-cord-token auf der Seite (beim Laden und erneut, wenn Webflow später weitere hinzufügt) und bindet dort den Angebotsrechner ein – es stellt keine eigenen JS-Ereignisse bereit wie das native Web Component; dafür verwenden Sie <cord-cotizador> direkt oder die Code-Komponente von Framer.