Widget-API

Voor ontwikkelaars, of iedereen die wil dat de chat opent via een eigen knop.

Installeren

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

De scripttag heeft alleen src en data-key nodig. Al het andere — kleuren, positie, groet, taal — komt uit je dashboard, zodat je nooit opnieuw hoeft te publiceren om ze te wijzigen.

De widget wordt getoond in de taal die is ingesteld bij Installeren → Taal die je bot spreekt: de knop, invulvelden en meldingen, en de richting van de lay-out (Arabisch en Urdu zijn rechts-naar-links). De teksten komen mee met de configuratie van de widget, dus er is geen tweede verzoek en niets te vertalen aan jouw kant.

Modussen

Zwevend (standaard). Een launcher-knop in de hoek die een chatvenster opent.

Inline. Plaats een lege container op de pagina en de chat vult deze op:

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

De container heeft een hoogte nodig. In de inline-modus is de chat altijd zichtbaar, dus er valt niets te openen of te sluiten.

JavaScript API

Beschikbaar op window.KeydaBot zodra het script is geladen:

Voorbeeld: open de chat via je eigen knop "Chat met ons":

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

Hoe het zich gedraagt op je pagina

• Het paneel opent boven de lanceerknop, die op zijn plek blijft en de sluitknop wordt. Nogmaals tikken, op de ✕ in de koptekst tikken of op Escape drukken sluit de chat.
• Een bezoeker kan het paneel uitvouwen via de koptekst — het groeit tot de hoogte van het venster en maximaal 760px breed — en deze keuze wordt onthouden in de browser. Op telefoons is het paneel al het hele scherm, dus deze optie wordt daar niet getoond.
• Je instelling voor logogrootte verandert het logo, niet de knop: de launcher behoudt zijn grootte en het logo groeit erbinnen. Knopgrootte (Installeren → Vormgeving) past de knop zelf aan — klein, gemiddeld of groot — ongeacht de vorm.
• Vier knopvormen: een pil met je label, een ronde bubbel, een afgerond vierkant en een chatbubbel met een staartje. Het staartje zit aan de kant die naar je pagina wijst.
• Alles wordt weergegeven binnen een shadow root, zodat jouw CSS de widget niet kan beschadigen en de CSS van de widget jouw site niet kan raken.
• Het paneel wordt pas geladen wanneer een bezoeker het opent, zodat het je pagina niet vertraagt.
• Het gesprek van een bezoeker loopt 24 uur door als hij terugkomt, en begint daarna opnieuw. Het paneel opnieuw openen herstelt de draad — inclusief bestanden en een welkomstflow-vraag die nog op een antwoord wachtte.
• Met de paperclip in het invoerveld kan een bezoeker tot drie foto's of documenten aan een bericht toevoegen (groottes en types in Limieten en beveiliging). Foto's worden in de browser verkleind voordat ze worden geüpload, zodat een foto van 12 megapixel de pagina verlaat op een paar honderd kilobytes. Zet bestanden uit bij Installeren en de knop verdwijnt.
• Een welkomstflow verloopt als gewone bubbels: keuzes worden knoppen onder de bubbel, een knop Overslaan verschijnt wanneer een stap optioneel is, en de placeholder van het invoerveld wordt de vraag. Een voltooide flow wordt 30 dagen onthouden in de browser van de bezoeker.
• Als de assistent onbereikbaar is, toont de widget een kort bericht en veroorzaakt nooit een fout op je pagina.

Binnen de app-SDK's

Dezelfde chat draait in elke SDK, dus bijlagen en welkomstflows bereiken je app zonder release — op één uitzondering na. Een bestandskiezer openen vanuit een webview is de taak van de host. De iOS-, React Native- en Ionic-pakketten doen dit al; Android en Flutter hebben SDK 0.1.4 of nieuwer nodig. Op oudere versies herkent de widget de shell en verbergt hij de paperclip in plaats van een knop te tonen die niets doet.