> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inboxmate.psquared.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget gestalten

> Farbe, Thema, Symbol, Position und der angedockte Modus — alles im Reiter Widget.

Der Reiter **Widget** bestimmt, wie das Chat-Fenster auf Ihrer Website aussieht. Ganz unten schalten Sie die Vorschau ein — der Chat-Knopf erscheint dann unten rechts am Bildschirm, genau wie später auf Ihrer Website.

<Frame caption="Die Vorschau ist der echte Chatbot. Der Knopf erscheint unten rechts am Bildschirm, nicht in der Karte.">
  <img src="https://mintcdn.com/psquaredgmbh/5L90JYrpgT2pSPmk/images/chatbot/widget-vorschau.png?fit=max&auto=format&n=5L90JYrpgT2pSPmk&q=85&s=99dba8d988aa576f1603e8cd8e7ee7df" alt="Reiter Widget mit geöffneter Vorschau" width="1680" height="1000" data-path="images/chatbot/widget-vorschau.png" />
</Frame>

## Farbe und Thema

| Einstellung     | Bedeutung                                                              |
| --------------- | ---------------------------------------------------------------------- |
| **Primärfarbe** | Kopfzeile, Senden-Knopf, Startknopf und Akzente                        |
| **Design**      | Hell, dunkel oder automatisch nach der Systemeinstellung des Besuchers |
| **Widget-Stil** | Standard oder Farbverlauf                                              |

<Tip>
  Prüfen Sie Ihre Farbe in beiden Themen. Ein helles Logo verschwindet im hellen Thema, wenn es keine farbige Scheibe hinter sich hat.
</Tip>

## Startknopf

| Einstellung                        | Bedeutung                                                                             |
| ---------------------------------- | ------------------------------------------------------------------------------------- |
| **Button-Symbol**                  | Vorlagen oder ein eigenes Bild, am besten PNG oder SVG mit durchsichtigem Hintergrund |
| **Button-Größe**                   | Klein, mittel, groß oder sehr groß                                                    |
| **Button-Animation**               | Einblenden, Hochschieben, Hüpfen, Skalieren oder keine                                |
| **Button-Erscheinungsverzögerung** | Nach wie vielen Sekunden der Knopf erscheint                                          |
| **Position**                       | Unten links oder unten rechts                                                         |

### Eigenes Symbol hochladen

1. Agenten öffnen, Reiter **Widget**
2. Unter **Button-Symbol** die Option für ein eigenes Bild wählen
3. Bild hochladen

<Tip>
  Laden Sie nur die Bildmarke hoch, ohne Schriftzug. Im Knopf ist wenig Platz; ein Logo mit Text wird unlesbar klein. Die Marke sollte optisch mittig sitzen — viele Logodateien haben links oder unten mehr Luft, was im runden Knopf sofort auffällt.
</Tip>

## Avatar im Gespräch

Der **Avatar-Stil** entscheidet, wie das Symbol neben den Nachrichten des Agenten aussieht. Ein eigenes Logo bekommt dabei eine Scheibe in Ihrer Primärfarbe, damit es auf hellem Hintergrund sichtbar bleibt.

## Angedockter Modus

Standardmäßig legt sich das Chat-Fenster über die Seite. Im angedockten Modus sitzt es stattdessen fest am rechten Rand und **schiebt den Seiteninhalt nach links** — als säße ein Kollege daneben.

| Einstellung           | Bedeutung                      |
| --------------------- | ------------------------------ |
| **Darstellung**       | *Überlagernd* oder *Angedockt* |
| **Breite des Panels** | 320 bis 560 Pixel, Vorgabe 400 |

<Info>
  Angedockt wirkt erst ab 1024 Pixel Fensterbreite. Darunter — also auf dem Handy — bleibt es überlagernd, weil zum Schieben kein Platz wäre.
</Info>

Der Zustand bleibt über Seitenwechsel erhalten: War das Panel offen, ist es auf der nächsten Seite wieder offen. Schließt der Besucher es, bekommt die Seite ihre volle Breite zurück und der Startknopf erscheint wieder.

## Statusmeldung während der Tool-Nutzung

Läuft im Hintergrund ein Werkzeug, etwa eine Katalogsuche, können Sie dem Besucher eine kurze Meldung zeigen — zum Beispiel *„Ich sehe im Katalog nach …"*. Ohne diese Meldung wirken längere Suchen wie ein Stillstand.

## Branding

Der Hinweis *„Powered by InboxMate"* lässt sich je nach Tarif ausblenden:

| Tarif        | Branding                                  |
| ------------ | ----------------------------------------- |
| Starter, Pro | wird angezeigt                            |
| Business     | kann entfernt werden, White-Label möglich |

<Warning>
  Der Hinweis, dass hier eine KI antwortet, gehört nicht zum Branding. Er bleibt auch dann stehen, wenn Sie das Branding entfernen. In der Oberfläche lässt er sich nicht abschalten.
</Warning>

## Vorschau

Ganz unten im Reiter Widget steht die Karte **Vorschau**. Ist sie aktiv, erscheint der Chat-Knopf unten rechts am Bildschirm — nicht in der Karte. Sie können darin tippen wie ein Besucher.

Nach einer Änderung klicken Sie **Vorschau aktualisieren**, sonst zeigt das Fenster noch den alten Stand.

Am schmalen Bildschirm — unter 768 Pixel — erscheint statt der Vorschau der Hinweis, dass sie nur am Rechner läuft.

<Info>
  Die Vorschau lädt eine eigene Kopie des Widget-Programms, die mit der App ausgeliefert wird. Nach einer Aktualisierung der Widget-Technik kann sie darum kurz hinter dem Stand auf Ihrer Website liegen. Was der Besucher sieht, ist immer die veröffentlichte Fassung.
</Info>