Keyda Business
GermanyEnglish Anmelden Kostenlos starten
Keyda Business DokumentationReferenz

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 Skript-Tag benötigt nur src und data-key. Alles andere – Farben, Position, Begrüßung, Sprachen – wird über Ihr Dashboard gesteuert, sodass Sie Ihre Website nie neu bereitstellen müssen, um Änderungen vorzunehmen.

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:

AnrufWas es tut
KeydaBot.open()Öffnet das Chat-Fenster
KeydaBot.close()Schließt es
KeydaBot.toggle()Öffnet oder schließt
KeydaBot.expand()Macht das Panel so hoch wie das Fenster und bis zu 760px breit
KeydaBot.shrink()Zurück zur Standardkarte
KeydaBot.isOpentrue wenn der Chat sichtbar ist
KeydaBot.isExpandedtrue während das Panel erweitert ist
KeydaBot.clientIdDie Client ID, die diese Seite verwendet

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

<button onclick="KeydaBot.open()">Chat with us</button>
Das Skript wird asynchron geladen, daher existiert window.KeydaBot möglicherweise kurz nach dem Laden der Seite noch nicht. Binden Sie Handler an einen Klick, anstatt sie während des Parsens der Seite aufzurufen.

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 zur Logogröße ändert das Logo, nicht den Button: Der Launcher ist ein festes 52px-Element (58px bei runden und quadratischen Formen) und das Logo wächst darin.
  • 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 Konversation eines Besuchers bleibt 24 Stunden lang bestehen, falls dieser zurückkehrt, danach beginnt sie von vorn.
  • Wenn der Assistent nicht erreichbar ist, zeigt das Widget eine kurze Nachricht an und verursacht niemals einen Fehler auf Ihrer Seite.
Next: App SDKs →