Installation

Voraussetzungen

• Zugriff auf die melibo Plattform

• Zugriff auf den Quellcode oder ein CMS (z. B. Shopify, WordPress, Webflow)

• Eine aktive Widget-ID / Environment

---

Schritt 1: Widget-Code in melibo abrufen

1. Logge dich in die melibo Plattform ein.

2. Gehe zu Chatbot Styler → Installation.

3. Dort findest du den Widget-Code (HTML-Snippet).

4. Kopiere den vollständigen Code.

---

Schritt 2: Widget in die Website einbinden

Der Code muss einmalig in die Website eingefügt werden.

Variante A: Direkte HTML-Einbindung (empfohlen)

• Füge den Code vor dem schließenden </body>-Tag deiner Website ein.

Beispiel:

<!-- melibo Widget -->
<script src="https://widget.melibo.de/loader.js"></script>
<melibo-webchat widget-id="DEINE_WIDGET_ID"></melibo-webchat>

---

Variante B: Einbindung über CMS / Tag Manager

• Shopify: → Theme → „Code bearbeiten“ → theme.liquid → vor </body> einfügen

• WordPress: → Footer (footer.php) oder über ein Header/Footer-Plugin

• Google Tag Manager: → Neuer Tag → „Benutzerdefiniertes HTML“ → Code einfügen → Trigger „All Pages“

---

Schritt 3: Funktion testen

• Website neu laden

• Das Widget sollte unten rechts erscheinen

• Testfrage stellen (z. B. „Hallo“)

---

Optional: Erweiterte Einstellungen

• Design & Farben: im Chatbot Styler

• Begrüßungsnachricht: Welcome-Flow anpassen

• Proaktive Trigger: z. B. nach Zeit, Scroll oder Warenkorb

• Mehrere Umgebungen: Staging & Live mit unterschiedlichen Widget-IDs

---

Häufige Fehler & Tipps

• ❌ Widget erscheint nicht → Domain nicht freigegeben

• ❌ Falsche Widget-ID verwendet

• ✅ Cache leeren / Inkognito testen

• ✅ Änderungen nach dem Speichern neu laden