Ein KI-gestützter Chat-Assistent für Ihre Website.
Fügen Sie diesen Code vor dem schließenden </body> Tag ein:
| Attribut | Beschreibung | Standard |
|---|---|---|
data-project |
Pflicht: Projekt-ID für API-Zugang | - |
data-position |
Position des Chat-Buttons | bottom-right |
data-title |
Titel im Chat-Header | Chat |
data-subtitle |
Untertitel im Header | Wie kann ich Ihnen helfen? |
data-placeholder |
Platzhaltertext im Eingabefeld | Nachricht eingeben... |
data-auto-open |
Automatisches Öffnen beim ersten Besuch | true |
data-auto-open-delay |
Verzögerung in Sekunden für Auto-Open | 3 |
data-privacy-url |
URL zur Datenschutzerklärung (zeigt Link im Disclaimer) | - |
Überschreiben Sie diese CSS-Variablen im #timm4-chatbot-widget Selektor:
| Variable | Beschreibung | Standard |
|---|---|---|
--primary |
Akzentfarbe (Links, Badges, Header-Icon) | #3b82f6 |
--primary-foreground |
Text auf Primary-Elementen | #f8fafc |
--button |
Hintergrund des Chat- und Sende-Buttons | var(--primary) |
--button-foreground |
Icon-Farbe im Chat- und Sende-Button | var(--primary-foreground) |
--user-bubble |
Hintergrund der Benutzer-Chatblase | var(--primary) |
--user-bubble-foreground |
Textfarbe der Benutzer-Chatblase | var(--primary-foreground) |
--assistant-bubble |
Hintergrund der Bot-Chatblase | var(--muted) |
--assistant-bubble-foreground |
Textfarbe der Bot-Chatblase | var(--foreground) |
--background |
Hintergrund des Modals | #ffffff |
--foreground |
Haupttextfarbe | #09090b |
--muted |
Sekundärer Hintergrund (Vorschläge, etc.) | #f4f4f5 |
--muted-foreground |
Sekundärer Text, Platzhalter | #71717a |
--border |
Rahmenfarben | #e4e4e7 |
--ring |
Fokus-Rahmen des Eingabefelds | #3b82f6 |
Nutzt die neueste GPT-4 Technologie für natürliche Konversationen.
Funktioniert nur auf autorisierten Websites.
Styling per CSS-Variablen individualisierbar.
Optimiert für Desktop und mobile Geräte.