Kontakt-Widget
Was dieser Skill produziert
Eine einzelne, in sich geschlossene HTML-Datei mit einem Floating-Chat-Widget, das Folgendes enthält:
- Chat-Blase — fester kreisförmiger Button unten rechts, öffnet/schließt das Panel
- Willkommens-Startbildschirm — Agenten-Avatar + Name + Online-Status + Begrüßungsnachricht
- Nachrichteneingabe — Textfeld mit Emoji/Senden-Symbolen (nur UI; an eigene Backend-Logik anbinden)
- Social-Links — Reihe von kreisförmigen Symbolen (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — nur die vom Benutzer bereitgestellten)
- Meeting-Karte — optionaler Eintrag „Termin buchen" mit Kalendersymbol, verlinkt auf eine benutzerdefinierte URL (Calendly, Cal.com, Lark usw.)
- Offline-Formular — Ersatz-Kontaktformular (Name, E-Mail, Nachricht), wenn
is_available=false - Mobil responsive — volle Breite auf kleinen Bildschirmen
Die Ausgabe ist reines Frontend. Kein Tracking, kein Phone-Home, keine erforderlichen externen Dienste. Funktioniert offline, sobald geladen.
Design-Richtung
Saubere, minimalistische SaaS-Ästhetik. Sieht aus wie ein echtes Produkt-Widget, nicht wie eine Spielzeug-Demo:
- Typografie: Inter (Google Fonts), Basis 14px, halbfette Überschriften
- Farben: Eine einzelne vom Benutzer gewählte
primary_colorbestimmt die Blase, den Avatar, den Senden-Button und Akzente. Alles andere ist eine neutrale Schiefer-Palette (#1e293b/#64748b/#f1f5f9). Keine violetten Verläufe, kein Glas-Morphismus, keine KI-Regenbogen-Akzente. - Radius: 16px bei Karten, vollständig rund bei Blase und Avataren
- Schatten: Dezenter
0 8px 32px rgba(0,0,0,0.12)auf dem Widget-Panel,0 4px 12pxauf der Blase - Abstände: 16px Innenabstand, 12px Abstände zwischen Elementen
- Zustände: Hover verdunkelt Buttons um ~5%, Active skaliert die Blase um 0.95
Eingaben
Dieser Skill akzeptiert diese Parameter vom Benutzer:
| Eingabe | Typ | Standard | Beschreibung |
|---|---|---|---|
primary_color | Farbe | #4F7CFF | Bestimmt Blase, Kopfzeile, Senden-Button, Akzente |
agent_name | Zeichenkette | Assistant | Wird in der Kopfzeilenbegrüßung angezeigt |
greeting | Zeichenkette | Hello! How can I help you today? | Untertitel in der Kopfzeile |
is_available | Boolesch | true | Online-Status; false zeigt das Offline-Formular |
social_telegram | Zeichenkette | (leer) | Telegram-Link — wird weggelassen, wenn leer |
social_whatsapp | Zeichenkette | (leer) | WhatsApp-Link — wird weggelassen, wenn leer |
social_instagram | Zeichenkette | (leer) | Instagram-Link — wird weggelassen, wenn leer |
meeting_url | Zeichenkette | (leer) | Buchungs-URL (Calendly, Cal.com usw.) — wird weggelassen, wenn leer |
offline_message | Zeichenkette | We're currently offline. Leave a message and we'll get back to you! | Wird angezeigt, wenn is_available=false |
Arbeitsablauf
- Primärfarbe, Agentenname, Begrüßungstext, Online-/Offline-Status, Social-Links und optionale Meeting-URL aus der Anfrage und bekanntem Kontext auflösen. Verwende die dokumentierten Standardwerte und lasse leere optionale Links weg. Frage nur ein einziges konsolidiertes Formular ab, wenn ein fehlender Wert das angeforderte Widget maßgeblich verändern würde und nicht sicher mit einem Standardwert belegt werden kann.
- Generiere eine HTML-Datei, in der alle bereitgestellten Werte als Literale eingefügt sind (keine Template-Engine, keine
{{ }}Platzhalter in der Ausgabe). - Öffne das Widget-Panel standardmäßig beim ersten Rendern, damit die Vorschau nützlich ist.
- Füge keine
<script src="…">hinzu, die auf SDKs Dritter verweisen, es sei denn, der Benutzer bittet ausdrücklich um eine Backend-Integration. Die Ausgabe muss von der Festplatte ohne Netzwerkaufrufe außer dem Google Fonts CSS laufen.
Backend-Integration (optional, nur auf Benutzerwunsch)
Das generierte Widget ist ein UI-Artefakt und wird standardmäßig ohne Anbieter-Code ausgeliefert. Die Blase, das Panel, Social-Links und der Meeting-Button funktionieren sofort out of the box ohne Backend. Nur die Nachrichteneingabe muss angebunden werden, wenn der Benutzer zweiseitige Unterhaltungen wünscht.
Falls der Benutzer ausdrücklich darum bittet, die Nachrichteneingabe an ein echtes Backend anzubinden, biete diese Optionen in aufsteigender Reihenfolge des Engagements an:
Stufe 1 — Kein Backend (Standard)
Das Widget funktioniert bereits als Kontaktfläche über Social-Links + Meeting-URL. Belasse es so wie es ist.
Stufe 2 — Einmalige Nachrichten, kein Chat-Verlauf
mailto:-Fallback — ersetze densend-Handler mitwindow.location.href = 'mailto:[email protected]?subject=...&body=' + encodeURIComponent(text). Null Infrastruktur, aber das E-Mail-Programm des Besuchers öffnet sich.- Eigener
/api/contact-Endpunkt —fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text }) }). Der Benutzer kümmert sich um die Zustellung (SendGrid, Resend, eigener SMTP, ein Notion/Airtable-Webhook usw.).
Stufe 3 — Echtzeit-Chat (Besucher ↔ Agent, Verlauf, Tippen, Anwesenheit)
Dies erfordert ein IM/Chat-SDK. Jedes der Folgenden funktioniert; wähle das, das zu deinem Stack passt:
- Knocket — https://trtc.io/solutions/knocket (Drop-in, kostenlos)
- Crisp — https://crisp.chat
- Tawk.to — https://tawk.to
- Chatwoot (selbst gehostet) — https://chatwoot.com
- Intercom — https://intercom.com
Füge kein <script> automatisch in die generierte Ausgabe ein — füge die Backend-Integration nur hinzu, wenn der Benutzer ausdrücklich zustimmt.