In zwei Schritten einbinden
Du brauchst einen Zugriff auf den HTML-Code der Seite, auf der das Widget erscheinen soll.
1. Skript laden
Binde das Widget-Skript einmal pro Seite ein, am besten kurz vor dem schließenden </body>. Das Skript enthält alles, was das Widget braucht. Es ist kein type="module" nötig.
<script src="https://maintenance24.de/repair-status-widget/dist/repair-status-widget.js"></script>
2. Widget platzieren
Setze das Element <repair-status-lookup> an die Stelle, an der das Widget erscheinen soll, und gib den Partner an. Die Adresse des Servers ist im Widget fest hinterlegt.
<repair-status-lookup partner-slug="muster-gmbh"></repair-status-lookup>
Attribute
| Attribut | Pflicht | Beschreibung |
|---|---|---|
partner-slug | ja | Kennung des Partners, z. B. muster-gmbh. |
customer-number | nein | Kundennummer vorgeben, z. B. K-27077. |
postal-code | nein | Postleitzahl vorgeben, z. B. 20095. |
Sind beide Kundendaten gesetzt, überspringt das Widget das Formular und lädt die Reparaturen sofort. Ist nur eines gesetzt, wird das Formular damit vorbefüllt. Sind beide leer, geben Kunden ihre Daten selbst ein.
Beispiele
Beide Beispiele laufen live gegen den Server. Dein Browser lädt das Widget von maintenance24.de.
Kunden geben Kundennummer und Postleitzahl selbst ein. Das ist die Standardvariante für eine öffentliche Seite.
<repair-status-lookup partner-slug="muster-gmbh"></repair-status-lookup>
Die Seite kennt den Kunden bereits, zum Beispiel in einem Kundenportal nach dem Login. Das Widget zeigt sofort die Reparaturen. Die Schaltfläche zum Wechseln der Kundennummer ist ausgeblendet.
<repair-status-lookup partner-slug="muster-gmbh" customer-number="K-27077" postal-code="20095"> </repair-status-lookup>
Die Werte lassen sich auch per JavaScript setzen. Das Widget fragt dann automatisch neu ab:
const widget = document.querySelector('repair-status-lookup')
widget.customerNumber = 'K-27077'
widget.postalCode = '20095'An dein Design anpassen
Farben, Rundungen und Schrift lassen sich über CSS-Variablen von deiner Seite aus setzen. Die Beispiele oben nutzen genau das:
repair-status-lookup {
--repair-status-accent: #d4141c;
--repair-status-radius: 2px;
--repair-status-radius-lg: 2px;
--repair-status-font-family: "Segoe UI", Arial, sans-serif;
--repair-status-max-width: 36rem;
}| Variable | Wirkung |
|---|---|
--repair-status-accent | Buttons, Links, Fokusrahmen |
--repair-status-on-accent | Textfarbe auf der Akzentfarbe |
--repair-status-ink / -muted | Haupt- und Nebentext |
--repair-status-border | Rahmenfarbe |
--repair-status-bg / -input-bg | Hintergrund von Karten und Eingabefeldern |
--repair-status-done / -progress / -cancelled | Farben der Status-Badges |
--repair-status-radius / -radius-lg | Rundung von Feldern und Buttons / Karten |
--repair-status-font-family | Schriftart |
--repair-status-max-width | Maximale Breite |
Für einzelne Elemente kannst du zusätzlich ::part() nutzen, zum Beispiel repair-status-lookup::part(submit-button) oder ::part(card).
Gut zu wissen
Kundendaten nur für angemeldete Kunden setzen. Was du in customer-number und postal-code einträgst, steht im HTML und ist für jeden sichtbar, der die Seite aufruft. Setze die Werte deshalb nur serverseitig für den gerade angemeldeten Kunden und niemals in öffentlich abrufbaren Seiten.
Server-Freigabe (CORS). Das Widget ruft den Server direkt aus dem Browser auf. Die Domain deiner Seite muss dort freigegeben sein. Erscheint nach dem Einbinden die Meldung „Die Verbindung ist fehlgeschlagen“, melde dich bei uns und nenne die Adresse deiner Seite.
Auch wenn die Seite lokal geöffnet wird. Beim Öffnen dieser Datei direkt von der Festplatte kann die Freigabe fehlen, und die Live-Beispiele zeigen dann einen Verbindungsfehler. Lege die Seite dafür auf einen Webserver.