Den Code in Ihre Website einfügen
Das funktioniert auf jeder Website, auch mit Wix, Squarespace, Webflow oder einer eigenen HTML-Seite.
Schritt 1: Widget-Code kopieren
Gehen Sie im Dashboard zu "Einstellungen" → "Installation" und kopieren Sie den Embed-Code. Denselben Code finden Sie auch unter "Übersicht" und unter "Integrationen" → "Andere Website".
Schritt 2: Code vor </body> einfügen
Fügen Sie den Code auf jeder Seite direkt vor dem </body>-Tag ein, oder in das Feld für eigenen Code bzw. Footer-Skripte Ihres Website-Baukastens.
Schritt 3: Website prüfen
Öffnen Sie Ihre Website in einem neuen Fenster. Unten in der Ecke erscheint der Chat-Button. Senden Sie eine Testnachricht; das Gespräch erscheint in Ihrem "Gemeinsamen Posteingang".
Ist der Code mit dem Hinweis ausgeblendet, dass der Widget-Code pausiert ist? Dann fehlt noch der Auftragsverarbeitungsvertrag. Akzeptieren Sie ihn in Ihrem Konto auf twilper.com.
WordPress und WooCommerce
Schritt 1: Über WordPress.org installieren
Gehen Sie in WordPress zu Plugins → Neues Plugin hinzufügen, suchen Sie nach "TwilperChat", klicken Sie auf Jetzt installieren und danach auf Aktivieren.
Schritt 2: Oder die ZIP-Datei hochladen
Können Sie keine Plugins von WordPress.org installieren? Laden Sie unter "Integrationen" → "WordPress" das "TwilperChat WordPress-Plugin (.zip)" herunter und laden Sie es über Plugins → Neues Plugin hinzufügen → Plugin hochladen hoch. Aktivieren Sie das Plugin danach.
Schritt 3: Widget-Schlüssel eintragen
Gehen Sie in WordPress zu Einstellungen → TwilperChat → Verbindung. Fügen Sie den Schlüssel ein, der im Dashboard bei den WordPress-Schritten steht, speichern Sie die Verbindung und testen Sie sie.
Schritt 4: Optional: Seiten und Produkte synchronisieren
Soll die KI Ihre Seiten, Beiträge und WooCommerce-Produkte kennen? Erstellen Sie im Dashboard unter "Integrationen" einen Sync-Key ("Sync-Key für das WordPress-Plugin") und fügen Sie ihn im Plugin ein. Der Schlüssel wird nur einmal angezeigt.
Shopify
Schritt 1: Shopify-Eintrag öffnen
Gehen Sie zu "Integrationen", wählen Sie "Shopify" und klicken Sie auf "Shopify-Eintrag öffnen".
Schritt 2: App installieren
Schließen Sie die Installation in Shopify ab. Das Widget wird in Ihrem aktiven Theme eingeschaltet; prüfen Sie es kurz in Ihrem Shop.
Schritt 3: Synchronisierung prüfen
Prüfen Sie in Twilper, ob die Produktsynchronisierung abgeschlossen ist, damit die KI Fragen zu Ihren Produkten beantworten kann.
Zeigt die Schaltfläche "Neue Shopify-Installationen sind pausiert"? Dann können Sie den Widget-Code vorerst selbst in Ihr Theme einfügen oder Produkte manuell mit Ihrer Shop-Adresse (ihrshop.myshopify.com) synchronisieren.
Wurde mein Widget erkannt?
Sobald das Widget zum ersten Mal auf Ihrer Website lädt, registriert Twilper diese Domain bei Ihrer Lizenz. In der Checkliste auf "Übersicht" wird "Widget einbauen" dann grün.
- Noch nicht grün? Öffnen Sie Ihre Website, laden Sie die Seite neu und prüfen Sie, ob der Chat-Button erscheint.
- Achten Sie darauf, dass der Code auf der veröffentlichten Seite steht und nicht nur in einem Entwurf oder einer Vorschau.
- Ihre Lizenz legt fest, auf wie vielen Domains das Widget laufen darf. Wird eine neue Domain abgelehnt, deaktivieren Sie eine alte oder wählen Sie einen größeren Tarif.
Farben, Name und Begrüßungsnachricht
Im "Widget-Designer" legen Sie fest, wie das Widget aussieht und sich verhält. Änderungen sehen Sie sofort in der "Live-Vorschau".
Schritt 1: Name und Aussehen
Tragen Sie den "Bot-Name" ein und auf Wunsch einen Avatar. Wählen Sie unter "Farben" Ihre "Primärfarbe" und die Farben der Sprechblasen, oder klicken Sie auf "Twilper-Stil".
Schritt 2: Text und Tonfall
Schreiben Sie unter "Text & Tonfall" Ihre "Begrüßungsnachricht" und den "Platzhaltertext" und wählen Sie förmlich oder locker. Unter "Texte pro Sprache" hinterlegen Sie dieselben Texte für Englisch, Deutsch, Französisch und Spanisch.
Schritt 3: Verhalten
Wählen Sie unter "Verhalten" die "Position" (unten rechts oder unten links) und die Button-Größe. Schalten Sie bei Bedarf "Vorgeschlagene Fragen", eine "Proaktive Nachricht" oder die "Lead-Erfassung" ein.
Schritt 4: Speichern
Klicken Sie auf "Speichern". Das Widget auf Ihrer Website übernimmt die Änderungen.
Gut zu wissen
- Das Widget nutzt automatisch die Sprache Ihrer Besucher, anhand der Seite und der Nachricht.
- Fügen Sie den Code nur einmal pro Seite ein; doppelter Code kann zwei Chat-Buttons erzeugen.
- Eigenes CSS ist nur im Business-Tarif verfügbar.
- Mit "Quellenangaben anzeigen" sehen Besucher, auf welcher Seite eine Antwort beruht.