🎛️ Übersicht Ihrer Widgets
Dies ist Ihre Widget-Kommandozentrale. Hier sehen Sie jede Chat-Blase, die Sie erstellt haben.- Warum mehr als eines? Sie möchten vielleicht einen “Verkaufs-Bot” für Ihre Preisseite und einen “Tech-Support”-Bot für Ihr Hilfecenter. Hier verwalten Sie alle.
- Wichtige Aktionen pro Widget:
- 📋 Skript kopieren: Den magischen Code zum Einfügen auf Ihrer Website kopieren.
- ⚙️ Konfigurieren: Der spaßige Teil. Farben, Nachrichten und Verhalten anpassen (dazu gleich mehr).
- 🗑️ Löschen: Entfernen, wenn Sie es nicht mehr brauchen.
🎨 Ihr Widget anpassen (Die Kunststunde)
Klicken Sie auf das Zahnrad-Symbol ⚙️, um in das Konfigurationslabor zu gelangen. Machen wir dieses Widget zu Ihrem eigenen.1. Die Grundlagen
- KI-Agent: Welches Gehirn betreibt diesen Chat? Wählen Sie einen Ihrer Agenten aus der Liste.
- Sprachen: Spricht Ihre Seite Deutsch, Englisch und Französisch? Sagen Sie es dem Widget, damit es nicht dumm aussieht.
2. Schwebende Nachricht (Der Haken 🪝)
Lassen Sie Ihren Bot nicht verstecken! Setzen Sie eine einprägsame Nachricht, die über dem Symbol erscheint.- Langweilig: “Hier chatten.”
- Besser: “Hallo! Brauchen Sie Hilfe bei Ihrer Bestellung? 👋”
⚠️ Achtung: Fügen Sie Übersetzungen für alle Ihre Sprachen hinzu. Sie wollen nicht, dass englischsprachige Besucher eine leere Blase sehen!
3. Look & Feel (Schick machen)
- Header: Wählen Sie, was oben angezeigt wird. Nur ein Titel? Ihr Logo? Ein Avatar eines Roboters mit Monokel? Es liegt an Ihnen.
- Farben: Verwenden Sie das Pipetten-Tool 🖊️, um Ihre Marke genau abzubilden.
- Hauptfarbe: Die Nachrichtenblasen und der Sende-Button.
- Textfarbe: Stellen Sie sicher, dass sie lesbar ist! Gelber Text auf weißem Hintergrund ist ein Verbrechen an den Augen.
4. Der Pförtner: Datenerfassungsformulare 📝
Möchten Sie wissen, mit wem Sie sprechen, bevor sie chatten? Aktivieren Sie das Formular.- Fragen Sie nach Name, E-Mail oder Telefon.
- Machen Sie Felder “Pflicht”, wenn Sie streng sind, oder “Optional”, wenn Sie entspannt sind.
- DSGVO / Datenschutz: Fügen Sie einen Link zu Ihrer Richtlinie hinzu, damit Sie rechtskonform bleiben. 👮♂️
5. Intelligente Datenerfassung (Erweitert 🤓)
Das ist für die Technik-Profis. Das Widget kann in die Daten Ihrer Website (localStorage) schauen, um zu sehen, ob der Nutzer bereits eingeloggt ist.
- Wie es hilft: Wenn eingeloggt, kann das Widget “Hallo, Max!” sagen, anstatt erneut nach dem Namen zu fragen.
- Konfiguration: Sie sagen uns den “Schlüssel” (z. B.
user_email) und wir holen den Wert automatisch.
🛠️ Extra-Anpassungen & Layout
Feinjustierung des Erlebnisses:- Position: Links oder Rechts? (Rechts ist Standard, Links für Rebellen).
- Vollbild: Soll der Chat den ganzen mobilen Bildschirm einnehmen? Schalten Sie dies AN.
- Einbetten (DOM-Element): Anstelle einer schwebenden Blase den Chat permanent in ein
<div>auf Ihrer Seite einbetten. Ideal für “Kontakt”-Seiten. - Benutzerdefiniertes CSS: Wenn Sie Code können, schreiben Sie hier Ihre eigenen Styles, um unsere zu überschreiben. Keine Grenzen.
🎨 Benutzerdefiniertes CSS — Der Designer-Leitfaden
Sind die voreingestellten Farben und Optionen zu einschränkend? Das Feld Benutzerdefiniertes CSS gibt Ihnen die volle Kontrolle über das Aussehen des Widgets. Hier können Sie CSS-Regeln schreiben, die Stile anpassen, Standardklassen überschreiben oder sogar Animationen hinzufügen. Wo Sie es finden: Öffnen Sie die Widget-Konfiguration (Symbol ⚙️), klappen Sie den Abschnitt „Benutzerdefiniertes CSS” auf und geben Sie Ihren Code in das Textfeld ein.⚙️ So funktioniert es unter der Haube
Was Sie hier schreiben, ist keine Magie — es ist ziemlich vorhersehbar, wenn man es verstanden hat:- Ihr CSS wird zusammen mit der Widget-Konfiguration gespeichert.
- Wenn das Widget auf der Website des Besuchers geladen wird, wird Ihr CSS als
<style>-Tag innerhalb des Widgets selbst eingefügt. - Es wird nach unseren Standardstilen geladen, sodass Ihre Regeln das letzte Wort haben (sie gewinnen bei Gleichstand).
🎯 Wichtig — Geltungsbereich: Benutzerdefiniertes CSS wirkt sich nur auf das Innere des Widget-Chats aus, nicht auf den Rest Ihrer Webseite. Sie können damit nicht Ihre Website umgestalten, nur das Widget. Und umgekehrt: Die Stile Ihrer Website dringen nicht in das Widget ein, Sie beginnen also mit einer sauberen Leinwand.
💪 Meine Regel greift nicht? Da unsere Basisstile spezifisch sind, „steht es manchmal unentschieden” und Ihre Regel gewinnt nicht. Wenn eine Änderung keine Wirkung zeigt, fügen Sie!importantam Ende der Eigenschaft hinzu (z. B.border-radius: 0 !important;) oder verwenden Sie einen spezifischeren Selektor.
🧩 Selektoren, die Sie verwenden können
Dies sind die echten „Etiketten” der Widget-Teile. Zielen Sie mit Ihrem CSS auf sie:| Selektor | Was es ist |
|---|---|
.widget_chat | Der Wurzelcontainer des gesamten Widgets |
.widget_chat_window | Das Chat-Fenster, wenn es geöffnet ist |
.widget_chat_window_header | Die obere Kopfzeile (Avatar, Titel, Buttons) |
.widget_chat_window_body | Der Bereich, in dem Nachrichten erscheinen |
.widget_row_message | Jede Nachrichtenzeile (verwenden Sie .widget_row_message_end für die des Benutzers) |
.widget_message_bot | Die Nachrichtenblasen des Agenten |
.widget_message_content | Der Text in jeder Blase |
.widget_message_botones / .widget_message_boton | Die Schnellantwort-Buttons |
.widget_chat_window_footer | Die untere Leiste, in der man schreibt |
#inputMessage | Das Texteingabefeld für die Nachricht |
.widget_form_submit | Der Senden-Button |
.widget_chat_formulario | Das Datenerfassungsformular (Name, E-Mail usw.) |
.widget_chat_formulario_body_input_asterisk | Das rote Sternchen bei Pflichtfeldern |
.widget_chat_window_footer_legends | Die Signatur „Generated by lovi.ai” in der Fußzeile |
💡 Praktische Beispiele
Eckigere Bot-Blasen mit Schatten:
🧪 Testen Sie es immer im Playground (siehe unten), bevor Sie veröffentlichen. Ein vergessenes } kann mehrere Stile auf einmal zerstören.
🧪 Testfahrt (Playground)
Bevor Sie den Code auf Ihrer Live-Seite einfügen, machen Sie eine Probefahrt im Playground.- Kollidieren die Farben?
- Ist der Agent höflich?
- Funktioniert das Formular?