Keyda Business
ArgentinaEnglish 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>

La etiqueta de script solo necesita src y data-key. Todo lo demás — colores, posición, saludo, idioma — viene de tu panel, así que nunca tienes que volver a desplegar tu sitio para cambiarlos.

El widget se muestra en el idioma configurado en Instalar → Idioma que habla tu bot: su botón, campos y avisos, y la dirección del diseño (árabe y urdu son de derecha a izquierda). Los textos llegan junto con la configuración del widget, así que no hay una segunda solicitud ni nada que traducir de tu parte.

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í.
  • Tu configuración de tamaño del logotipo cambia el logotipo, no el botón: el lanzador mantiene su tamaño y el logotipo crece dentro de él. Tamaño del botón (Instalar → Apariencia) es lo que cambia el tamaño del botón en sí — pequeño, mediano o grande — sea cual sea su forma.
  • Cuatro formas de botón: una píldora con tu etiqueta, una burbuja redonda, un cuadrado redondeado y una burbuja de chat con una cola. La cola queda en el lado que mira hacia tu página.
  • 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 después empieza de cero. Volver a abrir el panel restaura el hilo — archivos incluidos, y una pregunta del flujo de bienvenida que seguía esperando respuesta.
  • El clip del compositor permite a un visitante adjuntar hasta tres fotos o documentos a un mensaje (tamaños y tipos en Límites y seguridad). Las fotos se reducen en el navegador antes de subirlas, así que una foto de 12 megapíxeles sale de la página con solo unos cientos de kilobytes. Desactiva los archivos en Instalar y el botón desaparece.
  • Un flujo de bienvenida se ejecuta como burbujas normales: las opciones se convierten en botones debajo de la burbuja, aparece un botón Omitir cuando un paso es opcional, y el marcador de posición del compositor se convierte en la pregunta. Un flujo completado se recuerda en el navegador del visitante durante 30 días.
  • Si no se puede contactar al asistente, el widget muestra un mensaje breve y nunca genera un error en tu página.

Dentro de los SDK de aplicaciones

El mismo chat funciona en todos los SDK, así que los archivos adjuntos y los flujos de bienvenida llegan a tu app sin necesidad de publicar una versión — con una excepción. Abrir un selector de archivos desde una vista web es tarea de la aplicación anfitriona. Los paquetes de iOS, React Native e Ionic ya lo hacen; Android y Flutter necesitan el SDK 0.1.4 o posterior. En versiones anteriores, el widget reconoce el entorno y oculta el clip en lugar de mostrar un botón que no hace nada.

En iOS, el panel del sistema ofrece Tomar foto siempre que se aceptan imágenes, y elegirla bloquea una app que no tiene NSCameraUsageDescription en su Info.plist. Añade la clave antes de publicar una versión que incluya el chat.
Next: App SDKs →