Web Widget Das Famulor einbettbare Chat Widget ist ein produktionsreifes, anpassbares und sicheres Chat Widget für Websites. Das Widget kann über einen einzigen <script> Tag eingebettet werden—kein Backend-Proxy erforderlich.
Übersicht Was ist das Famulor Web Widget? Das Famulor Web Widget ermöglicht es Ihren Website-Besuchern, direkt über einen Voice-Chat-Button mit Ihrem KI-Assistenten zu interagieren. Das Widget ist vollständig anpassbar und kann nahtlos in jede Website integriert werden.
Widget konfigurieren Sie finden die Web Widget Einstellungen hier:
Gehen Sie zu “Assistenten”.
Wählen Sie Ihren Assistenten aus.
Klicken Sie auf “Bearbeitung”.
Navigieren Sie zu “Web Widget”.
Live-Vorschau
Sehen Sie eine Echtzeit-Vorschau Ihres Widgets.
Auto-Updates bei Änderungen.
Testen Sie die Funktionalität direkt.
Anpassungsoptionen
Position auf der Website wählen.
Primärfarbe anpassen.
Button- und Menü-Texte bearbeiten.
Anpassungsoptionen 1. Allgemeine Einstellungen
Position und Farbe Position: Wählen Sie die Position des Widgets (z.B. “Unten rechts”). Primärfarbe: Anpassung der Widget-Farbe (z.B. #3B82F6). // Primärer Text, der auf dem Widget-Button angezeigt wird Need help? ```text // Sekundärer Text, der unter dem Haupt-Button-Text angezeigt wird Start voice chat ✨ 3. Menü-Konfiguration // Titel im Widget-Header Voice AI ```text // Untertitel im Widget-Header Ready to help ✨ ```text // Titel, der angezeigt wird, wenn das Modal geöffnet wird Ready to chat? ```text // Text auf dem Button, der das Gespräch startet Start Voice Chat ```text // Beschreibungstext im Modal Click below to start your voice conversation Script-Tag Integration
Einfache Integration Kopieren Sie den generierten Script-Tag und fügen Sie ihn in Ihre Website ein:
Beispiel Script-Tag < script src = "https://app.famulor.de/embed.js" data-assistant-id = "5c92d914-9099-4d5-8f09-096ada2ade0" data-position = "right-bottom" data-color = "#3B82F6" data-header-title = "Voice AI" data-header-subtitle = "Ready to help ✨" data-button-main-text = "Need help?" data-button-sub-text = "Start voice chat ✨" data-start-button-text = "Start Voice Chat" data-modal-title = "Ready to chat?" data-modal-description = "Click below to start your voice conversation" > </ script > Verwendung: Fügen Sie diesen Script-Tag überall in den HTML-Code Ihrer Website ein, vorzugsweise vor dem schließenden </body>-Tag.
Data-Attribute Erklärung
Verfügbare Attribute data-assistant-id: Eindeutige ID Ihres Assistenten. data-position: Position des Widgets (z.B. “right-bottom”). data-color: Primärfarbe des Widgets. data-header-title: Titel im Widget-Header. data-header-subtitle: Untertitel im Widget-Header. data-button-main-text: Haupt-Button-Text. data-button-sub-text: Unter-Button-Text. data-start-button-text: Text des Start-Buttons. data-modal-title: Modal-Titel. data-modal-description: Modal-Beschreibung. Positionierungsoptionen
Verfügbare Positionen right-bottom: Unten rechts left-bottom: Unten links right-top: Oben rechts left-top: Oben links
Empfohlene Position Unten rechts ist die häufigste und benutzerfreundlichste Position für Chat-Widgets auf Websites.
Anpassungstipps
Best Practices Farben: Wählen Sie eine Farbe, die zu Ihrem Branding passt. Texte: Verwenden Sie einladende und klare Formulierungen. Position: Achten Sie darauf, dass das Widget andere wichtige Elemente nicht verdeckt. Test: Testen Sie das Widget auf verschiedenen Geräten und Bildschirmgrößen.
WordPress Fügen Sie den Script-Tag in den Footer Ihres Themes oder verwenden Sie ein Plugin für benutzerdefinierte Scripts.
HTML/CSS Websites Fügen Sie den Script-Tag direkt vor dem schließenden </body>-Tag in Ihre HTML-Dateien ein.
React/Vue/Angular Integrieren Sie den Script-Tag über Ihren Package Manager oder fügen Sie ihn direkt in die index.html ein.
CMS-Systeme Nutzen Sie die Script-Injection-Features Ihres CMS oder fügen Sie den Code in die Template-Dateien ein.
Produktionsbereit Sicher: Alle Daten werden verschlüsselt übertragen. Schnell: Minimale Ladezeiten durch optimierte Scripts. Zuverlässig: 99.9% Verfügbarkeit. DSGVO-konform: Entspricht deutschen Datenschutzbestimmungen.
Widget testen Live-Vorschau nutzen: Verwenden Sie die Vorschau im Dashboard. Staging-Umgebung: Testen Sie das Widget zunächst auf einer Test-Website. Verschiedene Geräte: Testen Sie auf Desktop, Tablet und Mobile. Browser-Tests: Prüfen Sie die Kompatibilität mit verschiedenen Browsern. Funktionstest: Starten Sie einen echten Voice-Chat zur Überprüfung. Häufige Probleme und Lösungen
Troubleshooting Widget wird nicht angezeigt: Überprüfen Sie, ob der Script-Tag korrekt eingebettet wurde. Farben falsch: Stellen Sie sicher, dass der Hex-Code (#) korrekt formatiert ist. Position passt nicht: Verwenden Sie die verfügbaren Positionswerte. Text wird nicht angezeigt: Prüfen Sie die data-attribute auf Schreibfehler. Hilfe benötigt? Unser Support-Team kann Ihnen bei der Integration des Web Widgets helfen.
Support kontaktieren Benötigen Sie Hilfe bei der Widget-Integration? Kontaktieren Sie unser Support-Team unter support@famulor.io . 
