Lektion 11 von 26 · Beim Kunden live gehen · 1:02
Das Chatfenster auf die Website des Betriebs
Die Stimme in diesem Video ist mit KI erzeugt.
Mit dem Einbau-Code aus der Einrichtung deines Kunden kommt dein Agent als Chatfenster unten rechts auf seine Website, im Aussehen der Demo, die du ihm übergeben hast.
In Kürze
- Hast du eine Demo vom Typ Website-Widget übergeben, steht beim Betrieb der Kanal Website-Widget schon bereit.
- Farbe, Logo, Begrüßung und Knöpfe kommen aus der Demo. Änderst du die Demo, ändert sich das Fenster beim Betrieb gleich mit, ohne neuen Code.
- Den Code fügst du selbst in seine Website ein oder schickst ihn seinem Webdesigner. Das geht mit WordPress, Wix, dem Jimdo Creator und jedem Baukasten, der eigenen Code annimmt. Wo du je Baukasten klickst, zeigt dir die App direkt unter dem Code.
- Mit dem QR-Code zeigst du dem Betrieb das Fenster vorher auf seinem Handy.
- Läuft der Agent in deinem Konto, brauchst du mit dem Betrieb einen AVV.
Schritt für Schritt
Öffne im Menü Kunden den Betrieb und dort den Reiter Einrichtung.
Scroll zum Abschnitt Kanäle. Dort steht die Karte Website-Widget.
Steht dort nur Standard-Chat, war die Demo ein Vollbild-Chat. Für das Fenster unten rechts legst du über Kanal hinzufügen ein Website-Widget an.
Über der Karte steht Aussehen für alle Kanäle. Ändern geht über den Link Über die Demo ändern, er bringt dich in den Demo-Editor.
Dort speichert jede Änderung von selbst und gilt ab dem nächsten Laden auch im Fenster auf seiner Website. Unter Texte prüfen holst du dir mit Begrüßung vorschlagen eine Begrüßung und Knöpfe zum Antippen.
Übernimmst du unter Aussehen von der Website Logo und Farbe neu, fragt der Editor vorher „Auch beim Kunden ändern?“. Mit Übernehmen gilt es auch auf seiner Website.
Zurück im Hub des Betriebs klappst du 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.
Der Code kommt auf allen Seiten vor das Ende der Seite (dort steht
</body>), im Baukasten in ein Feld für eigenen Code, nicht in einen Textblock. Danach wird die Website neu veröffentlicht, und unten rechts steht der Chat-Knopf in der Farbe des Betriebs. Wo das Feld im jeweiligen Baukasten liegt, zeigt dir die App unter dem Code bei Wo liegt die Website des Betriebs?, dieselben Schritte stehen unten unter „So geht es in deinem Baukasten“.Unter dem Code steht „Läuft der Bot in deinem Konto, brauchst du einen AVV mit diesem Kunden.“ Über Vorlage & Erklärung kommst du zur Vorlage und erfährst, wo der Absatz für seine Datenschutzerklärung steht.
So geht es in deinem Baukasten
Klapp den Baukasten auf, mit dem die Website des Betriebs gebaut ist. Dieselben Schritte zeigt dir die App in der Einrichtung des Betriebs direkt unter dem Code, wenn du bei Wo liegt die Website des Betriebs? 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>.
Ein Webdesigner macht das
- Klick unter dem Code bei Wo liegt die Website des Betriebs? auf Ein 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
QR-Code im Abschlussgespräch, der Code geht an den Webdesigner
Jonas Weber von Weber KI hat Sanitär Brinkmann gewonnen und die Demo übergeben. Beim Abschlussgespräch öffnet er unter Kunden den Betrieb, klappt in der Einrichtung Einbauen auf, klickt auf QR und lässt Anna Brinkmann den QR-Code mit ihrem Handy scannen. Sie fragt, wann nächste Woche eine Heizungswartung frei wäre, und sieht das Fenster so, wie ihre Kunden es sehen werden.
Die Website von Brinkmann pflegt ein Webdesigner. Jonas kopiert den Code und schickt ihn mit diesen Zeilen:
Hallo, für sanitaer-brinkmann.de bitte den Code unten auf allen Seiten vor </body> einfügen und die Website neu veröffentlichen. Danach steht unten rechts ein Chat-Knopf. Den Code bitte nicht weitergeben.Den Code bekommt nur, wer die Website pflegt, denn jedes Gespräch darüber läuft über deine Credits. Den Demo-Link schickt Jonas dafür nicht: Der läuft nach Ablauf oder Limit aus, der Code nicht.
Für Partner
Was du dem Betrieb dazu sagst: „Unten rechts auf eurer Website kommt ein Knopf in eurer Farbe. Wer abends eine Frage zur Heizungswartung hat, schreibt sie dort und bekommt gleich eine Antwort. Sobald ihr euren Kalender verbunden habt, landen die Termine direkt bei euch. Habt ihr mal ein neues Logo, sagt mir Bescheid. Am Code auf eurer Website muss dafür niemand etwas ändern.“
Wo es oft hakt
Das Fenster erscheint nicht auf der Website.
Meist ist der Code nicht gespeichert, oder der Baukasten zeigt noch die alte Fassung. Kopier den Code unter Kunden, Betrieb, Einrichtung, Kanäle, Website-Widget neu, lass ihn einfügen und die Website neu veröffentlichen.
Oben im Hub des Betriebs steht „Bucht in deinen Demo-Kalender“.
Dann landen Termine von seiner Website in deinem Kalender. Klick oben im Hub auf Assistent bearbeiten, dann auf Kalender, und schick ihm den Einladungslink. Sobald er sein Google- oder Microsoft-Konto verbunden hat, steht dort „Kalender verbunden“.
Dort steht „Kalender ohne Postfach“.
Der Betrieb hat ein Konto ohne eigenes Postfach verbunden, etwa eine web.de-Adresse, die nur bei Google angemeldet ist. Bestätigungen kommen dann nicht an. Schick ihm den Einladungslink noch einmal, damit er ein Konto mit echtem Postfach verbindet.
Du baust die übergebene Demo für den nächsten Interessenten um.
Dann ändert sich das Fenster auf der Website deines Kunden mit. In der Demo-Übersicht steht an ihr „Vorschau für Sanitär Brinkmann“. Für jeden neuen Interessenten baust du eine neue Demo.
Die Demo ist gelöscht.
Im Hub steht dann „Die Demo dazu ist gelöscht, das Aussehen bleibt, wie es ist“. Das Fenster läuft weiter, aber sein Aussehen kannst du nicht mehr ändern. Lösch eine Demo, die die Vorschau eines Kunden ist, deshalb nicht.
Der Betrieb findet den Code nicht.
In seinem Zugang gibt es weder den Code noch Vorschau und QR. Schick ihm den Code selbst.
Das Fenster antwortet auf jede Frage nur noch, man solle sich direkt beim Betrieb melden.
Meist sind deine 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.
So prüfst du, ob es klappt
Öffne die Website des Betriebs in einem privaten Fenster des Browsers. Unten rechts steht der Chat-Knopf in der Farbe aus der Demo, im Kopf des Fensters „KI-Assistent · antwortet sofort“.
Schreib dort eine echte Frage, etwa nach den Öffnungszeiten. Buch dabei keinen Termin, der wäre echt. Lädst du danach den Hub des Betriebs neu, steht im Reiter Chat bei Gespräche eins mehr.
Oben im Hub sollen „Chat an“ und „Kalender verbunden“ stehen. Das grüne An an der Karte zeigt aber nicht, ob der Code auf der Website steht. Das zeigt nur Prüfung 1.
Passt dazu
Fertig mit dieser Lektion?
Selbst ausprobieren?
Gib die Website eines Betriebs ein, der Assistent baut sich daraus in unter einer Minute.