Widget customizen

CSS, optionale Features (QR-Scanner, Voice-Input), eigenes HTML.

Das Widget bringt ein funktionales Default-Design mit. Wenn du's an deine Marke anpassen willst, passiert das in widget.php in deinem Workspace.

#Die Datei

<?php
return [
    'widget.css' => <<<'CSS'
        /* deine Overrides kommen hierher */
    CSS,

    // optional:
    'widget.html' => '...',
    'widget.qr_scanner' => true,
    'widget.voice_input' => true,
];

#CSS anpassen

Das Widget läuft im Shadow DOM — dein CSS beeinflusst nicht die Host-Website, und die Host-Website beeinflusst nicht das Widget. Du überschreibst das Default-CSS komplett.

#Zentrale Selektoren

#Beispiel: Markenfarben

'widget.css' => <<<'CSS'
    #chat-box {
        background: #0f0f0f;
        border-radius: 12px;
        font-family: "Inter", sans-serif;
    }

    .bubble.user {
        background: #ED5793;
        color: #fff;
    }

    .bubble.assistant {
        background: #1e1e1e;
        color: #e6e6e6;
    }

    .suggestion-button {
        border: 1px solid #ED5793;
        color: #ED5793;
    }
    .suggestion-button:hover {
        background: #ED5793;
        color: #fff;
    }

    #chat-input-wrapper {
        border: 1px solid rgba(255,255,255,0.15);
    }
    #chat-input {
        color: #e6e6e6;
    }
CSS,

#Dunkles Theme (Vollständig)

Ein vollständiges Dark-Theme bekommst du von bestehenden Workspaces als Vorlage — frag deinen Betreiber, ob du dir eine Beispiel-Config kopieren kannst.

#Scrollbars

#chat-log::-webkit-scrollbar { width: 6px; }
#chat-log::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

#Optionale Features

#QR-Scanner

Wenn dein Workflow QR-Codes benötigt (z. B. Produkt-Scan, Ticket-Einscannen), aktiviere den Scanner:

'widget.qr_scanner' => true,

Ein Kamera-Button erscheint neben dem Upload-Button. Klick öffnet einen Vollbild-Modal mit Kamera-Stream, erkennt den QR-Code, und schreibt den Wert ins Input-Feld.

Voraussetzungen:

• HTTPS (Browser blockt Kamera-Zugriff auf HTTP)
• Benutzer muss Kamera-Berechtigung geben
• Funktioniert auf modernen Mobile-Browsern und Desktop-Chrome/Safari/Edge

#Voice-Input

Spracheingabe ins Text-Feld:

'widget.voice_input' => true,

Ein Mikrofon-Button erscheint. Klick startet SpeechRecognition (deutsch, einmalig). Der erkannte Text landet im Input, wird aber nicht automatisch gesendet — der Benutzer prüft und schickt manuell.

Voraussetzungen:

• Chrome / Edge (Safari & Firefox haben limitierten/keinen Support)
• Mikrofon-Berechtigung
• HTTPS

#Automatisch in Assistenten

Wenn der Chat in einem Assistant-Kontext läuft (chat_id beginnt mit task_), werden QR-Scanner und Voice-Input automatisch aktiviert — unabhängig von den Widget-Config-Flags. Das ist bewusst: Assistant-Chats sind typisch Mitarbeiter-Chats, und dort sind diese Features erwünscht.

#Eigenes HTML

Normalerweise reicht CSS. Wenn du die Struktur des Widgets ändern willst (z. B. eigenen Header, Branding-Leiste), überschreibst du widget.html:

'widget.html' => <<<'HTML'
    <div id="chat-box">
        <div id="chat-header">
            <img src="https://deine-domain.com/logo.svg" alt="Firma">
            <span>Online-Assistent</span>
        </div>
        <div id="chat-log"></div>
        <div id="chat-dropzone"></div>
        <div id="chat-input-wrapper">
            <form id="chat-form">
                <textarea id="chat-input" placeholder="Deine Nachricht..."></textarea>
                <button id="upload-button" type="button"></button>
                <button id="qr-scan-button" type="button"></button>
                <button id="voice-button" type="button"></button>
                <button id="send-button" type="submit"></button>
            </form>
        </div>
    </div>
HTML,

Wichtig: Die IDs der Elemente (#chat-log, #chat-form, #chat-input, die Buttons) müssen bleiben, sonst findet das Widget-Skript sie nicht und der Chat funktioniert nicht mehr. Du kannst Elemente umsortieren, zusätzliche Wrapper einbauen oder Branding ergänzen — aber die Kern-IDs nicht umbenennen oder löschen.

#Testen

CSS-Änderungen siehst du sofort:

tm watch     # Auto-Sync beim Speichern

In einem zweiten Terminal:

tm chat --public   # zeigt das Widget-Verhalten (aber ohne CSS im Terminal)

Für echtes visuelles Testing: die Beispiel-Embed-Seite deines Betreibers oder eine lokale HTML-Datei mit eingebettetem Script-Tag.

#Branding-Checkliste

Bevor das Widget live auf der Kundenseite geht:

• Hintergrund-Farbe passt zum Website-Design
• Bubble-Farben (user vs. assistant) sind ausreichend kontrastreich
• Buttons sind erkennbar (Kontrast, Hover-State)
• Schriftart passt zur Website (oder inherit)
• Schriftgrößen lesbar auf Mobile
• Icons (Upload, Send) sind sichtbar — Farbe und Größe prüfen
• Scrollbar dezent
• Test auf mobile Viewport (unter 400px Breite)
• Test mit langen Nachrichten — bricht die Bubble korrekt um?
• Test mit Bild-Upload — Preview sichtbar?

#Zurück zum Default

Wenn du widget.php komplett löschst, greift wieder der Default-Look. Kein Fallback-Verhalten sonst — entweder du lieferst widget.css oder nicht.