Chat web

Con el chat web, tu asistente aparece como ventana de chat en tu propio sitio web. Los visitantes hacen sus preguntas o piden una cita sin llamar, y tu equipo puede leer la conversación o tomar el control en cualquier momento. Este artículo explica cómo activar, personalizar e insertar el widget, y cómo controlarlo con JavaScript.

Activar el chat web

Necesitas el rol Editor o Administrador y una suscripción activa. El chat web está incluido en todos los planes. Si tu suscripción se detiene, el widget deja de aparecer en tu sitio web.

1. Abre Asistentes, elige el asistente y ve a la pestaña Canales.
2. Abre la fila Chat web y activa Activar el chat web. Sin una suscripción activa, el interruptor no se activa y ves dónde elegir un plan.
3. Revisa Nombre del enlace público. Ya hay un nombre puesto, que puedes cambiar: letras minúsculas, dígitos y guiones (por ejemplo, fontaneria-garcia). El nombre debe ser único en Yarla; si no, ves «Ese enlace de chat ya está en uso». Aparece en la URL de la página de chat y en el código para tu sitio web.
4. No tienes que guardar nada a mano. El texto se guarda al salir del campo; los interruptores, los desplegables y las casillas, al momento. Al final de la fila encuentras Código para tu sitio web y el enlace Página de chat lista para usar.

Apariencia

En la misma fila adaptas el widget a la imagen de tu marca.

