# Chatbot Aussehen mit dem Styler anpassen

Sie können den Namen, die Farben, den Avatar und vieles mehr Ihres Chatbots individuell nach Ihren Wünschen designen. Dazu gehen Sie zu *Einstellungen* -> *Chatbot* und wählen anschliessend den Punkt *Aussehen*. Dort können Sie Ihre gewünschten Änderungen vornehmen und gleich mitverfolgen, wie Ihr Chatbot aussehen würde.

<figure><img src="/files/ecyhwcMXlDuNitRZ9mC4" alt=""><figcaption></figcaption></figure>

Der Chatbot lässt sich über eine Vielzahl an unterschiedlichen Anpassungen individuell gestalten.

{% hint style="warning" %}
Damit Ihre Änderungen auch übernommen werden, vergessen Sie nicht diese mit *Update bestätigen* zu speichern.
{% endhint %}

## Name und Farben

Im ersten Abschnitt lassen sich Name und Farbe Ihres Chatbots anpassen.

<figure><img src="/files/l4sLch84bJiysmyt30PH" alt=""><figcaption></figcaption></figure>

## Textanzeige und Abstand

Im Chatbot kann statischer oder dynamischer Text angezeigt werden. Der statische Text wird im Story Builder festgelegt. Der dynamische Text wird von einer AI (z.B. GPT) erzeugt.

### Text Anzeige (Statischer Text)

Der Bereich *Text Anzeige* legt fest, wie statischer Text angezeigt werden soll. Es stehen die Optionen *Auf einmal* oder *Tippend* zur Verfügung. Die Option *Tippend* gibt es in zwei Ausführungen: *normal* oder *schnell*.

### Streaming-Geschwindigkeit (Dynamischer Text)

Der von AI generierte Text wird in Blöcken geliefert. Die Optionen *Normal*, *Schnell* und *Sofort* stehen hier zur Verfügung.

### Abstand (in px)

Hier kann der Abstand des Chatbots zum unteren Bildschirmrand eingestellt werden. Es können unterschiedliche Werte für mobile und Desktop-Geräte gesetzt werden.

<figure><img src="/files/QEOsH9Msyd3DrQ5ihh9j" alt=""><figcaption></figcaption></figure>

## Element-Stil und Schrift

Chat-Elemente lassen sich auf zwei Arten Darstellen: *Standard* oder *Sprechblase*.

Ebenfalls können die Schriftgrösse und die Schriftart angepasst werden.

<figure><img src="/files/LjxoNvyJDXTHUoKuDMoU" alt=""><figcaption></figcaption></figure>

## Hintergrund

Als Hintergrund kann ein Bild gewählt werden oder eine Farbe. Wird er Chatbot auch im Vollbild-Modus angeboten, kann dafür ein eigenes Bild ausgewählt werden.

Mit der Option *Hintergrund-Opazität* (Deckkraft) kann man die Webseite, auf der der Chatbot eingebunden ist, durchscheinen lassen. Umso niedriger die Deckkraft eingestellt wird, umso mehr ist von der Website zu sehen.

<figure><img src="/files/Y6ysHindwLlzxAlcx6yb" alt=""><figcaption></figcaption></figure>

## Avatar und Logo

Der *Avatar* wird angezeigt, wenn der Chatbot noch geschlossen ist. Das *Symbol der Nachrichtenblase* wird neben jeder Nachricht angezeigt, die vom Chatbot kommt.

Das *Logo* wird bei geöffnetem Chatbot am oberen Ende des Chatfensters angezeigt.

<figure><img src="/files/cGSocO6Xa9JlktCWoyig" alt=""><figcaption></figcaption></figure>

## Position, Header und Powered by

Es besteht auch die Möglichkeit den Chatbot auf der linken Seite Ihrer Website zu positionieren. Die Standardposition ist rechts.

Der Header kann bei Bedarf ausgeblendet werden.

Ebenso ist der Hinweis "Powered by aiaibot" am unteren Ende des Chatfensters ausblendbar.

<figure><img src="/files/d3YTdL2aS1HQNl2w2IKN" alt=""><figcaption></figcaption></figure>

## Änderungen speichern

Erst nach dem Klick auf *Update bestätigen* werden Ihre Änderungen übernommen.

<figure><img src="/files/TRVtvZbYRiXXwwpc82ze" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.aiaibot.com/chatbot/stories-and-story-builder/chatbot-aussehen-mit-dem-styler-anpassen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.