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

# WhatsApp Integration & Darstellung

> WhatsApp als Chat-Kanal auf Website und in E-Mails einbinden

Nach der Aktivierung deiner WhatsApp Business API kannst du den Kanal auf verschiedene Arten in deine Gästekommunikation integrieren.

## Integration in DialogShift

WhatsApp wird nahtlos als zusätzlicher Kanal in deine bestehende DialogShift-Umgebung integriert:

<CardGroup cols={2}>
  <Card title="Einheitliche Inbox" icon="inbox">
    Alle WhatsApp-Chats neben anderen Kanälen
  </Card>

  <Card title="Chatbot-Integration" icon="robot">
    Automatische Antworten über alle Kanäle
  </Card>

  <Card title="Team-Kollaboration" icon="users">
    Mehrere Agenten können gleichzeitig arbeiten
  </Card>

  <Card title="Analytics" icon="chart-bar">
    Kanalübergreifende Auswertungen
  </Card>
</CardGroup>

## Website-Integration

### 1. QR-Code Integration

<Info>
  QR-Codes sind ideal für:

  * Hotel-Website
  * Rezeptionsbereich
  * Zimmerkarten
  * Restaurant-Tische
  * Printmaterialien
</Info>

**So funktioniert's:**

1. Gast scannt QR-Code mit Smartphone-Kamera
2. WhatsApp öffnet sich automatisch
3. Vorgefertigte Nachricht kann gesendet werden

### 2. Click-to-Chat Button

<Tabs>
  <Tab title="Standard Grün">
    Der klassische WhatsApp-Button in Corporate Green

    * Hohe Wiedererkennung
    * Offizielles WhatsApp-Branding
    * Ideal für prominente Platzierung
  </Tab>

  <Tab title="Schwarz/Weiß">
    Dezente Variante für minimalistisches Design

    * Passt sich ans Corporate Design an
    * Weniger aufdringlich
    * Für elegante Hotel-Websites
  </Tab>

  <Tab title="Animiert">
    Slide-out Button mit Animation

    * Zieht Aufmerksamkeit auf sich
    * In beiden Farbvarianten verfügbar
    * Moderne User Experience
  </Tab>
</Tabs>

### 3. Chat-Widget Integration

<Note>
  **Beta-Feature:** Der WhatsApp-Button kann direkt in dein bestehendes DialogShift Chat-Widget integriert werden. Kontaktiere den Support zur Aktivierung.
</Note>

Vorteile:

* Ein Widget für alle Kanäle
* Gast wählt bevorzugten Kanal
* Einheitliches Design
* Zentrale Konfiguration

## E-Mail Integration

### Click-to-Chat in E-Mails

Integriere WhatsApp-Links in deine Hotel-E-Mails:

<Steps>
  <Step title="Link generieren">
    Format: `https://wa.me/49XXXXXXXXX?text=Hallo%20Hotel`
  </Step>

  <Step title="Button erstellen">
    WhatsApp stellt offizielle Button-Grafiken zur Verfügung
  </Step>

  <Step title="In E-Mails einbinden">
    * Buchungsbestätigungen
    * Pre-Arrival E-Mails
    * Post-Stay Feedback
    * Newsletter
  </Step>
</Steps>

### Best Practices für E-Mail-Integration

<CardGroup cols={2}>
  <Card title="Klarer Call-to-Action" icon="hand-pointer">
    "Fragen zur Buchung? Schreibe uns auf WhatsApp!"
  </Card>

  <Card title="Kontext mitgeben" icon="message">
    Vorgefertigte Nachricht mit Buchungsnummer
  </Card>

  <Card title="Alternative bieten" icon="envelope">
    Auch E-Mail/Telefon als Option anbieten
  </Card>

  <Card title="Erwartungen setzen" icon="clock">
    Antwortzeiten kommunizieren
  </Card>
</CardGroup>

## Technische Implementierung

### URL-Parameter für Click-to-Chat

```
https://wa.me/[Telefonnummer]?text=[URL-encodierter Text]
```

**Beispiel:**

```
https://wa.me/4989123456789?text=Hallo%20Hotel%20Seeblick%2C%20ich%20habe%20eine%20Frage%20zu%20meiner%20Buchung%20%23123456
```

### QR-Code Best Practices

* **Größe:** Mindestens 3x3 cm für Print
* **Kontrast:** Hoher Kontrast zum Hintergrund
* **Testing:** Mit verschiedenen Geräten testen
* **Call-to-Action:** "Scannen für WhatsApp-Chat"

## Platzierung & Sichtbarkeit

### Empfohlene Positionen auf der Website

1. **Header/Navigation:** Immer sichtbar
2. **Kontaktseite:** Bei anderen Kontaktoptionen
3. **Buchungsprozess:** Für schnelle Fragen
4. **Footer:** Als Standard-Kontaktoption
5. **Floating Button:** Rechts unten (Mobile-friendly)

### Vor-Ort Platzierung

<AccordionGroup>
  <Accordion title="Rezeption">
    * Aufsteller am Check-in
    * Digital Signage Displays
    * Visitenkarten mit QR-Code
  </Accordion>

  <Accordion title="Hotelzimmer">
    * Infokarte auf dem Nachttisch
    * QR-Code für Zimmerservice
    * TV-Willkommensbildschirm
  </Accordion>

  <Accordion title="Restaurant/Bar">
    * Tischaufsteller
    * Speisekarte
    * Feedback-Karten
  </Accordion>

  <Accordion title="Weitere Bereiche">
    * Aufzüge
    * Parkplatz
    * Spa/Wellness
    * Konferenzräume
  </Accordion>
</AccordionGroup>

## Messaging-Strategie

### Erstansprache optimieren

Die erste Nachricht des Gastes ist entscheidend:

<Tip>
  **Vorgefertigte Nachrichten nutzen:**

  * "Hallo, ich bin Gast im Hotel und habe eine Frage"
  * "Ich möchte einen Tisch reservieren"
  * "Brauche Hilfe beim Check-in"
</Tip>

### Multi-Channel-Strategie

<Info>
  WhatsApp sollte Teil deiner Gesamtstrategie sein:

  * Website-Chat für anonyme Anfragen
  * WhatsApp für persönliche Betreuung
  * E-Mail für formelle Kommunikation
  * Telefon für dringende Fälle
</Info>

## Erfolgsmessung

Wichtige KPIs für WhatsApp:

* Anzahl initiierter Chats
* Response Time
* Conversation Resolution Rate
* Gästezufriedenheit
* Conversion Rate (Buchungen via WhatsApp)

<Warning>
  **Datenschutz beachten:** Stell sicher, dass deine WhatsApp-Nutzung DSGVO-konform ist und informiere Gäste über die Datenverarbeitung.
</Warning>