> ## Documentation Index
> Fetch the complete documentation index at: https://docs.famulor.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widget

> Lerne, wie du das Famulor Chat Widget auf deiner Website einbettest

# Web Widget

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

## Übersicht

<Card title="Was ist das Famulor Web Widget?" color="blue">
  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.
</Card>

## Zugriff auf das Web Widget

<Card title="Widget konfigurieren" icon="headset" iconType="regular" color="green">
  Du findest die Web Widget Einstellungen hier:

  1. Geh zu "Assistenten".
  2. Wähle deinen Assistenten aus.
  3. Klicke auf "Bearbeitung".
  4. Navigiere zu "Web Widget".
</Card>

## Widget-Konfiguration

<CardGroup cols={2}>
  <Card title="Live-Vorschau" icon="eye" color="blue">
    * Sieh eine Echtzeit-Vorschau deines Widgets.

    * Auto-Updates bei Änderungen.

    * Teste die Funktionalität direkt.
  </Card>

  <Card title="Anpassungsoptionen" icon="palette" color="purple">
    * Position auf der Website wählen.

    * Primärfarbe anpassen.

    * Button- und Menü-Texte bearbeiten.
  </Card>
</CardGroup>

## Anpassungsoptionen

### 1. Allgemeine Einstellungen

<Card title="Position und Farbe" icon="book-open-reader" color="orange">
  *

  Position:

  Wähle die Position des Widgets (z.B. "Unten rechts").

  *

  Primärfarbe:

  Anpassung der Widget-Farbe (z.B. #3B82F6).
</Card>

### 2. Button-Konfiguration

<CodeGroup>
  ````text theme={null}
  // 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 ✨
  ````
</CodeGroup>

### 3. Menü-Konfiguration

<CodeGroup>
  ````text theme={null}
  // 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
  ````
</CodeGroup>

## Script-Tag Integration

<Card title="Einfache Integration" icon="code" color="green">
  Kopiere den generierten Script-Tag und füge ihn in deine Website ein:
</Card>

### Beispiel Script-Tag

```html theme={null}
<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>
```

<Warning>
  **Verwendung:** Füge diesen Script-Tag überall in den HTML-Code deiner Website ein, vorzugsweise vor dem schließenden `&lt;/body&gt;`-Tag.
</Warning>

## Data-Attribute Erklärung

<Card title="Verfügbare Attribute" icon="list" color="blue">
  *

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

## Positionierungsoptionen

<CardGroup cols={1}>
  <Card title="Verfügbare Positionen" icon="compass" color="green">
    *

    right-bottom:

    Unten rechts

    *

    left-bottom:

    Unten links

    *

    right-top:

    Oben rechts

    *

    left-top:

    Oben links
  </Card>

  <Card title="Empfohlene Position" icon="star" color="blue">
    Unten rechts

    ist die häufigste und benutzerfreundlichste Position für Chat-Widgets auf Websites.
  </Card>
</CardGroup>

## Anpassungstipps

<Card title="Best Practices" icon="lightbulb" color="yellow">
  *

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

## Integration in verschiedene Plattformen

<CardGroup cols={2}>
  <Card title="WordPress" icon="wordpress" color="blue">
    Füge den Script-Tag in den Footer deines Themes ein oder verwende ein Plugin für benutzerdefinierte Scripts.
  </Card>

  <Card title="HTML/CSS Websites" icon="code" color="green">
    Füge den Script-Tag direkt vor dem schließenden `&lt;/body&gt;`-Tag in deine HTML-Dateien ein.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="React/Vue/Angular" icon="react" color="orange">
    Integriere den Script-Tag über deinen Package Manager oder füge ihn direkt in die `index.html` ein.
  </Card>

  <Card title="CMS-Systeme" icon="cubes" color="purple">
    Nutze die Script-Injection-Features deines CMS oder füge den Code in die Template-Dateien ein.
  </Card>
</CardGroup>

## Sicherheit und Performance

<Card title="Produktionsbereit" icon="shield" color="green">
  *

  Sicher:

  Alle Daten werden verschlüsselt übertragen.

  *

  Schnell:

  Minimale Ladezeiten durch optimierte Scripts.

  *

  Zuverlässig:

  99.9% Verfügbarkeit.

  *

  DSGVO-konform:

  Entspricht deutschen Datenschutzbestimmungen.
</Card>

## Testen des Widgets

<Card title="Widget testen" icon="vial" color="purple">
  *

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

## Häufige Probleme und Lösungen

<Card title="Troubleshooting" icon="circle-question" color="red">
  *

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

## Hilfe benötigt?

<Tip>
  Unser Support-Team kann dir bei der Integration des Web Widgets helfen.
</Tip>

<Card title="Support kontaktieren" icon="headphones" color="blue" href="mailto:support@famulor.io">
  Benötigst du Hilfe bei der Widget-Integration? Kontaktiere unser Support-Team unter [support@famulor.io](mailto:support@famulor.io).
</Card>

<Tip>
  Passende Seiten: [What Is AI Assistant](/de/ai-assistants/what-is-ai-assistant) und [Prompt And Tools](/de/ai-assistants/prompt-and-tools) und [Assistant Best Practices](/de/ai-assistants/assistant-best-practices).
</Tip>