Einen Agenten in Ihre Website einbinden, ohne eine Chat-Oberfläche zu bauen

Manchmal möchten Sie auf Ihrer Website ein Fenster mit der Aufschrift „Fragen Sie uns alles“. So ein Fenster selbst zu bauen, macht viel Arbeit. Sie müssen den Chat gestalten, die Antwort anzeigen, während sie geschrieben wird, alles an Smartphone-Bildschirme anpassen und die Unterhaltungen speichern. Oft wird das Fenster zur größeren Aufgabe als der Agent.

Embed on your site (in Ihre Website einbetten) in endue Live macht daraus eine einzige Zeile Code. Tragen Sie die Adresse Ihrer Website in Studio ein, fügen Sie den Code, den Sie dort bekommen, in Ihre Website ein, und Sie sind fertig. Der Agent, der im Fenster antwortet, ist derselbe, den Sie in Studio gebaut haben.

Das Fenster, das sich auf Ihrer Website öffnet, ist derselbe Chat wie auf endue.live. Wenn Sie zuerst ein Gefühl dafür bekommen möchten, sagen Sie Tin unter endue.live/@tin Hallo.

Dieser Leitfaden nutzt die Website einer erfundenen Bäckerei aus der Nachbarschaft, Haru Bakery. Der Inhaber hat bereits einen Agenten gebaut, der die Öffnungszeiten und das Brot des Tages kennt und weiß, wie man eine Torte bestellt.

Was Besucher sehen

Sobald der Code eingefügt ist, erscheint in der Ecke der Website ein Button. Text und Aussehen bestimmen Sie.

Ein Klick auf den Button öffnet das Fenster an Ort und Stelle. Besucher fragen, ohne die Seite zu verlassen, und die Antwort erscheint, während sie geschrieben wird. Auf dem Smartphone füllt das Fenster den ganzen Bildschirm.

Die Unterhaltung bleibt erhalten, wenn ein Besucher auf eine andere Seite wechselt. Er kann beim Blick auf das Sortiment fragen, zur Bestellseite gehen, das Fenster wieder öffnen und findet die Unterhaltung noch vor.

So binden Sie ihn ein

1. Live einschalten

Das Einbinden baut auf endue Live auf. Schalten Sie zuerst im Live-Panel in Studio Publish on endue.live ein. Wenn Live für Sie neu ist, beginnen Sie mit Ihren Agenten mit endue Live vielen Menschen zur Verfügung stellen.

2. Die Adresse Ihrer Website eintragen

Klicken Sie im Live-Panel in der Zeile Embed on your site auf Set up (Einrichten). Schalten Sie Turn on for sites ein und tragen Sie unter Allowed sites (erlaubte Websites) die Adresse Ihrer Website ein.

• Es lassen sich nur Websites eintragen, die mit https beginnen.
• Damit auch www und andere Subdomains abgedeckt sind, fügen Sie einen weiteren Eintrag der Form *.domain hinzu. Die zweite Zeile im Bild oben ist ein Beispiel.
• Sie können bis zu zehn Websites eintragen.
• Wenn Sie vor der Veröffentlichung auf Ihrem eigenen Computer testen möchten, tragen Sie localhost ein.

3. Den Code einfügen

Kopieren Sie unten auf dem Bildschirm den Inhalt von Code to paste (Code zum Einfügen) und fügen Sie ihn auf Ihrer Website direkt vor </body> ein.

<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>

Der Wert hinter data-agent ist das Handle Ihres Agenten. Studio trägt es für Sie ein, kopieren Sie die Zeile also unverändert. Wenn Sie einen Website-Baukasten nutzen, fügen Sie den Code in das Feld für eigenen Code ein. Meist heißt es so ähnlich wie „Eigener Code“ oder „HTML einbetten“.

4. Das Aussehen wählen

Auf demselben Bildschirm wählen Sie die Position des Buttons, sein Symbol, seinen Text und ob das Fenster hell oder dunkel ist. Schalten Sie die Vorschau rechts zwischen Desktop und Smartphone um und prüfen Sie beide. Akzentfarbe, Begrüßung und Einstiegsfragen werden aus Customize page übernommen.

Klicken Sie auf Save (Speichern), und Ihre Website übernimmt die Änderung innerhalb einer Minute. Wenn Sie später den Text oder die Farbe ändern, müssen Sie den Code nicht noch einmal einfügen.