Ajuste	Significado	Por defecto
Color	El color principal del widget: el botón de inicio, la cabecera, el botón de enviar y los mensajes del visitante.	Morado (#8237f0)
Posición	En qué lado de la parte inferior está el botón de inicio: Derecha o Izquierda.	Derecha
Título	El texto de la cabecera de la ventana del chat. Vacío significa el nombre de tu empresa, que sigue por sí solo un cambio de nombre.	Vacío
Primer mensaje en el chat	El primer mensaje que ve el visitante al abrirse la ventana. Vacío = el saludo de tu asistente y, si también está vacío, una frase estándar.	Vacío
Texto del campo	El texto de ayuda en gris del campo de escritura, por ejemplo «Pregúntanos lo que quieras…». Vacío = un texto estándar en el idioma de tu asistente, como «Escribe tu mensaje...».	Vacío
Texto del pie	Una línea corta bajo el campo de escritura, por ejemplo «Las respuestas las genera la IA». Vacío = sin línea.	Vacío
Texto del botón	El texto del botón de inicio, por ejemplo «Pregúntanos». Vacío = una palabra estándar en el idioma de tu asistente, normalmente «Chat».	Vacío

Los cambios se aplican en tu sitio web en cuanto un visitante vuelve a cargar la página; no tienes que volver a colocar el código. La única excepción es Nombre del enlace público: si lo cambias, el nombre antiguo deja de funcionar, también en los enlaces a la página de chat, así que sí tienes que volver a colocar el código.

Quién responde y traspaso

Ajuste	Significado	Por defecto
Quién responde	El asistente: el asistente responde a todas las conversaciones y solo las traspasa si el visitante insiste en hablar con una persona. El equipo: el primer mensaje va directamente a la Bandeja, el visitante recibe una breve confirmación y responde tu equipo; el asistente no hace nada. Condicional: responde el asistente y traspasa la conversación cuando se cumple la condición de abajo o el visitante insiste en hablar con una persona.	El asistente
Condición de traspaso	En lenguaje normal, cuándo debe traspasar el asistente, por ejemplo «Si el visitante quiere un presupuesto de más de 5.000 € o pide hablar con alguien del equipo». Solo se ve con Condicional. Si después vuelves a El asistente, la condición que hayas escrito sigue aplicándose, así que vacíala antes.	Vacío
Tiempo de inactividad (minutos)	Un número de 5 a 1.440. Tras estos minutos sin mensajes, el chat se cierra y se ejecutan las acciones de después de la conversación (por ejemplo un correo, un SMS o un webhook). Se cierra antes si el cliente se despide y el asistente termina la conversación, o si la terminas en la Bandeja. Si el cliente espera a tu equipo, el chat sigue abierto hasta que alguien responde o lo termina, también el fin de semana; después se cierra tras 18 horas sin actividad. Un chat cerrado no continúa: el visitante empieza uno nuevo.	60
Sitios web permitidos	Lista de sitios web donde puede cargarse el widget, con https:// delante, por ejemplo https://www.ejemplo.es. Como máximo 200. La dirección debe coincidir exactamente: con y sin www y cada subdominio son líneas distintas. En otros sitios el widget no se ve. Vacío = el widget se carga en cualquier sitio. Si activas el chat con esta lista vacía, rellenamos tu sitio web de Ajustes → Empresa, con y sin www. Después la lista es tuya.	Vacío

Una conversación también puede cerrarse antes: el asistente la cierra después de despedirse (si le dan las gracias, primero pregunta si puede ayudar en algo más), y tu equipo puede finalizarla. Una vez cerrada, el visitante ya no puede escribir en ella. La página de chat muestra entonces el botón Empezar una conversación nueva. El widget de tu sitio web no tiene ese botón y se queda en la conversación cerrada en ese navegador; allí empiezas una nueva con startNewConversation() (consulta SDK de JavaScript).

Limita los sitios web

Indica siempre tus propios sitios web en Sitios web permitidos. Así nadie puede copiar tu código y usar tu asistente en otro sitio web, donde las respuestas seguirían contando en tu uso.

Insertar en tu sitio web

Copia la línea de Código para tu sitio web y colócala en el HTML de tu sitio web, justo antes de la etiqueta de cierre </body>. Tu nombre y las direcciones ya están bien puestos. La línea tiene este aspecto:

<script src="https://<dashboard-domain>/widget.js" data-slug="<slug>" data-api="https://<chat-api>" async></script>

data-api es la API del chat que muestra el panel, no la API del panel. Un fragmento copiado antes, que aún apunte a la API del panel, deja de funcionar. Cópialo de nuevo.

Gracias a async, el widget se carga en segundo plano y no ralentiza tu página.

Cómo colocar la línea depende de la plataforma de tu sitio web:

• WordPress: usa un plugin de scripts de cabecera y pie (busca «header footer scripts» en el directorio de plugins) y pega el código en el campo del pie (footer). También puedes añadirlo a footer.php de tu tema (o tema hijo).
• Webflow: ve a Project settings → Custom code y pega el código en Footer code. Vuelve a publicar el sitio.
• Squarespace: ve a Settings → Advanced → Code injection y pega el código en el campo Footer.
• Otras plataformas: busca en los ajustes «custom code», «scripts» o «tracking code» para el pie de página. Si tienes dudas, envía la línea a quien lleve tu sitio web.

Respuestas de tu equipo y políticas de seguridad estrictas

Cuando un chat está con tu equipo, el widget comprueba cada 5 segundos si hay un mensaje nuevo. Si no llega nada, pasa poco a poco a una comprobación cada 30 segundos, y se detiene mientras la pestaña del navegador está en segundo plano. Por eso, el visitante suele ver tu respuesta en un plazo de 5 a 30 segundos. Donde hay disponible una conexión WebSocket en directo con Yarla, la respuesta aparece casi al momento. El widget abre esa conexión solo; no tienes que configurar nada. El widget empieza a vigilar cuando sabe que la conversación está con tu equipo. Si tomas el control de una conversación mientras el visitante no hace nada, tu respuesta solo aparece cuando el visitante envía algo, abre la ventana o vuelve a cargar la página.

Si tu sitio web envía una cabecera Content-Security-Policy estricta, añade la dirección de las actualizaciones en directo a connect-src, junto a la dirección de la API del chat:

connect-src https://<chat-api> wss://*.execute-api.eu-central-1.amazonaws.com

Permite también https://<dashboard-domain> en script-src y los estilos en línea ('unsafe-inline') en style-src: de ahí viene el script, y el widget añade un bloque de estilos propio a tu página.

Sin la dirección wss:// el chat sigue funcionando. El widget sigue comprobando si hay mensajes nuevos, como se explica arriba. La política de seguridad de tu sitio web no se aplica a la página de chat.

Página de chat lista para usar

Si prefieres ofrecer el chat sin añadir nada a tu sitio web, usa el enlace Página de chat lista para usar:

https://<dashboard-domain>/es/chat/<slug>

Cambia /es/ por /nl/ o /en/ para tener los botones y avisos de la página en neerlandés o en inglés; el asistente responde como lo hayas configurado. La página muestra tu título, el nombre de tu asistente y la ventana del chat, con tu color. Es útil como enlace en tu firma de correo, en redes sociales o como código QR en tu furgoneta y tus presupuestos.

SDK de JavaScript

Cuando el script se ha cargado, el objeto window.YarlaChat está disponible en tu página. Con él controlas el widget desde tu propio código, por ejemplo para abrirlo cuando alguien hace clic en tu propio botón «Haz una pregunta».

Método	Qué hace
open()	Abre la ventana del chat.
close()	Cierra la ventana del chat (el botón de inicio sigue visible).
toggle()	Abre la ventana si está cerrada, y al revés.
show()	Vuelve a mostrar el widget después de hide().
hide()	Oculta todo el widget: el botón de inicio y la ventana del chat.
startNewConversation()	Empieza una conversación nueva y vacía en este navegador. La conversación anterior sigue en tu Bandeja.
setContext(object)	Pasa contexto al asistente; consulta más abajo.

Después de cargarse, el widget primero obtiene sus ajustes. Hasta entonces, open(), close(), toggle(), show() y hide() todavía no hacen nada. Si nunca quieres el widget en una página, por ejemplo una página de pago, no pongas el código en esa página.

Pasar contexto

Con setContext() das al asistente información sobre la situación del visitante: en qué página está, qué producto está viendo o, si ha iniciado sesión, su nombre de pila. El asistente lo usa para responder con más precisión («Veo que estás mirando la página de mantenimiento de calderas…»). El contexto se envía con los siguientes mensajes del visitante. Ten en cuenta lo siguiente:

• El objeto puede ocupar como máximo 8 KiB. Si es mayor, la llamada da un error y se mantiene el contexto anterior.
• Cada llamada sustituye por completo el contexto anterior.
• El contexto se trata como entrada no fiable: el asistente lo lee como información, no como instrucciones.
• Nunca incluyas contraseñas, tokens, números de cliente ni otros datos sensibles. El visitante puede consultar todo lo que pases.

Ejemplo

Como el widget se carga de forma asíncrona, window.YarlaChat solo existe cuando el script se ha ejecutado. Por eso, espera al evento load de la página; si el objeto ya existe, puedes empezar enseguida.

function setupChat() {
  window.YarlaChat.setContext({
    page: document.title,
    url: window.location.pathname,
    product: 'Plan de mantenimiento de calderas',
    firstName: 'Lucía' // solo si el visitante ha iniciado sesión
  });

  document.querySelector('#boton-preguntar').addEventListener('click', function () {
    window.YarlaChat.open();
  });
}

if (window.YarlaChat) {
  setupChat();
} else {
  window.addEventListener('load', setupChat);
}

Límites

Para que nadie pueda saturar tu chat con un script, el chat tiene límites. Un chat admite 60 mensajes por hora y una red 300. Tu asistente da como máximo 1.000 respuestas por hora y 5.000 al día entre todos los chats de tu sitio web; un sitio con mucho tráfico se queda muy por debajo. Por encima, los visitantes ven un aviso para intentarlo más tarde, o mañana en el caso del límite diario.

Privacidad y RGPD

Lo que guardamos de una conversación del chat web:

• los mensajes del visitante y las respuestas del asistente o de tu equipo;
• los datos de contacto que el visitante da durante la conversación, como nombre, correo electrónico o teléfono;
• el contexto que tu sitio web pasa con setContext().

El widget y la página de chat guardan en el navegador del visitante un número de sesión aleatorio (localStorage), para que la conversación continúe cuando pasa a otra página.

La dirección IP del visitante no se guarda con la conversación. Sí aparece en los registros técnicos de acceso del chat, durante 90 días como máximo. Cuánto tiempo se conservan las conversaciones lo decides en Conservar las conversaciones (días), en Ajustes → Empresa: de 7 a 3.650 días, 365 por defecto. Solo un Administrador puede cambiarlo. Pasado ese plazo se eliminan automáticamente.

Como tratamos datos personales en tu nombre, el chat web debe figurar en la política de privacidad de tu sitio web. Puedes usar el párrafo siguiente como punto de partida y adaptarlo a tu situación:

Chat en nuestro sitio web
En nuestro sitio web puedes chatear con nuestro asistente digital. Los mensajes
que envías y los datos de contacto que nos das los trata Yarla, que actúa como
encargado del tratamiento en nuestro nombre. Las respuestas del chat las genera
la inteligencia artificial; una persona de nuestro equipo puede tomar el control
de la conversación en cualquier momento. Conservamos las conversaciones del chat
durante un máximo de [plazo de conservación] y las usamos únicamente para
responder a tu pregunta y mejorar nuestro servicio. Tu dirección IP no se guarda
con la conversación y permanece en registros técnicos durante 90 días como
máximo. Tienes derecho a acceder a tus datos, corregirlos y suprimirlos; para
ello, escríbenos a [correo electrónico].

Artículos relacionados

• WhatsApp
• Bandeja y análisis
• Ajustes técnicos
• Resolución de problemas: WhatsApp y chat web