El widget de chat web es una burbuja de chat que coloca en cualquier página web con una sola etiqueta <script>. Los visitantes chatean con su IA; cuando una persona toma el relevo, sus respuestas aparecen en esa misma burbuja — en directo.
wk_…) que dirige cada chat a su desk. Use ahí Copy snippet (copiar fragmento), y Preview widget (previsualizar widget) para verlo antes de que se acerque a su sitio. Consulte los ajustes.Añadirlo a su sitio
Pegue el fragmento justo antes de su etiqueta de cierre </body>:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>El widget se carga en su propio marco, así que no choca con los estilos ni con los scripts de su sitio.
Opciones
| Atributo | Qué hace |
|---|---|
data-key |
Obligatorio. La clave del widget de su desk, tomada de los Settings. |
data-position |
right (predeterminado) o left — en qué esquina se sitúa la burbuja. |
data-offset |
Píxeles desde la esquina (20 de forma predeterminada). |
data-lang |
Fija el idioma del widget, por ejemplo ja. Déjelo sin poner y cada visitante verá el idioma de su propio navegador. |
Si su página muestra una insignia de reCAPTCHA en esa misma esquina, el widget se eleva automáticamente por encima para que no se solapen.
En qué idioma habla el widget
Si no se toca, el widget sigue el idioma del navegador de cada visitante. Un visitante japonés en un sitio en inglés obtiene la burbuja en japonés; no hay nada que configurar, y dos visitantes de la misma página pueden ver idiomas distintos.
Para fijar un solo idioma en su lugar — un sitio que atiende a un único mercado, lea quien lea — añada data-lang:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>Traducido a 11 idiomas: inglés, japonés, coreano, chino (simplificado y tradicional), español, francés, alemán, portugués, árabe y ruso. El árabe se muestra de derecha a izquierda, y el chino sigue la escritura del visitante: tradicional para Taiwán, Hong Kong y Macao, y simplificado en los demás casos. Cualquier otro idioma recae en inglés en lugar de mostrar una burbuja traducida a medias, así que data-lang="it" le da inglés.
data-lang. La respuesta de la IA sigue al idioma en el que escribe el cliente. Y la IA solo puede responder a partir de artículos de la base de conocimiento escritos en ese idioma — un artículo en inglés no responderá a una pregunta en japonés. Si atiende a clientes en dos idiomas, escriba sus artículos en ambos. Consulte su base de conocimiento.Lo mismo vale para el formulario web alojado: añada ?lang=ja a su dirección para fijarlo, o déjelo sin poner para seguir al visitante.
El color de su marca
Mientras no elija uno, el chat usa nuestro turquesa. Elija su propio color y se aplicará a la cabecera del chat, a sus botones y a los mensajes de su cliente, al botón de cierre (✕) del lanzador mientras el chat está abierto, y a su formulario web alojado.
- Abra los Settings de su desk. En la sección Web chat (chat web), busque Brand colour (color de marca), justo debajo de Chat bubble icon (icono de la burbuja de chat).
- Elija un color y haga clic en Save colour (guardar color).
- ¿Ha cambiado de idea? Reset to default (restablecer el predeterminado) devuelve nuestro turquesa.
Su color llega a su sitio web en unos 5 minutos, y no hay que volver a pegar nada. Igual que el icono, solo los administradores del desk y el propietario pueden cambiarlo.
Usar su propio icono de burbuja
De forma predeterminada, el lanzador en su sitio web es nuestra burbuja turquesa con un icono de bocadillo (💬). Puede sustituirlo por su propio PNG para que el widget parezca parte de su sitio. La imagen que suba pasa a ser el botón entero: rellena todo el lanzador de 56 píxeles, y ya no dibujamos nuestro círculo turquesa detrás.
- Abra los Settings de su desk. Vaya a la sección Web chat (chat web) y busque Chat bubble icon (icono de la burbuja de chat).
- Haga clic en Upload PNG (subir PNG) y elija su archivo. La burbuja de vista previa que hay junto al botón muestra exactamente cómo quedará el lanzador.
- ¿Ha cambiado de idea? Reset to default (restablecer el predeterminado) devuelve nuestro icono de bocadillo.
| Imagen | Qué admite |
|---|---|
| Formato | PNG |
| Tamaño recomendado | Cuadrada, de al menos 112×112 píxeles |
| Tamaño con el que se muestra | Rellena todo el lanzador, 56×56 píxeles |
| Forma | La define la propia imagen — se recomienda encarecidamente un fondo transparente |
| Tamaño de archivo | 256 KB como máximo |
El lanzador se dibuja a 56×56 píxeles, así que un original de 112×112 (o mayor) mantiene su marca nítida en pantallas de alta resolución. La sombra sutil se la añadimos nosotros y sigue el contorno de su ilustración, de modo que no hace falta incorporarla al PNG.
El icono del lanzador es una imagen, así que el color de su marca no lo repinta — lo que ven los visitantes es el icono que usted sube. Como nuestro círculo ya no se dibuja detrás de su imagen, un PNG transparente significa que el color que ven los visitantes es el de su propia ilustración.
Qué ve el visitante
- Abre la burbuja y deja un nombre, un correo electrónico y un primer mensaje.
- La IA responde a partir de su conocimiento, con fuentes, ahí mismo en el chat — sin esperar a nadie de su equipo.
- Una persona puede tomar el relevo — su respuesta aparece en ese mismo chat en unos segundos.
El correo que dejan es lo que permite reconocerlos la próxima vez — consulte su registro de clientes.
data-key en todos los sitios donde esté pegado el fragmento, y allí donde su formulario la envíe.El chat web es una de las cinco vías de entrada — consulte cómo le contactan los clientes y cómo funciona un ticket una vez empezado el chat.