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

# Erscheinungsbild

> Gestalte Chat-Interface und Launcher passend zu deiner Marke – mit Live-Vorschau beim Bearbeiten.

Das Erscheinungsbild steuert, wie dein Assistent in deinem Shop aussieht: Farben, Header, Schriftarten und Inhalte des Chat-Fensters sowie Icon, Farbe, Position und Hinweistext des Launcher-Buttons. Eine Live-Vorschau aktualisiert sich beim Bearbeiten, sodass du jede Änderung vor dem Veröffentlichen siehst.

## Das Interface gestalten

<Steps>
  <Step title="Erscheinungsbild öffnen">
    Gehe in der [homie Plattform](https://app.yourhomie.ai) zu **Assistenten**, wähle deinen Assistenten und öffne **Einstellungen → Style**.
  </Step>

  <Step title="Interface anpassen">
    Lege Anzeigename und Headline, Farben, Header-Bild, Nachrichten-Platzhalter, Begrüßungsnachricht, Beispielnachrichten und Schriftarten des Chat-Fensters fest. Die Vorschau zeigt jede Änderung sofort.
  </Step>

  <Step title="Launcher konfigurieren">
    Wähle das Launcher-Icon (Standard behalten oder eigenes hochladen) und lege Farbe, Rundung, Größe, Bildabstand, Abstand zum Bildschirmrand, Position und Hinweistext fest.
  </Step>

  <Step title="Vorschau prüfen und speichern">
    Bestätige das Aussehen in der Live-Vorschau und speichere, um deine Änderungen zu veröffentlichen.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-09.56.10.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=c90befb112ee24ad59ee2d597dab6c29" alt="Bildschirmfoto 2026 07 01 Um 09 56 10" width="2578" height="1610" data-path="images/Bildschirmfoto-2026-07-01-um-09.56.10.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-09.58.10.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=7f3dc0eff8364c32a769d4313cf3bbb9" alt="Bildschirmfoto 2026 07 01 Um 09 58 10" width="2580" height="1468" data-path="images/Bildschirmfoto-2026-07-01-um-09.58.10.png" />
</Frame>

## Interface-Optionen

| Option                      | Was sie steuert                                                                                       |
| --------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Anzeigename / Headline**  | Der Name und die optionale eigene Headline im Chat-Header.                                            |
| **Farben**                  | Die Primärfarbe sowie optionale Header-, Hintergrund- und Nutzernachrichten-Farben.                   |
| **Header-Bild**             | Ein optionales Bild im Chat-Header.                                                                   |
| **Nachrichten-Platzhalter** | Der Platzhaltertext im Eingabefeld des Chats.                                                         |
| **Begrüßungsnachricht**     | Die erste Nachricht, die beim Öffnen des Chats erscheint.                                             |
| **Beispielnachrichten**     | Vorschläge, die Besucher:innen den Gesprächseinstieg erleichtern, optional in zufälliger Reihenfolge. |
| **Schriftarten**            | Die primäre und sekundäre Schriftart.                                                                 |
| **Footer**                  | Optionaler Footer-Inhalt im Chat-Fenster (z.B. Link zum Datenschutz).                                 |

## Launcher-Optionen

| Option                             | Was sie steuert                                                            |
| ---------------------------------- | -------------------------------------------------------------------------- |
| **Icon-Bild**                      | Das Launcher-Icon – Standard behalten oder eigenes Bild hochladen.         |
| **Farbe**                          | Die Hintergrundfarbe des Launchers.                                        |
| **Rundung**                        | Den Launcher komplett runden oder einzelne Eckenradien festlegen.          |
| **Größe**                          | Die Größe des Launcher-Buttons.                                            |
| **Bildabstand**                    | Der Abstand zwischen Icon-Bild und Button-Rand.                            |
| **Abstand zur Seite & nach unten** | Der Abstand des Launchers zum Bildschirmrand, in Pixel oder Prozent.       |
| **Position**                       | Position des Launchers, links oder rechts.                                 |
| **Hinweistext**                    | Ein optionales Label, das beim Überfahren (Hover) des Launchers erscheint. |

<Tip>
  Stimme deine Akzentfarbe und den Launcher auf deine Storefront ab, damit sich der Assistent wie ein nativer Teil deiner Seite anfühlt.
</Tip>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Widget-Verhalten steuern" icon="window" href="/de/user-guide/assistants/widget-behavior">
    Lege Anzeigemodus und Aktivierungsnachricht fest.
  </Card>

  <Card title="Interface übersetzen" icon="language" href="/de/user-guide/assistants/translations">
    Lokalisiere Launcher-Labels und Chat-Texte.
  </Card>
</CardGroup>