> For the complete documentation index, see [llms.txt](https://help.aiaibot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.aiaibot.com/chatbot/stories-and-story-builder/chatbot-aussehen-mit-dem-styler-anpassen.md).

# 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>