Zum Inhalt springen
DEEN

Überblick

Angebote und Rechnungen von Cord in Ihrem Produkt, mit React, Vue, Web Components oder Vanilla JS.

Was sind Elements?

Cord Elements ist das offizielle SDK (@flouviahq/elements), mit dem Sie die gesamte kommerzielle Interaktion von Cord direkt in Ihr eigenes Unternehmensportal integrieren.

Statt den Kunden zu cordhq.app zu schicken, können Ihre Kunden Angebote ansehen, im internen Chat verhandeln, Dokumente bestätigen und signieren oder Rechnungen bezahlen, ohne Ihre Marke zu verlassen. Alles geschieht sicher unter Ihren eigenen Domains.

Integrationsmethoden

Je nach Ihrem Tech-Stack bietet Cord drei Wege, Elements zu nutzen:

1. Das NPM-SDK (empfohlen)

Für moderne Anwendungen mit React, Next.js, Vue oder Nuxt können Sie das offizielle NPM-Paket installieren. Es enthält native Komponenten, Headless-Hooks (useQuoteBuilder) und vollständige TypeScript-Typen.

Installation:

npm install @flouviahq/elements

Sehen Sie sich unsere Anleitungen an:

2. Script-Tag (embed.js)

Für Websites ohne Bundler, WordPress oder ältere Architekturen können Sie die Umgebung mit einem einzigen Script-Tag laden und data--Attribute in Ihrem HTML festlegen.

<script src="https://cordhq.app/embed.js" async></script>
<div data-cord-token="a1b2c3d4e5f60718"></div>

Dieses Script fügt dynamisch ein iframe ein und passt seine Höhe automatisch an, damit keine doppelten Scrollleisten entstehen.

3. Framer und Webflow

Das SDK exportiert außerdem spezielle Wrapper, die Sie als Code Components in modernen visuellen Editoren einfügen können. Details finden Sie in der Dokumentation zu Web Components.

Sicherheitsarchitektur

Cord Elements arbeitet mit Sicherheit auf Bankniveau. Standardmäßig kann Ihr im Frontend offengelegter veröffentlichbarer Schlüssel (pk_live_...) Ihr Kundenverzeichnis niemals lesen (damit keine CRM-Daten abfließen). Für erweiterte Funktionen können Sie das SDK über einen Backend-Proxy betreiben.

Im Abschnitt CSP-Sicherheit konfigurieren Sie Ihre erlaubten Domains (Allowlist) und schützen sich vor Clickjacking-Angriffen.