Lektion 7 von 19 · Auf deiner Website live gehen · 0:52
Das Chatfenster auf deine Website
Die Stimme in diesem Video ist mit KI erzeugt.
Mit dem Code aus deinem Hub kommt dein Assistent als Chatfenster unten rechts auf deine Website, in deiner Farbe und mit deiner Begrüßung.
In Kürze
- Das Chatfenster steht als Kanal Website-Widget schon bereit. Du musst nichts anlegen.
- Du kopierst einen kurzen Code und fügst ihn in deine Website ein. Das geht mit WordPress, Wix, dem Jimdo Creator und jedem Baukasten, der eigenen Code annimmt. Wo du je Baukasten klickst, zeigt dir der Hub direkt unter dem Code.
- Farbe, Logo, Begrüßung und Knöpfe zum Antippen stellst du im Hub ein. Änderst du später etwas, musst du den Code nicht neu einbauen.
- Mit dem QR-Code probierst du das Fenster vorher auf dem Handy aus.
- Wer auf deiner Website eine Frage hat, schreibt sie gleich dort, auch abends und am Wochenende.
Schritt für Schritt
Öffne im Menü Hub und dort den Reiter Einrichtung. Hast du mehrere Assistenten, wählst du vorher den, der auf die Website soll.
Scroll zum Abschnitt Kanäle. Dort steht die Karte Website-Widget.
Über der Karte steht der Streifen Aussehen für alle Kanäle. Klick dort auf Aussehen ändern, dann siehst du Name im Fensterkopf, Name des Assistenten, Begrüßung, Farbe, Logo und Vorschläge zum Antippen.
Fällt dir keine Begrüßung ein, klick auf Begrüßung vorschlagen. Du bekommst Vorschläge für die Begrüßung und für Knöpfe, passend zu deiner Website, wählst aus und klickst auf Übernehmen.
Klick unten auf Speichern. Erst dann ist es gespeichert, auch was du aus den Vorschlägen übernommen hast.
Klapp an der Karte Website-Widget den Teil Einbauen: Code für die Website auf. Darunter stehen Vorschau (öffnet das Fenster in einem neuen Tab) und QR (zum Scannen mit dem Handy).
Klick auf das Kopier-Symbol oben rechts im Codekasten. Ein Haken zeigt, dass der Code kopiert ist.
Füg den Code vor das Ende der Seite ein (dort steht
</body>), im Baukasten in ein Feld für eigenen Code, das für alle Seiten gilt. Ein Textblock reicht nicht, dort steht der Code nur als Text da. Wo das Feld in deinem Baukasten liegt, zeigt dir der Hub unter dem Code bei Wo liegt deine Website?, dieselben Schritte stehen unten unter „So geht es in deinem Baukasten“.Veröffentliche deine Website neu, danach steht unten rechts der Chat-Knopf in deiner Farbe. In deine Datenschutzerklärung gehört dazu ein Absatz, wo du den fertigen Text findest, zeigt die Lektion „Datenschutz und der fertige Absatz“.
So geht es in deinem Baukasten
Klapp den Baukasten auf, mit dem deine Website gebaut ist. Dieselben Schritte zeigt dir der Hub direkt unter dem Code, wenn du bei Wo liegt deine Website? den Baukasten wählst.
Danach die Website neu veröffentlichen, wo es dafür einen Knopf gibt, und in einem privaten Fenster des Browsers prüfen, ob unten rechts der Chat-Knopf steht.
WordPress
Bei einer Website auf wordpress.com (nicht selbst betrieben) lassen sich Plugins nur in den höheren Tarifen installieren.
- Klick im WordPress-Adminbereich links auf Plugins und dann auf Neues Plugin hinzufügen.
- Such nach
WPCode, klick beim Plugin „WPCode, Insert Headers and Footers“ auf Jetzt installieren und dann auf Aktivieren. - Klick links im Menü auf Code-Snippets und dann auf Header & Footer.
- Füg den Code in das unterste Feld Footer (je nach Sprache Fußzeile) ein, nicht in das oberste Feld Header.
- Klick auf Änderungen speichern. Nutzt die Website ein Cache-Plugin, leer danach den Cache.
Wix
Geht erst, wenn die Website veröffentlicht und mit einer eigenen Domain verbunden ist.
- Öffne die Verwaltung der Website und dort links Einstellungen.
- Klick im Abschnitt Entwicklung und Integrationen auf Benutzerdefinierter Code.
- Klick oben rechts auf den Knopf mit dem +, füg den Code ins Textfeld ein und gib ihm einen Namen, etwa
Chatfenster. - Wähl bei Code zu Seiten hinzufügen die Option Alle Seiten und bei Code eingeben die Stelle Body - Ende.
- Klick auf Übernehmen.
Jimdo Creator
- Öffne im Editor das Menü und dort Einstellungen.
- Klick auf Head bearbeiten.
- Füg den Code in das Feld für die gesamte Website ein, nicht in das einer einzelnen Seite. Steht dort schon Code, setz unseren darunter.
- Klick auf Speichern.
Der Code steht hier im Kopf der Seite statt vor ihrem Ende. Das Chatfenster läuft trotzdem.
Jimdo ohne Code
- Prüf zuerst, welcher Jimdo es ist: Gibt es im Editor unter Menü, Einstellungen den Punkt Head bearbeiten, ist es der Jimdo Creator. Dann gilt die Anleitung dort.
- Im Jimdo-Baukasten ohne Code-Editor (früher „Dolphin“) gibt es nach unserem Stand kein Feld für eigenen Code. Dort lässt sich das Chatfenster nicht einbauen.
- Frag beim Jimdo-Support nach, ob das Paket inzwischen eigenen Code im Head erlaubt. Sonst geht es nur mit einem Baukasten, der eigenen Code annimmt.
IONOS MyWebsite Now
Eigener Code ist nicht in jedem MyWebsite-Now-Tarif enthalten. Fehlt der Punkt, frag bei IONOS nach.
- Öffne den MyWebsite-Now-Editor.
- Klick in der linken Menüleiste auf Einstellungen und dann auf Head-Code.
- Füg den Code ein. Steht dort schon Code, setz unseren darunter.
- Wähl eine Datenschutz-Option und klick auf Speichern.
Der Code steht hier im Kopf der Seite statt vor ihrem Ende. Das Chatfenster läuft trotzdem.
STRATO Homepage-Baukasten
- Öffne den Homepage-Baukasten und klick links auf Einstellungen.
- Öffne dort den Punkt für eigenen Code im Head. In älteren Fassungen heißt er Allgemein, mit dem Feld Tracking-Code.
- Füg den Code ein. Steht dort schon Code, setz unseren darunter und lass Einfügen in so, wie es steht. Das Chatfenster läuft mit HEAD und mit BODY.
- Klick auf Speichern und danach oben rechts auf Veröffentlichen.
Squarespace
Geht nicht in der Testphase und nicht in jedem Tarif. Fehlt der Punkt, prüf den Tarif.
- Öffne in der Verwaltung der Website Website und dann Seiten.
- Scroll in der Seitenliste nach unten zu Website-Tools und klick auf Code einfügen (englisch Code Injection).
- Füg den Code in das Feld Fußzeile ein.
- Klick auf Speichern.
Shopify
Bei einem gekauften Theme geht das erst nach dem Kauf, nicht in der Testversion.
- Geh im Shopify-Adminbereich zu Onlineshop und dann zu Themes.
- Klick beim aktuellen Theme auf das Menü mit den drei Punkten und dann auf Code bearbeiten.
- Öffne links im Ordner layout die Datei
theme.liquid. - Such ganz unten die Zeile
</body>und füg den Code direkt darüber ein. - Klick auf Speichern.
Prüf nach jedem Update des Themes, ob der Code noch drin ist. Shopify kann eigene Änderungen dabei entfernen.
Webflow
Geht nur mit einem bezahlten Site- oder Workspace-Plan. Im kostenlosen Plan sind die Felder gesperrt.
- Öffne im Webflow-Dashboard die Website und dort die Site settings.
- Klick auf den Reiter Custom code.
- Füg den Code in das Feld Footer code ein.
- Klick auf Save changes und veröffentliche die Website mit Publish.
Webflow gibt es nur auf Englisch, deshalb stehen die Knöpfe hier so da.
Anderer Baukasten
- Such in den Einstellungen des Baukastens nach einem Feld wie Eigener Code, Head-Code, Footer-Code, Tracking-Code oder Custom Code.
- Nimm das Feld, das für alle Seiten gilt. In einem Textblock auf einer einzelnen Seite steht der Code nur als Text da.
- Gibt es Kopf und Ende zur Auswahl, nimm das Ende (Footer oder Body). Der Kopf (Head) geht auch.
- Ist die Website selbst programmiert, gehört der Code in die gemeinsame Vorlage aller Seiten, direkt vor
</body>.
Mein Webdesigner macht das
- Klick unter dem Code bei Wo liegt deine Website? auf Mein Webdesigner macht das und dann auf Code per Mail schicken.
- Es öffnet sich eine fertige Mail mit dem Code und einer kurzen Erklärung, wo er hingehört. Trag die Adresse des Webdesigners ein und schick sie ab.
- Öffnet sich kein Mailprogramm, nimm Text kopieren daneben und füg den Text in eine neue Mail ein.
Beispiel aus der Praxis
Begrüßung, drei Knöpfe und später ein neues Logo ohne neuen Code
Anna Brinkmann von Sanitär Brinkmann will den Assistenten auf sanitaer-brinkmann.de haben. Unter Aussehen ändern nimmt sie das Blau aus ihrem Logo und lädt das Logo hoch. Bei Begrüßung vorschlagen wählt sie eine Begrüßung und kürzt sie auf:
Hallo, hier ist Sanitär Brinkmann. Geht es um einen Termin, eine Frage oder einen Notfall?
Als Knöpfe zum Antippen behält sie „Heizungswartung buchen“, „Rohr verstopft“ und „Badsanierung anfragen“. Wer abends auf der Seite landet, tippt einfach einen an, statt zu überlegen, wie er fragen soll.
Bevor der Code auf die Seite kommt, scannt sie den QR-Code mit ihrem Handy und schreibt: „Habt ihr nächste Woche Zeit für eine Heizungswartung?“ Mit verbundenem Kalender nennt der Assistent freie Zeiten. Sie gibt dabei ihre eigene Mailadresse an, denn ein Termin, den er bucht, ist echt.
Ein halbes Jahr später hat der Betrieb ein neues Logo. Anna öffnet wieder Hub, Einrichtung, Aussehen ändern, klickt auf Anderes Logo und dann auf Speichern. Den Code auf der Website fasst sie nicht an. Beim nächsten Laden der Seite steht das neue Logo im Fenster.
Bei einer Werkstatt wie Kfz Lorenz passen andere Knöpfe: „Termin zur Inspektion“, „Reifen wechseln lassen“, „Wann habt ihr offen?“.
Wo es oft hakt
Das Fenster erscheint nicht auf deiner Website.
Meist ist der Code im Baukasten nicht gespeichert, oder die Website zeigt noch die alte Fassung. Kopier den Code im Hub unter Einrichtung, Kanäle, Website-Widget neu, füg ihn ein und veröffentliche die Website neu.
Das neue Aussehen ist nicht zu sehen.
Gespeichert ist es erst mit Speichern unten im Aussehen, auch übernommene Vorschläge. Danach erscheint es, sobald die Website neu geladen wird.
Beim Speichern erscheint „Schreib eine Begrüßung“ oder „Gib deinem Assistenten einen Namen“.
Name im Fensterkopf, Name des Assistenten und Begrüßung dürfen nicht leer sein. Füll das genannte Feld aus und klick noch einmal auf Speichern.
Das Fenster antwortet auf jede Frage nur noch, man solle sich direkt bei dir melden.
Meist sind die Credits aufgebraucht. Unter Konto, Credits kaufst du nach, unter Konto, Abrechnung wechselst du den Tarif. Ist dein Tarif beendet oder eine Zahlung offen, zeigt dir die App das gleich nach dem Anmelden.
Er beantwortet Fragen, bucht aber keine Termine.
Oben im Hub steht dann „Kein Kalender verbunden“. Öffne deinen Assistenten, klick auf Kalender und verbinde dein Google- oder Microsoft-Konto.
Oben im Hub steht „Kalender ohne Postfach“.
Dein Kalender hängt an einem Konto ohne eigenes Postfach, etwa einer web.de-Adresse, die nur bei Google angemeldet ist. Dann kommen Bestätigungen nicht an. Verbinde im Kalenderfenster ein Konto mit echtem Postfach.
Deine Mitarbeiterin findet den Code nicht.
Code, Vorschau und Aussehen sieht nur, wem das Konto gehört, nicht ein Zugang für Mitarbeiter. Kopier ihn selbst und gib ihn ihr, oder schick ihn deinem Webdesigner über Mein Webdesigner macht das, Code per Mail schicken.
So prüfst du, ob es klappt
Öffne deine Website in einem privaten Fenster des Browsers. Unten rechts steht der Chat-Knopf in deiner Farbe, im Kopf des Fensters „KI-Assistent · antwortet sofort“.
Schreib dort eine echte Frage. Lädst du danach den Hub neu, steht im Reiter Chat bei Gespräche eins mehr.
Verlass dich nicht auf das grüne An an der Karte. Es zeigt nicht, ob der Code auf deiner Website steht. Das zeigt nur der Blick auf die Website selbst.
Passt dazu
Fertig mit dieser Lektion?
Selbst ausprobieren?
Gib die Website deines Betriebs ein, der Assistent baut sich daraus in unter einer Minute.