In einer Zeit, in der ein Großteil der Interaktionen über das Smartphone stattfindet, ist es nicht mehr immer sinnvoll, Chatbots als Sprechblasen am unteren Rand von Websites anzuzeigen. Nach der Neugestaltung des Deeplink-Frontends in diesem Sommer wurden zahlreiche Möglichkeiten hinzugefügt, den virtuellen Assistenten in die eigene Website zu integrieren. Hier stellen wir Ihnen die verschiedenen Integrationsmöglichkeiten vor und geben Ihnen Tipps, wie Sie Ihren Chatbot optimal in Szene setzen können.
Popup-Bot – der Klassiker
Der Popup-Bot, den der Nutzer durch Klicken auf das Symbol „unten rechts“ aktiviert, ist der klassische Ansatz. Die Integration bei Deeplink könnte nicht einfacher sein.
Zunächst müssen Sie eine JavaScript-Datei in den Header <head> Ihrer Webseite einbinden.
<script type="text/javascript" src="https://bot.deeplink.ai/v2/deeplink.js"></script>Anschließend können Sie mit der Einbindung des Bot-Widgets selbst fortfahren. Fügen Sie dazu den folgenden Code am Ende Ihres <body>-Tags ein.
<script type="text/javascript">
var bot = Deeplink.bot("BotID", "production", "en", null, {mode:"popup"});
</script>In diesem Beispiel muss „BotID“ durch die ID Ihres Bots ersetzt werden (die wie eine alphanumerische Zeichenfolge aussieht, z. B. „d5cvzlfxouan2ez“). Mit dem zweiten Parameter können Sie zwischen der Produktions- und der Staging-Umgebung wählen (nützlich für die Validierung einer neuen Version des Bots). Als dritten Parameter können Sie die Sprache des Chatbots festlegen. Auch wenn der Nutzer die Sprache im Bot selbst ändern kann, empfehlen wir Ihnen, diesen Parameter dynamisch anzupassen, damit für den Nutzer auf der Website und im Bot dieselbe Sprache verwendet wird.
Inline-bot
Warum platzieren Sie Ihren Bot nicht zentral, indem Sie ihn in die Mitte einer Seite setzen? Mit dem Inline-Modus ist das ganz einfach möglich. Anstatt nur am Rand zu stehen, wird er dann über die gesamte Breite Ihres zentralen Containers eingebunden, wie im beigefügten Screenshot zu sehen ist.
Um den Bot inline einzubinden, müssen Sie zunächst ein Div-Container-Element mit einer ID erstellen. Im folgenden Beispiel haben wir es „bot-container“ genannt und eine Höhe von 70 % der Bildschirmhöhe festgelegt.
<div id="bot-container" style="height: 70vh;"></div>Anschließend können wir mit der Einbindung des Bot-Widgets fortfahren. Fügen Sie den Code wie im ersten Beispiel am Ende Ihres <body>-Tags ein. Beachten Sie dabei die Angabe des Modus „inline“ sowie die Angabe der ID „bot-container“.
<script type="text/javascript">
var bot = Deeplink.bot("BotID", "production", "en", "bot-container", {mode:"inline"});
</script>Den Bot aufrufen – Erweiterte Interaktionen
Die Präsentation Ihres virtuellen Assistenten beschränkt sich nicht nur auf die Darstellung auf einer Seite. Manchmal ist es nützlich, ihn per Knopfdruck öffnen zu können oder sogar direkt zu einem bestimmten Element im Dialog zu springen. Hier finden Sie die verfügbaren erweiterten Interaktionsmöglichkeiten.
Den Bot öffnen und schließen
Es ist möglich, das Öffnen oder Schließen des Bots auszulösen. Dies kann insbesondere sehr nützlich sein, um Ihre Nutzer dazu anzuregen, Ihren virtuellen Assistenten kennenzulernen. Um den Bot zu öffnen, muss folgender JavaScript-Code aufgerufen werden:
bot.toggleOpen(true);Falls Sie den Bot schließen möchten, ist dies ebenfalls möglich mit:
bot.toggleOpen(false);Zu einem bestimmten Teil des Dialogs weiterleiten
Es ist auch möglich, zu einem bestimmten Abschnitt des Bot-Dialogs weiterzuleiten. In Kombination mit der Öffnungsaktion können Sie so mit einem Klick den Dialog direkt in einem Feedback-Gespräch oder beispielsweise bei der Terminvereinbarung öffnen und laden.
Sie können den Bot entweder bei einer bestimmten Nachricht oder bei einer Intention öffnen.
Um zu einer Nachricht zu springen, müssen Sie zuvor die betreffende Nachricht im Dialog-Editor auswählen und in den erweiterten Einstellungen einen „externen Anker“ definieren. Anschließend können Sie das folgende JavaScript auslösen:
bot.toggleOpen(true, 'MonAncre');Um den Dialog zu einer Intention zu öffnen, erfolgt der Aufruf auf ähnliche Weise und wird mit „intent_“ vorangestellt. Um beispielsweise die Intention „Kontakt“ aufzurufen, können Sie Folgendes verwenden: bot.toggleOpen(true, ‚intent_Contact‘);
Beachten Sie, dass es bei Bots im Inline-Modus auch möglich ist, zu einem Anker weiterzuleiten. Dies geschieht mithilfe des Aufrufs jumpToAnchor(). Diese Funktion nimmt zwei Parameter entgegen: Der erste ist der Name des Ankers (oder der Absicht), und der zweite ist ein boolescher Wert, um zuvor angezeigte Nachrichten zu löschen (auf „true“ setzen, um sie zu löschen). Der Aufruf sieht somit wie folgt aus:
bot.jumpToAnchor('MonAncre', true);Öffnung bereits beim Beladen
Abschließend sei noch erwähnt, dass es auch möglich ist, den Bot bereits beim Laden der Seite zu öffnen. Dies geschieht mithilfe des folgenden Aufrufs:
<script type="text/javascript">
var bot = Deeplink.bot("BotID", "production", "en", "bot-container", {mode:"popup", openAtStart:true});
</script>Bitte beachten Sie, dass ein solcher Aufruf auf einem Smartphone dazu führt, dass die gesamte Website ausgeblendet wird, da der Bot automatisch den gesamten Bildschirm einnimmt. Wir empfehlen Ihnen, die Auswirkungen einer solchen Öffnung beim Laden nicht zu unterschätzen und gegebenenfalls zwischen Mobilgeräten und Desktop-Computern unterschiedlich vorzugehen.