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 deinen Website-Besuchern, direkt über einen Voice-Chat-Button mit deinem KI-Assistenten zu interagieren. Das Widget ist vollständig anpassbar und kann nahtlos in jede Website integriert werden.

Widget konfigurieren

Du findest die Web Widget Einstellungen hier:

Geh zu “Assistenten”.
Wähle deinen Assistenten aus.
Klicke auf “Bearbeitung”.
Navigiere zu “Web Widget”.

Live-Vorschau

Sieh eine Echtzeit-Vorschau deines Widgets.
Auto-Updates bei Änderungen.
Teste 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ähle die Position des Widgets (z.B. “Unten rechts”).

Primärfarbe:Anpassung der Widget-Farbe (z.B. #3B82F6).

2. Button-Konfiguration

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

Kopiere den generierten Script-Tag und füge ihn in deine 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üge diesen Script-Tag überall in den HTML-Code deiner Website ein, vorzugsweise vor dem schließenden </body>-Tag.

Data-Attribute Erklärung

Verfügbare Attribute

data-assistant-id:Eindeutige ID deines 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 rechtsist die häufigste und benutzerfreundlichste Position für Chat-Widgets auf Websites.

Anpassungstipps

Best Practices

Farben:Wähle eine Farbe, die zu deinem Branding passt.

Texte:Verwende einladende und klare Formulierungen.

Position:Achte darauf, dass das Widget andere wichtige Elemente nicht verdeckt.

Test:Teste das Widget auf verschiedenen Geräten und Bildschirmgrößen.

Integration in verschiedene Plattformen

WordPress

Füge den Script-Tag in den Footer deines Themes ein oder verwende ein Plugin für benutzerdefinierte Scripts.

HTML/CSS Websites

Füge den Script-Tag direkt vor dem schließenden </body>-Tag in deine HTML-Dateien ein.

React/Vue/Angular

Integriere den Script-Tag über deinen Package Manager oder füge ihn direkt in die index.html ein.

CMS-Systeme

Nutze die Script-Injection-Features deines CMS oder füge den Code in die Template-Dateien ein.

Sicherheit und Performance

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.

Testen des Widgets

Widget testen

Live-Vorschau nutzen:Verwende die Vorschau im Dashboard.

Staging-Umgebung:Teste das Widget zunächst auf einer Test-Website.

Verschiedene Geräte:Teste auf Desktop, Tablet und Mobile.

Browser-Tests:Prüfe die Kompatibilität mit verschiedenen Browsern.

Funktionstest:Starte einen echten Voice-Chat zur Überprüfung.

Häufige Probleme und Lösungen

Troubleshooting

Widget wird nicht angezeigt:Überprüfe, ob der Script-Tag korrekt eingebettet wurde.

Farben falsch:Stelle sicher, dass der Hex-Code (#) korrekt formatiert ist.

Position passt nicht:Verwende die verfügbaren Positionswerte.

Text wird nicht angezeigt:Prüfe die data-attribute auf Schreibfehler.

Hilfe benötigt?

Unser Support-Team kann dir bei der Integration des Web Widgets helfen.

Support kontaktieren

Benötigst du Hilfe bei der Widget-Integration? Kontaktiere unser Support-Team unter support@famulor.io.

Passende Seiten: What Is AI Assistant und Prompt And Tools und Assistant Best Practices.

Füllaudio Deinen Assistenten testen

​Web Widget

​Übersicht

Was ist das Famulor Web Widget?

​Zugriff auf das Web Widget

Widget konfigurieren

​Widget-Konfiguration

Live-Vorschau

Anpassungsoptionen

​Anpassungsoptionen

​1. Allgemeine Einstellungen

Position und Farbe

​2. Button-Konfiguration

​3. Menü-Konfiguration

​Script-Tag Integration

Einfache Integration

​Beispiel Script-Tag

​Data-Attribute Erklärung

Verfügbare Attribute

​Positionierungsoptionen

Verfügbare Positionen

Empfohlene Position

​Anpassungstipps

Best Practices

​Integration in verschiedene Plattformen

WordPress

HTML/CSS Websites

React/Vue/Angular

CMS-Systeme

​Sicherheit und Performance

Produktionsbereit

​Testen des Widgets

Widget testen

​Häufige Probleme und Lösungen

Troubleshooting

​Hilfe benötigt?

Support kontaktieren

Übersicht

Zugriff auf das Web Widget

Widget-Konfiguration

Anpassungsoptionen

1. Allgemeine Einstellungen

2. Button-Konfiguration

3. Menü-Konfiguration

Script-Tag Integration

Beispiel Script-Tag

Data-Attribute Erklärung

Positionierungsoptionen

Anpassungstipps

Integration in verschiedene Plattformen

Sicherheit und Performance

Testen des Widgets

Häufige Probleme und Lösungen

Hilfe benötigt?