Für KI kopieren

Erscheinungsbild

Lassen Sie den Angebotsrechner so aussehen, als hätte Ihr eigenes Produktteam ihn gebaut.

Die Appearance-API

Ein einziges appearance-Objekt steuert das Aussehen des eingebetteten Angebotsrechners und der nativen Komponenten. Es besteht aus fünf Teilen: theme, variables, rules, layout und fonts.

<script src="https://cordhq.app/embed.js" async></script>
<div
  data-cord-token="a1b2c3d4e5f60718"
  data-cord-appearance='{
    "theme": "flat",
    "variables": {
      "colorPrimary": "#0f766e",
      "colorText": "#0b1220",
      "borderRadius": "10px",
      "borderRadiusButton": "999px"
    },
    "rules": {
      "Button": { "text-transform": "uppercase", "letter-spacing": "0.04em" },
      "Total": { "font-weight": "700" }
    },
    "layout": { "compact": true, "hideChat": true },
    "fonts": [{ "cssSrc": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" }]
  }'>
</div>

Beim Web Component kommt dasselbe JSON in das Attribut appearance oder in die Eigenschaft element.appearance; in React in die Prop appearance von <CordCotizador>.

Themes (theme)

Theme	Was es bewirkt
light	Standard.
dark	Vollständige dunkle Palette: Hintergrund, Flächen, Text, Rahmen und Felder. night ist ein Alias.
auto	Folgt der Einstellung prefers-color-scheme des Besuchers.
flat	Ohne Schatten und mit sichtbaren Rahmen, für Websites ohne Elevation.

Das Theme wird zuerst angewendet, und Ihre variables haben immer Vorrang.

Variablen (variables)

Sie werden in camelCase geschrieben. Jede wirkt auf eine echte Fläche des Angebotsrechners; eine Variable, die Sie nicht setzen, behält den Wert von Cord.

Variable	Typ	Wo sie sichtbar ist
colorPrimary	Farbe	Hauptschaltfläche, Akzente, eigene Chat-Blasen
colorOnPrimary	Farbe	Text auf der Primärfarbe
colorBackground	Farbe	Hintergrund der Karte
colorSurface	Farbe	Innere Bereiche: Notizen, Gesamtbetrag, Chat, Hinweise
colorText	Farbe	Haupttext und Beträge
colorTextSecondary	Farbe	Beschriftungen, Steuernummer, Notizen
colorTextPlaceholder	Farbe	Tabellenköpfe, Hilfetexte, Platzhalter
colorBorder	Farbe	Trennlinien und Rahmen
colorDanger	Farbe	Ablehnen und Fehler
colorSuccess	Farbe	Bestätigungen
colorInput	Farbe	Hintergrund der Felder
colorInputText	Farbe	Text der Felder
colorInputBorder	Farbe	Rahmen der Felder
colorFocus	Farbe	Rahmen des fokussierten Felds
fontFamily	Schriftfamilie	Die gesamte Karte
fontSize	Länge	Positionen
fontWeightBold	Schriftstärke	Schaltflächen
borderRadius	Länge	Karte
borderRadiusButton	Länge	Schaltflächen
borderRadiusInput	Länge	Felder
spacingCard	Abstand	Innenabstand der Karte (2rem oder 1.5rem 2rem)
shadowCard	none oder default	Schatten der Karte

Eine Farbe akzeptiert Hexadezimalwerte, rgb(), hsl(), oklch(), oklab(), lab(), lch() oder einen Namen. Eine Länge akzeptiert px, rem, em oder %.

Regeln pro Komponente (rules)

Wo Variablen nicht ausreichen, wendet rules Eigenschaften auf Komponenten mit öffentlichem Namen an. Das sind keine CSS-Selektoren: Es sind stabile Namen, die Cord auf sein Markup abbildet. Deshalb brechen sie nicht, wenn sich das Markup ändert.

"rules": {
  "Button": { "text-transform": "uppercase" },
  "Button:hover": { "opacity": "0.9" },
  "Input:focus": { "border-color": "#0f766e" },
  "Bubble--mine": { "background-color": "#0f766e" }
}

Komponenten: Card, Header, Total, Table, Row, SummaryRow, Notes, Button, Button:hover, ButtonSecondary, ButtonSecondary:hover, Input, Input:focus, Chat, Bubble, Bubble--mine.

Eigenschaften: color, background-color, border-color, border-width, border-style, border-radius, font-size, font-weight, letter-spacing, text-transform, padding, box-shadow (none oder default) und opacity.

Layout (layout)

Option	Wirkung
compact: true	Weniger Weißraum in der Karte, für schmale Spalten.
hideChat: true	Blendet die Unterhaltung und die Kommentare pro Position aus.
hideNotes: true	Blendet den Notizblock des Angebots aus.

Ausblenden betrifft nur die Darstellung: Das Angebot und seine Aktionen bleiben im öffentlichen Link dieselben.

Schriften (fonts)

Bis zu vier Stylesheets von fonts.googleapis.com oder fonts.bunny.net über https. Wenn Sie fontFamily nicht festlegen, verwendet Cord die erste Schriftfamilie des ersten Stylesheets.

Was Cord validiert und warum

Jeder Wert, der als CSS endet, durchläuft einen Validator mit geschlossenen Listen von Schlüsseln, Komponenten und Eigenschaften sowie einer Grammatik pro Werttyp. url(), expression(), @, !important, ;, geschweifte Klammern und < werden verworfen, und das gesamte Objekt wird ignoriert, wenn es größer als 8 KB ist. Verworfene Werte beeinträchtigen den Rest nicht: Sie werden ignoriert, das SDK meldet sie während der Entwicklung in der Konsole, und sie erscheinen mit einem Testschlüssel in der Debug-Leiste.

So lässt sich das Erscheinungsbild nicht missbrauchen, um Schaltflächen auszublenden, den Gesamtbetrag zu verdecken oder Ressourcen Dritter in das iframe zu laden: Das Design gehört Ihnen, die Integrität des Angebots gehört Cord.

Native Komponenten

Headless-Modus (baseTheme: 'none')

Mit <CordBuilder> oder useQuoteBuilder und Ihrer eigenen UI deaktiviert appearance={{ baseTheme: 'none' }} in <CordProvider> das Basis-Stylesheet. Die Klassen .cord-* bleiben im Markup, und das Aussehen liegt in Ihrer Hand (Tailwind, CSS Modules oder was immer Sie verwenden).

Overrides pro Element (elements)

Jeder Knoten von <CordBuilder> trägt eine stabile Klasse .cord-<key> (builderRoot, formField, itemRow, summaryRoot, submitButton…). appearance.elements ergänzt Ihren className und Ihren style:

<CordProvider
  publishableKey={pk}
  appearance={{
    variables: { colorPrimary: '#0f766e', borderRadiusInput: '6px' },
    elements: {
      submitButton: 'my-button',
      itemRow: { style: { gap: '18px' } },
    },
  }}
>
  <CordBuilder />
</CordProvider>

Die Basisklasse .cord-<key> wird nie ersetzt; Ihre Klasse kommt hinzu.