Dort platzieren, wo es hilft

Es gibt zwei Platzierungen.

Floating button (schwebender Button) bleibt in der Ecke des Bildschirms und lässt sich von jeder Seite aus öffnen. Das passt zu einer Anlaufstelle für die ganze Website. Fügen Sie den Code einmal ein, an einer Stelle, die auf jeder Seite eingebunden ist.

Inside the page (in der Seite) setzt das Fenster ohne Button direkt an eine feste Stelle einer Seite. Das passt zu Orten, an die Besucher mit Fragen kommen, etwa eine Kontaktseite oder der Platz neben Ihren FAQ. Wenn Sie die Platzierung auf „Inside the page“ umstellen, besteht der Code aus zwei Zeilen.

<div data-endue-live="haru-bakery" style="height:600px"></div>
<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>

Setzen Sie das <div> dorthin, wo das Fenster erscheinen soll, und das <script> direkt vor </body>. Der Wert height legt fest, wie hoch das Fenster ist. Unten sehen Sie die Kontaktseite von Haru Bakery, links mit häufigen Fragen und rechts mit dem Fenster.

Sie können auch auf jede Seite einen anderen Agenten setzen. Ein Agent, der bei Bestellungen hilft, kommt auf die Bestellseite, und einer, der offene Stellen erklärt, auf die Karriereseite. Schalten Sie für jeden Agenten Live ein und tragen Sie die Website ein. Fügen Sie dann den Code jedes Agenten in seine Seite ein.

Es öffnet sich nur auf Ihrer Website

Den eingefügten Code kann jeder lesen. Was, wenn ihn jemand in die eigene Website kopiert? Es passiert nichts. Das Fenster öffnet sich nur auf Websites, die der Eigentümer eingetragen hat. Auf jeder anderen Website erscheint nicht einmal der Button.

In einer Besucher-Unterhaltung kann der Agent genau so viel wie auf endue.live. Aktionen, die eine Freigabe brauchen, werden nicht ausgeführt, und das persönliche Gedächtnis des Eigentümers lässt sich nicht lesen. Außerdem gibt es eine Grenze dafür, wie viele Nachrichten eine Person pro Minute senden kann. Die Nutzung geht vom Tarifkontingent des Eigentümers ab.

Wo Sie danach nachsehen

Auch Unterhaltungen von Ihrer Website werden in der Unterhaltungsliste des Agenten unter Live visitors gesammelt. Lesen Sie, was Kunden fragen, und arbeiten Sie die häufigen Fragen in die Anweisungen und die Einstiegsfragen ein. Wie viel genutzt wurde, zeigt die Zeile Live im Tab Usage in Studio.

Wenn das Fenster nicht erscheint

• Prüfen Sie, ob die Adresse mit dem Eintrag übereinstimmt. Wenn Sie nur haru-bakery.example eingetragen haben und die Website sich als www.haru-bakery.example öffnet, erscheint das Fenster nicht. Fügen Sie *.haru-bakery.example hinzu.
• Prüfen Sie, ob beide Schalter eingeschaltet sind. Gemeint sind „Publish on endue.live“ im Live-Panel und „Turn on for sites“ in Embed on your site.
• Prüfen Sie, ob Sie gespeichert haben. Speichern Sie, warten Sie etwa eine Minute und laden Sie die Seite neu.
• Öffnen Sie die Browserkonsole. Der Grund, warum das Fenster nicht angezeigt werden konnte, steht dort in einer Zeile, die mit [endue Live] beginnt.
• Wenn Ihre Website eine CSP hat, klappen Sie auf dem Einstellungsbildschirm „If your site has a CSP“ auf. Fügen Sie die drei Zeilen, die dort stehen, zur Richtlinie Ihrer Website hinzu.
• Setzen Sie eine endue.live-Adresse nicht selbst in ein iframe. Seiten von endue.live laden nicht in einem Frame auf einer anderen Website. Nutzen Sie den Code oben.

Loslegen

Eine Zeile Code einzufügen dauert ein paar Minuten. Nutzen Sie die gesparte Zeit dafür, was Ihr Agent Kunden sagt und wie er es sagt.

• Zuerst sehen, wie sich das Fenster anfühlt: endue.live/@tin
• Neu bei Live: Ihren Agenten mit endue Live vielen Menschen zur Verfügung stellen