Einführung, Recht & Kosten
Chatbot auf der Website einbinden: So geht es bei WordPress, Wix, Webflow und Co.
Viele Unternehmer schieben einen Website-Chat vor sich her, weil sie die Technik scheuen. Dabei ist das Einbinden meist in ein paar Minuten erledigt. Ein kurzer Code wird einmal an der richtigen Stelle eingefügt. Hier lesen Sie, wie das bei den gängigen Website-Systemen klappt und worauf Sie beim Test achten sollten.
Von Fabian Schlier
Ein Code, einmal eingefügt
Technisch ist ein Website-Chat ein kleines Fenster, das über Ihrer bestehenden Seite eingeblendet wird. Damit es erscheint, braucht Ihre Website einen kurzen Codeschnipsel, den sogenannten Einbettungscode. Er lädt das Chatfenster und verbindet es mit Ihrem Assistenten.
Auf jeder einzelnen Unterseite müssen Sie den Code nicht einfügen. Fast alle Website-Systeme haben einen Bereich, der auf allen Seiten mitgeladen wird, meist im Kopf- oder Fußbereich. Dort kommt der Code einmal hin, und der Chat erscheint überall.
Auch chattastic wird über so einen kurzen Code eingebunden. Sie setzen ihn selbst ein oder richten ihn gemeinsam mit uns ein. Der Assistent selbst ist in rund 60 Sekunden fertig: Domain eingeben, die Website wird eingelesen, los geht's.
Was Sie vorher brauchen
Viel ist es nicht. Sie brauchen einen Login mit Administratorrechten für Ihr Website-System. Betreut eine Agentur Ihre Website, klären Sie kurz, wer den Code einfügt. Den Einbettungscode kopieren Sie vollständig und ohne Änderungen, denn schon ein fehlendes Zeichen kann dazu führen, dass der Chat nicht auftaucht. Planen Sie ein paar Minuten für das Einfügen und einen Test ein.
Und vergessen Sie die Datenschutzerklärung nicht. Der Chat gehört dort erwähnt. Hinweise dazu stehen im DSGVO-Ratgeber.
So funktioniert es bei den gängigen Systemen
Jedes Website-System nennt die Stellen etwas anders, und Menüs ändern sich mit Updates. Die folgenden Beschreibungen sind deshalb bewusst allgemein. Finden Sie die passende Stelle nicht, hilft meist eine Suche in der Hilfe Ihres Systems nach „benutzerdefinierter Code“ oder „Code einfügen“.
WordPress
Bei WordPress gibt es zwei übliche Wege. Viele Themes haben in den Einstellungen ein Feld für zusätzlichen Code im Kopf- oder Fußbereich. Alternativ nehmen Sie ein Plugin, mit dem sich Code im Header oder Footer aller Seiten einfügen lässt. Code rein, speichern. Nutzen Sie ein Caching-Plugin, leeren Sie danach den Cache, damit der Chat sofort sichtbar wird.
Wix
Wix hat in den Website-Einstellungen einen Bereich für benutzerdefinierten Code. Dort legen Sie einen neuen Codeschnipsel an, fügen den Einbettungscode ein und stellen ein, dass er auf allen Seiten geladen wird. Je nach Tarif kann diese Funktion eingeschränkt sein.
Webflow
In Webflow steckt der Bereich für benutzerdefinierten Code in den Projekteinstellungen. Fügen Sie den Einbettungscode ins Feld für den Fußbereich ein, dann wird er auf allen Seiten geladen. Sichtbar wird die Änderung erst, wenn Sie die Website neu veröffentlichen.
Jimdo
Auch Jimdo erlaubt, je nach Version und Tarif, eigenen Code im Kopfbereich der Website. Suchen Sie in den Einstellungen nach dem Bereich für benutzerdefinierten Code oder Kopfzeilen-Code und fügen Sie den Einbettungscode dort ein.
Shopify
Bei Shopify läuft das in der Regel über das Theme. Im Theme-Code gibt es eine zentrale Layout-Datei, die auf allen Seiten geladen wird. Der Einbettungscode gehört dort in den Fußbereich, kurz vor das Ende der Seite. Wer nicht gern im Theme-Code herumschraubt, lässt das die Agentur oder uns erledigen.
Eigene Website
Ist Ihre Website individuell programmiert, setzt Ihr Entwickler den Code in die zentrale Vorlage für alle Seiten, typischerweise direkt vor das Ende des Body-Bereichs. Meist dauert das ein paar Minuten.
Nach dem Einfügen: richtig testen
Die Inhaberin eines kleinen Friseursalons in Bielefeld hat den Code am Montagabend nach Ladenschluss eingefügt. Am besten testet man dann so, wie ein Besucher die Seite erlebt:
- Öffnen Sie Ihre Website in einem privaten Browserfenster, damit keine alten Daten zwischengespeichert sind.
- Schauen Sie, ob das Chatsymbol erscheint und sich das Fenster beim Klick öffnet.
- Echte Fragen stellen: Drei bis fünf typische Kundenfragen, so formuliert, wie Ihre Kunden schreiben würden. Passen die Antworten?
- Anfrage durchspielen: Hinterlassen Sie eine Testanfrage mit Kontaktdaten und prüfen Sie, ob sie in Ihrem Dashboard ankommt.
- Prüfen Sie, ob der Chat auch auf Leistungs-, Kontakt- und Blogseiten auftaucht.
Weiß der Assistent bei einer Testfrage etwas nicht, liegt das nicht an der Einbindung. Dann fehlt die Information in Ihren Inhalten. Ergänzen Sie das Wissen im Dashboard, wie das geht, steht unter Chatbot-Wissen pflegen.
Die Mobilansicht nicht vergessen
Viele Besucher kommen übers Smartphone. Schauen Sie sich deshalb auch die mobile Ansicht an:
- Verdeckt das Chatsymbol wichtige Elemente, etwa einen Anruf-Button, ein Cookie-Banner oder den Warenkorb?
- Lässt sich das Chatfenster bequem öffnen, lesen und wieder schließen?
- Funktioniert die Eingabe, wenn die Tastatur eingeblendet ist?
Überdeckt das Symbol etwas, lässt sich das meist in den Design-Einstellungen des Assistenten ändern. Bei chattastic können Sie Design und Verhalten an Ihre Website anpassen.
Wenn der Chat nicht erscheint
Hand aufs Herz, meistens ist es eine dieser Kleinigkeiten:
- Die Änderung wurde noch nicht veröffentlicht. Manche Systeme zeigen sie erst danach.
- Ein Caching-Plugin oder der Browser zeigt noch die alte Version. Cache leeren und neu laden.
- Beim Kopieren fehlt ein Zeichen. Fügen Sie den Code noch einmal vollständig ein.
- Der Code steckt nur auf einer einzelnen Seite statt im seitenübergreifenden Bereich.
- Manche Baukästen erlauben eigenen Code erst ab einem bestimmten Tarif.
Wer nicht selbst ran will, bekommt Hilfe
In den meisten Fällen ist das Einbinden eine Sache von Minuten. Code kopieren, einmal an zentraler Stelle einfügen, testen. Wer sich das nicht zutraut, muss trotzdem nicht verzichten. Ihre Agentur erledigt das nebenbei, und auch das chattastic-Team hilft auf Wunsch bei der Einrichtung. Wie lange die Einführung insgesamt dauert, klärt der Artikel Wie lange dauert die Einrichtung eines Website-Chatbots?
Häufige Fragen
Brauche ich Programmierkenntnisse, um einen Chatbot einzubinden?
Nein. Sie kopieren einen kurzen Code und fügen ihn im Bereich für benutzerdefinierten Code Ihres Website-Systems ein. Wenn Sie möchten, hilft Ihnen das chattastic-Team dabei.
Funktioniert chattastic mit meinem Website-Baukasten?
Der Assistent wird über einen kurzen Einbettungscode eingebunden. Das geht bei gängigen Systemen wie WordPress, Webflow und Wix sowie bei eigenen Websites, sofern das System eigenen Code zulässt.
Muss ich den Code auf jeder Unterseite einfügen?
Nein. Fügen Sie ihn einmal in den seitenübergreifenden Kopf- oder Fußbereich ein, dann erscheint der Chat auf allen Seiten.
Wird meine Website durch den Chat langsamer?
Ein Chat-Widget wird üblicherweise zusätzlich zur Seite geladen. Prüfen Sie nach dem Einbinden, ob sich Ihre Website wie gewohnt verhält, auch auf dem Smartphone.
