Aussehen und Position

Die Seite Aussehen und Position ermöglicht es Ihnen, das visuelle Erscheinungsbild und die Platzierung des AAIA-Chatbots auf Ihrer WordPress-Website anzupassen.

🎨 Visuelles Erscheinungsbild

Primärfarbe

Die Primärfarbe definiert die Farbpalette Ihres Chatbots und seiner Oberflächenelemente.

Konfiguration

1. Farbfeld: Klicken Sie auf das Farbfeld, um den WordPress-Farbwähler zu öffnen
2. Hexadezimalcode: Sie können auch direkt einen hexadezimalen Farbcode eingeben (z.B. #f40bc9)
3. Echtzeit-Vorschau: Die Farbe wird sofort in der Vorschau angewendet

Farbauswirkung

Diese Primärfarbe beeinflusst:

• ✨ Das schwebende Chatbot-Symbol
• 💬 Assistenten-Chat-Blasen
• 🔘 Oberflächenschaltflächen
• 🎯 Interaktive Elemente (Links, Aktionen)
• 📱 Chat-Fenster-Header

Best Practices

• Kontrast: Stellen Sie sicher, dass die Farbe einen guten Kontrast zum Hintergrund Ihrer Website bietet
• Konsistenz: Wählen Sie eine Farbe, die mit Ihren Markenrichtlinien harmoniert
• Barrierefreiheit: Vermeiden Sie zu helle Farben, die die Lesbarkeit beeinträchtigen könnten

📍 Chatbot-Position

Dieser Bereich ermöglicht es Ihnen, genau zu kontrollieren, wo der Chatbot auf Ihrer Website erscheint.

Positionsoptionen

Positionsauswahl

Das Dropdown-Menü bietet zwei Optionen:

• Unten Rechts (Standard): Klassische Position, unaufdringlich, für die meisten Websites empfohlen
• Unten Links: Alternative für Websites mit festen Elementen rechts (Kunden-Chat, Social-Buttons, etc.)

Abstand von unten (in Pixel)

• Standardwert: 20 Pixel
• Verwendung: Abstand zwischen dem Chatbot und der unteren Bildschirmkante
• Tipp: Erhöhen Sie diesen Wert (z.B. auf 80px), wenn Sie einen Cookie-Banner oder andere feste Elemente unten haben

Seitenabstand (in Pixel)

• Standardwert: 20 Pixel
• Verwendung: Abstand zwischen dem Chatbot und der linken oder rechten Kante je nach gewählter Position
• Tipp: Anpassen je nach Ihrer Inhaltsbreite und Vorhandensein anderer schwebender Elemente

🖼️ Positionsvorschau

Die visuelle Vorschau zeigt Ihnen:

• 📱 Die relative Position des Chatbots auf dem Bildschirm (türkisfarbener Bereich)
• 🎯 Die genaue Lage der Chat-Schaltfläche (rosa Symbol)
• 📐 Eine vereinfachte Darstellung (nicht maßstabsgetreu)

Wichtiger Hinweis: Die Vorschau ist informativ und vereinfacht. Um das endgültige Ergebnis zu sehen, überprüfen Sie immer Ihre Website im Frontend, besonders auf Mobilgeräten.

⚙️ Empfohlene Konfigurationen

Für die meisten Websites

Position: Unten Rechts
Abstand von unten: 20px
Seitenabstand: 20px

Diese Standardkonfiguration vermeidet Konflikte mit häufigen Oberflächenelementen.

Wenn Sie einen Cookie-Banner haben

Position: Unten Rechts
Abstand von unten: 80px
Seitenabstand: 20px

Die Erhöhung des Abstands von unten verhindert, dass der Chatbot vom Cookie-Banner verdeckt wird.

Für Websites mit fester rechter Seitenleiste

Position: Unten Links
Abstand von unten: 20px
Seitenabstand: 20px

Die linke Positionierung vermeidet Konflikte mit festen Seitenleisten oder Widgets.

Für E-Commerce-Websites mit schwebendem Warenkorb

Position: Unten Links
Abstand von unten: 20px
Seitenabstand: 80px

Diese Konfiguration vermeidet Konflikte mit Warenkorb-Symbolen, die typischerweise unten rechts platziert sind.

🔧 Häufige Probleme und Lösungen

Der Chatbot überlappt mit anderen Elementen

Diagnose: Andere schwebende Elemente (Live-Chat, Social-Buttons, Warenkorb) belegen denselben Bereich.

Lösungen:

1. Position ändern (rechts → links oder umgekehrt)
2. Abstände vergrößern, um mehr Platz zu schaffen
3. Die Anzeigereihenfolge anderer Elemente in Ihrem Theme ändern

Der Chatbot ist auf Mobilgeräten nicht sichtbar

Diagnose: Die konfigurierten Abstände überschreiten die mobile Bildschirmgröße.

Lösungen:

1. Abstände reduzieren (besonders Seitenabstand)
2. Auf mehreren Bildschirmgrößen testen
3. Überprüfen, dass keine CSS-Elemente den Chatbot verbergen

Die Farbe passt nicht zu meinem Theme

Lösungen:

1. Theme inspizieren: Verwenden Sie die Entwicklertools Ihres Browsers (F12), um die Primärfarben Ihrer Website zu identifizieren
2. Farbtools: Nutzen Sie Dienste wie Coolors.co oder Adobe Color, um harmonische Farben zu finden
3. Kontrasttest: Überprüfen Sie die Barrierefreiheit mit Tools wie WebAIM Contrast Checker

Die Vorschau entspricht nicht dem endgültigen Ergebnis

Erklärung: Die Vorschau ist eine vereinfachte Darstellung, die nicht berücksichtigt:

• Ihre tatsächliche Bildschirmgröße
• Die spezifischen CSS-Elemente Ihres Themes
• Responsive Anpassungen

Lösung: Verwenden Sie die Vorschau als allgemeine Orientierung, testen Sie aber immer das Ergebnis auf Ihrer tatsächlichen Website.

💡 Optimierungstipps

Farbauswahl

Farbpsychologie

• Blau: Vertrauen, Professionalität (ideal für B2B)
• Grün: Natur, Gesundheit, Wachstum (perfekt für Ökologie, Wellness)
• Orange: Energie, Kreativität (ausgezeichnet für Conversions)
• Lila: Luxus, Innovation (geeignet für Premium-Produkte)

Technische Tests

• Verwenden Sie einen Kontrastprüfer für WCAG-Barrierefreiheits-Compliance
• Testen Sie die Farbe sowohl auf hellen ALS AUCH auf dunklen Hintergründen
• Überprüfen Sie die Anzeige auf verschiedenen Bildschirmen (unterschiedliche Kalibrierungen)

Positionsoptimierung

Verhaltensanalyse

• Beobachten Sie die Heatmaps Ihrer Website, um Aufmerksamkeitszonen zu identifizieren
• Vermeiden Sie es, den Chatbot in Bereichen mit hoher Interaktion zu platzieren
• Berücksichtigen Sie die typischen Benutzerreisen Ihrer Website

A/B-Tests

• Testen Sie verschiedene Positionen über mehrere Wochen
• Messen Sie das Engagement (Chat-Öffnungen, gesendete Nachrichten)
• Analysieren Sie Benutzerfeedback zur Zugänglichkeit

Responsive Design

Automatische Anpassung

Der AAIA-Chatbot passt sich automatisch an:

• Desktop: Feste Position entsprechend Ihren Einstellungen
• Tablet: Automatische Rand- und Größenanpassung
• Mobil: Touch-Optimierung und Neupositionierung falls notwendig

Multi-Geräte-Tests

• Überprüfen Sie auf iPhone und Android
• Testen Sie im Hoch- und Querformat
• Stellen Sie sicher, dass der Chatbot mit virtuellen Tastaturen zugänglich bleibt

🎯 Einrichtung und Tests

Konfigurationsschritte

1. Ihre Primärfarbe definieren

   • Holen Sie sich den Farbcode aus Ihrem Theme
   • Testen Sie den Kontrast mit Ihrem Website-Hintergrund

2. Die optimale Position wählen

   • Analysieren Sie bestehende Elemente auf Ihrer Website
   • Wählen Sie die am wenigsten aufdringliche Position

3. Abstände anpassen

   • Beginnen Sie mit Standardwerten (20px)
   • Anpassen entsprechend Ihren festen Elementen

4. Auf Ihrer Website testen

   • Überprüfen Sie Desktop- und Mobile-Anzeige
   • Testen Sie die Interaktion (Klick, Öffnung)

5. Basierend auf Feedback optimieren

   • Sammeln Sie Besuchermeinungen
   • Anpassen falls notwendig

Validierungs-Checkliste

• Farbe harmoniert mit Ihren Markenrichtlinien
• Chatbot ist auf allen Seiten sichtbar
• Keine Konflikte mit anderen schwebenden Elementen
• Gute Anzeige auf Mobil und Tablet
• Barrierefreiheit respektiert (ausreichender Kontrast)
• Unaufdringliche Position für Benutzererfahrung

🔗 Nächste Schritte

Sobald Aussehen und Position konfiguriert sind:

1. Konfigurieren Sie Ihren Assistenten: Verhalten und Antworten anpassen
2. Konfigurieren Sie Ihren API-Schlüssel: Verbinden Sie den Chatbot mit KI-Diensten
3. Erweiterte Funktionen erkunden: Benutzerdefinierte Fragen, Integrationen, etc.