Widget-API

Für Entwickler oder jeden, der möchte, dass sich der Chat über eine eigene Schaltfläche öffnet.

Installation

<script src="https://keyda.in/business/widget.js"
        data-key="kb_live_your_key_here" async></script>

Das Script-Tag benötigt nur src und data-key. Alles andere — Farben, Position, Begrüßung, Sprache — kommt aus Ihrem Dashboard, sodass Sie Ihre Website nie neu bereitstellen müssen, um das zu ändern.

Das Widget wird in der unter Installieren → Sprache Ihres Bots festgelegten Sprache angezeigt: sein Button, Platzhalter und Hinweise sowie die Ausrichtung des Layouts (Arabisch und Urdu sind rechts-nach-links). Die Texte kommen mit der Konfiguration des Widgets, daher gibt es keine zweite Anfrage und nichts, das Sie selbst übersetzen müssten.

Modi

Floating (Standard). Ein Launcher-Button in der Ecke, der ein Chat-Fenster öffnet.

Inline. Platzieren Sie einen leeren Container auf der Seite und der Chat füllt diesen stattdessen aus:

<div data-keyda-bot style="height:520px"></div>

Der Container benötigt eine Höhe. Im Inline-Modus ist der Chat immer sichtbar, daher gibt es nichts zu öffnen oder zu schließen.

JavaScript API

Verfügbar auf window.KeydaBot sobald das Skript geladen wurde:

Beispiel — öffnen Sie den Chat über Ihren eigenen „Chat mit uns“-Button:

<button onclick="KeydaBot.open()">Chat with us</button>

Wie er sich auf Ihrer Seite verhält

• Das Panel öffnet sich über dem Launcher-Button, der an seinem Platz bleibt und zum Schließen-Steuerelement wird. Ein erneutes Tippen darauf, das ✕ im Header oder das Drücken der Escape-Taste schließt den Chat.
• Ein Besucher kann das Panel über den Header erweitern — es vergrößert sich auf die Fensterhöhe und bis zu 760px Breite — und diese Einstellung wird im Browser gespeichert. Auf Smartphones nimmt das Panel bereits den gesamten Bildschirm ein, daher wird das Steuerelement dort nicht angezeigt.
• Ihre Einstellung Logogröße ändert das Logo, nicht den Button: Der Launcher behält seine Größe, das Logo wird lediglich größer. Button-Größe (Installieren → Erscheinungsbild) ist das, was den Button selbst in der Größe ändert — klein, mittel oder groß — unabhängig von seiner Form.
• Vier Button-Formen: eine Pille mit Ihrer Beschriftung, eine runde Sprechblase, ein abgerundetes Quadrat und eine Chat-Sprechblase mit Spitze. Die Spitze sitzt auf der Seite, die zu Ihrer Seite zeigt.
• Alles wird innerhalb eines Shadow Roots gerendert, sodass Ihr CSS das Widget nicht beschädigen kann und das CSS des Widgets Ihre Website nicht beeinflusst.
• Das Panel wird erst geladen, wenn ein Besucher es öffnet, damit Ihre Seite nicht verlangsamt wird.
• Die Unterhaltung eines Besuchers wird 24 Stunden lang fortgesetzt, wenn er zurückkehrt, und beginnt danach neu. Das erneute Öffnen des Panels stellt den Thread wieder her — inklusive Dateien und einer Willkommens-Flow-Frage, die noch auf eine Antwort wartete.
• Die Büroklammer im Eingabefeld erlaubt es einem Besucher, bis zu drei Fotos oder Dokumente an eine Nachricht anzuhängen (Größen und Typen unter Limits und Sicherheit). Fotos werden vor dem Hochladen im Browser verkleinert, sodass ein 12-Megapixel-Foto die Seite mit nur wenigen hundert Kilobyte verlässt. Schalten Sie Dateien unter Installieren aus, und der Button verschwindet.
• Ein welcome flow läuft als gewöhnliche Sprechblasen ab: Auswahlmöglichkeiten werden zu Schaltflächen unter der Sprechblase, eine Schaltfläche „Überspringen“ erscheint, wenn ein Schritt optional ist, und der Platzhalter des Eingabefelds wird zur Frage. Ein abgeschlossener Flow wird 30 Tage lang im Browser des Besuchers gemerkt.
• Wenn der Assistent nicht erreichbar ist, zeigt das Widget eine kurze Nachricht an und verursacht niemals einen Fehler auf Ihrer Seite.

In den App-SDKs

Derselbe Chat läuft in jedem SDK, sodass Anhänge und Willkommens-Flows Ihre App ohne Release erreichen — mit einer Ausnahme. Das Öffnen einer Dateiauswahl aus einer Web-View ist Aufgabe der Host-App. Die iOS-, React-Native- und Ionic-Pakete erledigen das bereits; Android and Flutter need SDK 0.1.4 or later. Bei älteren Versionen erkennt das Widget die Umgebung und blendet die Büroklammer aus, anstatt einen wirkungslosen Button anzuzeigen.