Keyda Business
ColombiaEnglish Iniciar sesión Empezar gratis
Documentación de Keyda BusinessReferencia

API del widget

Para desarrolladores, o cualquier persona que quiera que el chat se abra desde su propio botón.

Instalación

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

The script tag needs only src and data-key. Everything else — colours, position, greeting, language — comes from your dashboard so you never have to redeploy your site to change them.

The widget is drawn in the language set on Install → Language your bot speaks: its button, placeholders and notices, and the direction of the layout (Arabic and Urdu are right-to-left). The strings arrive with the widget's configuration, so there is no second request and nothing to translate on your side.

Modos

Flotante (predeterminado). Un botón de inicio en la esquina que abre un panel de chat.

En línea. Coloca un contenedor vacío en la página y el chat lo llena en su lugar:

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

El contenedor necesita una altura. En el modo integrado, el chat siempre está visible, por lo que no hay nada que abrir o cerrar.

API de JavaScript

Disponible en window.KeydaBot una vez que el script se haya cargado:

LlamarLo que hace
KeydaBot.open()Abre el panel de chat
KeydaBot.close()Lo cierra
KeydaBot.toggle()Abre o cierra
KeydaBot.expand()Hace que el panel sea tan alto como la ventana y de hasta 760px de ancho
KeydaBot.shrink()Volver a la tarjeta estándar
KeydaBot.isOpentrue cuándo el chat está visible
KeydaBot.isExpandedtrue mientras el panel está expandido
KeydaBot.clientIdEl Client ID que esta página está utilizando

Ejemplo: abre el chat desde tu propio botón "Chatea con nosotros":

<button onclick="KeydaBot.open()">Chat with us</button>
El script se carga de forma asíncrona, por lo que window.KeydaBot puede no existir un momento después de cargar la página. Asocia los eventos a un clic en lugar de llamarlo mientras la página se analiza.

Cómo se comporta en tu página

  • El panel se abre encima del botón de inicio, que permanece en su lugar y se convierte en el control de cierre. Al tocarlo de nuevo, la ✕ en el encabezado o al presionar Escape se cierra el chat.
  • Un visitante puede expandir el panel desde la cabecera —crece hasta la altura de la ventana y hasta 760px de ancho— y la preferencia se guarda en su navegador. En los teléfonos el panel ocupa toda la pantalla, por lo que este control no se muestra allí.
  • Your logo size setting changes the logo, not the button: the launcher keeps its size and the logo grows inside it. Button size (Install → Appearance) is what resizes the button itself — small, medium or large — whatever shape it is.
  • Four button shapes: a pill with your label, a round bubble, a rounded square, and a chat bubble with a tail. The tail sits on the side facing your page.
  • Todo se renderiza dentro de un shadow root, por lo que tu CSS no puede romper el widget ni el CSS del widget puede afectar a tu sitio.
  • El panel solo se carga cuando un visitante lo abre, por lo que no ralentiza tu página.
  • La conversación de un visitante continúa durante 24 horas si vuelve, y luego empieza de cero.
  • Si no se puede contactar al asistente, el widget muestra un mensaje breve y nunca genera un error en tu página.
Next: App SDKs →