Cómo añadir un chat en vivo gratis a tu web: guía paso a paso [2026]

Agregar chat en vivo a tu sitio web puede parecer una tarea técnica que requiere la ayuda de un programador. En la práctica, normalmente todo se reduce a crear una cuenta, configurar la ventana de chat y pegar un fragmento de código.

No es necesario crear su propio sistema de mensajería, configurar un servidor o crear una aplicación desde cero. El widget listo actúa como un elemento adicional del sitio web y permite al cliente iniciar una conversación sin instalar la aplicación ni crear una cuenta.

En esta guía, le mostramos cómo agregar el chat en vivo gratuito de Chataptor a:

• página HTML normal,
• WordPress,
• WooCommerce,
• Shopify,
• Comprador,
• PrestaShop,
• una página que utiliza Google Tag Manager.

Puedes realizar todo el proceso tú mismo. Lo más importante es copiar el código generado para una página específica y colocarlo en el lugar correcto.

Cómo añadir un chat en vivo a una web: versión rápida

El proceso básico es el siguiente:

1. Crea una cuenta en el sistema Chataptor.
2. Vaya a la pestaña Canales.
3. Seleccione Widget de página.
4. Añade el nombre y la dirección de tu sitio web.
5. Abra la pestaña Instalación de widgets.
6. Configurar la apariencia del chat.
7. Copia el código generado por Chataptor.
8. Pégalo en la página antes de la etiqueta de cierre </body>.
9. Guarde sus cambios y envíe un mensaje de prueba.

Después de la instalación adecuada, los mensajes enviados desde el widget comenzarán a ir al panel de Chataptor. Puede responderles desde su navegador o aplicación móvil.

¿Qué necesitas antes de empezar?

Para iniciar el chat en vivo necesitas:

• dirección del sitio web,
• Cuenta Chataptor,
• capacidad de editar la página o su configuración,
• acceso al panel, tienda o sistema de gestión de sitios web de WordPress.

No necesitas saber HTML o JavaScript. En los sistemas más populares, el código se puede pegar en un campo especial para scripts adicionales.

Si el sitio web es administrado por una agencia o desarrollador, simplemente cargue el código generado con la información:

Agregue este script globalmente en todas las subpáginas, inmediatamente antes de la etiqueta de cierre </body>.

Paso 1. Crea una cuenta Chataptor gratuita

El primer paso es crear una cuenta gratuita de Chataptor.

En el formulario de inscripción, proporcione:

• nombre de la empresa,
• tu nombre,
• dirección de correo electrónico,
• contraseña.

Después de enviar el formulario, revise su buzón y confirme su registro si recibe un mensaje de activación.

Chataptor está disponible actualmente de forma gratuita, sin límites de conversaciones ni funciones pagas. Incluye no sólo un widget de chat, sino también una aplicación móvil, plantillas de respuesta, una bandeja de entrada común y traducción automática de mensajes.

Paso 2. Vaya a la pestaña “Canales”

Después de iniciar sesión, abra la pestaña Canales.

Existen fuentes desde donde los mensajes pueden llegar a Chataptor. Uno de ellos es Website Widget, que es una ventana de chat que se muestra a los visitantes del sitio.

No es necesario configurar WhatsApp, correo electrónico, Facebook u otras integraciones de inmediato. Puede comenzar solo con chat en vivo y agregar canales adicionales más adelante.

Seleccione Widget de página.

Paso 3. Añade tu sitio web

Después de seleccionar el widget, irá a la configuración de la página.

Agregue una nueva página y complete lo siguiente:

• nombre de la página,
• su dirección web.

El nombre ayuda a identificar la fuente del chat del panel. Esto es especialmente útil si la empresa tiene varias tiendas, marcas, dominios o versiones en idiomas.

Nombres de ejemplo:

• Compre Polonia,
• Compre en Alemania,
• Sitio web de la empresa,
• Tienda minorista,
• Panel B2B.

En el campo de dirección, ingresa la dirección completa del sitio web donde deseas que aparezca el chat en vivo.

Después de completar los datos, guarda la página.

Paso 4. Configurar la apariencia del widget

Después de guardar la página, vaya a la pestaña Instalación de widgets.

Dependiendo de la versión actual del panel, podrá configurar, entre otros:

• título de la ventana de chat,
• mensaje de bienvenida,
• campo de texto para ingresar mensajes,
• color principal,
• tema claro u oscuro,
• posición del widget,
• método para abrir la ventana,
• traducción automática de conversaciones.

No es necesario refinar todas las configuraciones a la vez. Primero, puede ejecutar una versión simple, verificar su funcionamiento y solo luego cambiar la apariencia.

¿Qué texto de bienvenida debo configurar?

Mantenga su mensaje de bienvenida breve e indique claramente que el cliente puede hacer una pregunta.

Ejemplos:

¡Buenos días! ¿Cómo podemos ayudar?

¿Tiene alguna pregunta sobre un producto o pedido? Escríbanos.

¿Necesitas ayuda para elegir un producto? Estamos aquí.

Evite textos largos que describan a toda la empresa. El cliente abre el chat porque quiere iniciar una conversación rápidamente.

¿Qué color de widget debo elegir?

Lo mejor es utilizar un color que coincida con la identificación visual del sitio web, pero que también contraste lo suficiente.

El botón debe estar visible pero no oscurecido:

• menú móvil,
• botón agregar producto al carrito,
• información sobre cookies,
• otros elementos importantes de la página.

Después de iniciar el widget, verifique su apariencia tanto en su computadora como en su teléfono.

Paso 5. Copia el código generado por Chataptor

Después de guardar la configuración, Chataptor generará un código de instalación individual.

El código contiene una identificación que conecta el widget con la cuenta y página correctas. Por lo tanto, no debes copiar el código que encuentres en otra guía, sitio web o cuenta de terceros.

Utiliza siempre el código completo generado en tu panel de Chataptor.

El fragmento puede ser similar al siguiente ejemplo:

<body>
  <!-- Contenido de la página -->

  <!-- Tutaj wklej pełny kod wygenerowany przez Chataptor -->
</body>

No cambie manualmente los ID, claves o direcciones de los scripts. Los parámetros de apariencia solo se pueden editar si sabes para qué sirven.

Paso 6. Pegue el código antes de la etiqueta </body>

El código del widget debe agregarse inmediatamente antes de la etiqueta de cierre:

</body>

Diseño de archivo de ejemplo:

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <title>Mi sitio web</title>
  </head>
  <body>
    <h1>Bienvenido a nuestro sitio web</h1>

    <!-- Kod widgetu Chataptor wklej w tym miejscu -->
  </body>
</html>

Colocar el código en el pie de página global o en la plantilla principal hará que el chat aparezca en todas las subpáginas.

Si desea que esté disponible solo en una ubicación específica, por ejemplo, en una tienda pero no en un blog, el método de instalación puede requerir una condición adicional o una configuración de regla de visualización.

¿Cómo agregar chat en vivo a WordPress?

La solución más sencilla para una persona sin conocimientos técnicos es utilizar Integración de Chataptor con WordPress o un complemento que le permita agregar scripts al pie de página.

Podría ser, por ejemplo, una herramienta como:

• Código WPC,
• Código de encabezado y pie de página,
• Scripts de encabezado y pie de página.

Después de instalar el complemento apropiado:

1. Abre su configuración.
2. Busque el campo de código en el pie de página.
3. Pega el código completo generado en Chataptor.
4. Establecer visualización en página completa.
5. Guardar cambios.
6. Borrar caché de WordPress.
7. Abre la página en modo privado y revisa el widget.

Los nombres de los campos pueden variar entre complementos. Busque términos como:

• Pie de página,
• Extremo del cuerpo,
• Antes de </body>,
• Guiones en pie de página.

Instalación mediante archivo de tema

Un técnico puede agregar el script utilizando el mecanismo wp_footer o en el archivo de pie de página de un tema secundario.

No vale la pena agregar código directamente al tema principal. Una vez actualizado, el cambio podrá eliminarse.

¿Cómo agregar chat en vivo a WooCommerce?

WooCommerce se ejecuta en WordPress, por lo que la instalación es la misma.

Se puede agregar código Chataptor:

• a través del complemento de administración de scripts,
• hasta wp_footer,
• en el pie de página del tema secundario.

Después de la instalación, verifique especialmente:

• página de inicio de la tienda,
• tarjeta de producto,
• cesta,
• dispositivo móvil.

El widget no debe cubrir los botones de compra ni los elementos utilizados al realizar un pedido.

¿Cómo agregar chat en vivo a Shopify?

En Shopify, el código se puede colocar en el archivo de plantilla principal.

Antes de comenzar, es una buena idea crear una copia de su tema activo.

Entonces:

1. Inicia sesión en tu panel de Shopify.
2. Abre la sección Tienda Online.
3. Vaya a Temas.
4. Con el tema activo, selecciona la opción editar código.
5. En el directorio Diseño, abra el archivo theme.liquid.
6. Encuentra la etiqueta </body>.
7. Pegue el código completo de Chataptor directamente antes.
8. Guardar cambios.
9. Actualiza la tienda y realiza una conversación de prueba.

El código debe incluirse en la plantilla principal para que el widget esté disponible en todas las subpáginas importantes de la tienda.

¿Cómo agregar chat en vivo a Shoper?

El nombre exacto de la sección puede variar según la versión del panel y la plantilla utilizada. La instrucciones sobre la integración de Chataptor con Shoper también puede resultar útil.

La mayoría de las veces deberías:

1. Inicie sesión en el panel de administración.
2. Abre la sección de complementos o integraciones.
3. Vaya a integraciones personalizadas o su propio código.
4. Busque el campo de código en el pie de página de la página.
5. Pega el código de Chataptor.
6. Guardar cambios.
7. Consulta la tienda en una nueva ventana del navegador.

Busque el campo descrito como código de cierre previo </body>.

Si no ves esta opción, el código se puede agregar editando la plantilla o enviarlo al soporte técnico de la tienda.

¿Cómo agregar chat en vivo a PrestaShop?

En PrestaShop, lo mejor es utilizar una solución que no requiera editar los archivos principales del sistema.

Los métodos posibles son:

• módulo que le permite agregar su propio JavaScript,
• módulo HTML personalizado,
• gancho displayFooter,
• pie de página del tema utilizado,
• un módulo sencillo preparado por el programador.

El código debe cargarse globalmente, preferiblemente en el pie de página de la página.

Los archivos principales de PrestaShop no deben modificarse. Una actualización del sistema podría eliminar los cambios realizados.

¿Cómo agregar chat en vivo a una página HTML normal?

Si tiene acceso a los archivos del sitio:

1. Abra la plantilla principal o el archivo de pie de página común.
2. Encuentra </body>.
3. Pegue el código de Chataptor directamente antes de esta etiqueta.
4. Guarde el archivo.
5. Publicar cambios en el servidor.
6. Actualiza la página sin caché.

Si el sitio web consta de muchos archivos HTML separados, el código debe agregarse a cada uno de ellos o a un componente común cargado en todas las subpáginas.

¿Cómo instalar Chataptor a través de Google Tag Manager?

Si el sitio web ya utiliza Google Tag Manager, se puede agregar el widget sin editar directamente el código del sitio web.

Proceso básico:

1. Crea una nueva etiqueta.
2. Seleccione el tipo HTML personalizado.
3. Pega el código completo generado por Chataptor.
4. Establecer regla de inicio en todas las páginas.
5. Guardar etiqueta.
6. Iniciar modo de vista previa.
7. Compruebe si el script se está cargando.
8. Publicar contenedor.

Este método es conveniente, pero requiere que Google Tag Manager esté instalado correctamente en el sitio.

También conviene comprobar la configuración del consentimiento de cookies. Si los scripts se bloquean hasta que se dé el consentimiento, el widget puede aparecer solo después de aceptar la configuración adecuada.

Paso 7. Comprueba si el widget funciona

Una vez que guardes y publiques el código, no dejes de trabajar cuando aparezca el botón.

Realizar prueba completa:

1. Abre la página en modo privado.
2. Compruebe si el botón de chat está visible.
3. Abrir widget.
4. Enviar mensaje de muestra.
5. Inicie sesión en Chataptor.
6. Compruebe si la conversación aparece en el panel.
7. Responder al mensaje.
8. Asegúrese de que la respuesta aparezca en el lado del cliente.
9. Repita la prueba en su teléfono.

Mensaje de prueba de muestra:

Buenos días, me gustaría comprobar si el chat en vivo funciona correctamente.

Si utilizas traducciones automáticas, realiza también la prueba en otro idioma.

El widget no aparece en la página: ¿qué comprobar?

Las causas más comunes de problemas son relativamente simples.

Código no publicado

Pegar código en el editor no siempre significa publicarlo. Verifique que los cambios se hayan guardado e implementado en la versión activa del sitio.

El código está solo en una subpágina

Si el script se agregó a una sola página en lugar de a una plantilla global, el chat no será visible en ningún otro lugar.

La caché muestra la versión anterior de la página

Borrar:

• Caché de WordPress,
• caché del complemento utilizado,
• caché de servidor o hosting,
• Caché CDN,
• memoria del navegador.

Luego abre la página en modo privado.

Código de muestra pegado en lugar del código de cuenta

El código debe contener ID asignados a la cuenta y página correctas. No copie el ejemplo del artículo ni del código de terceros.

El guión ha sido cambiado.

Compruebe que el editor no haya eliminado ningún código, comillas o atributos de secuencia de comandos al pegar.

Otro elemento cubre el widget.

Es posible que aparezca un banner de cookies, un botón de contacto o un menú móvil encima del chat. En este caso, debe cambiar la posición del widget o la configuración de la capa de página.

El sistema está bloqueando scripts externos

La causa puede ser:

• Política de seguridad de contenido,
• mecanismo de gestión del consentimiento,
• bloqueo de script mediante complemento de seguridad,
• Optimización de JavaScript,
• extensión de bloqueo de anuncios o seguimiento.

Mientras dure la prueba, vale la pena desactivar la optimización del script y consultar el sitio web en otro navegador.

¿Cómo configurar el chat en vivo para que los clientes realmente lo utilicen?

Instalar el widget es solo el comienzo. El chat debe ser visible, sencillo y adaptado a la forma en que los clientes utilizan el sitio web.

No pidas demasiada información antes de la conversación

Si un cliente necesita proporcionar nombre, apellido, número de teléfono, dirección de correo electrónico y alguna información adicional, puede optar por no participar antes de que se envíe el primer mensaje.

Al principio, recopile sólo los datos que realmente necesita.

Establecer expectativas realistas

Si el equipo solo responde durante el horario laboral, vale la pena comunicarlo claramente.

Ejemplo:

Escribe un mensaje. Atendemos de lunes a viernes de 8:00 a 16:00 horas.

Es mejor dar un tiempo real que prometer una respuesta “inmediata” cuando nadie puede darla.

Ten tus respuestas listas

Las preguntas más frecuentes son:

• disponibilidad,
• entrega,
• regresa,
• facturas,
• estado del pedido,
• cooperación.

En el sistema Chataptor, puede preparar respuestas listas para el chat en vivo e insertarlas usando comandos cortos, por ejemplo /envio, /devolucion o /factura.

La plantilla debería hacer que la respuesta sea más rápida pero aún así permitir que se adapte a un cliente específico.

Activar notificaciones móviles

El cliente puede escribir cuando no hay nadie sentado frente al ordenador. Aplicación móvil de servicio al cliente le permite notar una nueva conversación y responder desde su teléfono.

Esto es especialmente importante en empresas pequeñas donde el servicio de atención al cliente no es un departamento independiente que funciona las 24 horas, los 7 días de la semana.

Probar traducciones automáticas

Si el sitio es visitado por clientes extranjeros, habilite traducción automática de conversaciones.

El cliente escribe en su idioma. El agente lee el mensaje traducido y responde en el idioma que utiliza a diario. Chataptor traduce la respuesta antes de mostrársela al cliente.

¿El chat en vivo gratuito tiene límites?

Esto depende de la herramienta que elijas.

Algunos planes gratuitos limitan:

• número de conversaciones al mes,
• número de operadores,
• duración de la historia,
• número de páginas,
• Funciones de IA,
• automatización,
• capacidad de eliminar marcas.

Por lo tanto, antes de la instalación, vale la pena verificar no solo si la herramienta tiene un plan gratuito, sino también el momento en que la empresa tendrá que cambiar a una suscripción.

Chataptor es actualmente chat en vivo gratuito sin límites de conversaciones. No existe un paquete de traducción de IA pago independiente.

¿Necesito un desarrollador para instalar el chat en vivo?

Mayormente no.

Una persona sin conocimientos técnicos puede agregar el código por sí misma:

• Complemento de WordPress,
• configurar scripts adicionales en la tienda,
• Administrador de etiquetas de Google,
• campo de código personalizado en el creador de páginas.

Es posible que se necesite asistencia del desarrollador cuando:

• el sitio web utiliza un sistema propietario,
• no tiene acceso a la plantilla común,
• opera una estricta política de seguridad,
• el widget solo debería aparecer bajo ciertas condiciones, La instalación de
• requiere cambios en el tema o la aplicación.

¿Cuánto tiempo lleva agregar el chat en vivo al sitio web?

Simplemente crear el canal y pegar el código puede tardar unos minutos. Vale la pena dedicar más tiempo a:

• configuración del contenido del widget,
• probando la versión móvil,
• preparación de respuesta,
• establecimiento de horarios de atención,
• configurar notificaciones,
• verificación de traducción.

Es mejor ejecutar primero una versión simple y funcional y luego mejorar su apariencia basándose en conversaciones reales.

Lista de verificación de inicio del chat en vivo

Antes de completar la implementación, verifique:

• La cuenta Chataptor está activa.
• La página se ha agregado a la pestaña Canales.
• Se utilizó el código generado para la página correcta.
• El código se agregó globalmente antes de </body>.
• El widget está visible en su computadora.
• El widget está visible en el teléfono.
• No cubre botones ni banner de cookies.
• El mensaje de prueba va al panel.
• La respuesta es visible en el lado del cliente.
• Las notificaciones móviles están funcionando.
• El texto de bienvenida coincide con la página.
• El equipo sabe quién responde a nuevas conversaciones.
• Se han preparado las respuestas más habituales.
• Se han probado las traducciones si es necesario.

Resumen

Para agregar chat en vivo a su sitio web, no necesita crear su propio sistema ni iniciar una implementación complicada.

En el sistema Chataptor, el proceso se reduce a agregar una página, configurar el widget, copiar el código individual y colocarlo antes de la etiqueta </body>.

El código se puede agregar directamente a la página HTML, a través de WordPress, WooCommerce, Shopify, Shoper, PrestaShop o Google Tag Manager.

Después de la instalación, vale la pena realizar una conversación de prueba completa y verificar el funcionamiento del chat en el teléfono. Sólo entonces podrá estar seguro de que los mensajes de los clientes realmente llegan al equipo.

Chataptor te permite comenzar con un simple chat en vivo y luego también conectar otros canales de comunicación en el mismo panel. El widget en sí, la aplicación móvil, las plantillas de respuesta y las traducciones de IA están disponibles sin límite de conversaciones y sin plan pago.

¿Quieres activar el chat en tu web? Crea una cuenta gratuita de Chataptor, añade tu sitio y pega el código generado del widget.

Preguntas frecuentes

¿Cómo agregar chat en vivo gratuito a tu sitio web?

Cree una cuenta en el sistema Chataptor, vaya a la pestaña Canales, agregue un sitio web, abra Instalación de widgets y copie el código generado. Luego pégalo antes de la etiqueta de cierre </body>.

¿Dónde pegar el código del chat en vivo?

El código debería aparecer en la plantilla de página global, inmediatamente antes de </body>. Gracias a esto, el widget estará disponible en todas las subpáginas.

¿Cómo agregar chat en vivo a WordPress?

La forma más sencilla es utilizar un complemento que le permita agregar scripts al pie de página. Pegue el código de Chataptor en el campo Pie de página o Antes </body>, guarde los cambios y borre el caché.

¿Chataptor funciona con WooCommerce?

Sí. WooCommerce se ejecuta en WordPress, por lo que el código se puede agregar mediante el complemento de administración de scripts, wp_footer, o el pie de página de un tema secundario.

¿Cómo agregar chat en vivo a Shopify?

Abra el código del tema activo, vaya al archivo theme.liquid y pegue el código de Chataptor antes de la etiqueta </body>.

¿Puedo agregar chat en vivo a través de Google Tag Manager?

Sí. Cree una etiqueta HTML personalizada, pegue el código Chataptor, configúrelo para que se ejecute en todas las páginas y publique el contenedor.

¿Por qué no aparece el chat en vivo en el sitio web?

Las razones más comunes son código incorrecto, no publicar cambios, almacenar en caché, bloquear scripts externos o agregar el widget a una sola subpágina.

¿El cliente necesita instalar la aplicación?

No. El cliente utiliza la ventana de chat directamente en el sitio web. La aplicación móvil está diseñada para una empresa de mensajería.

¿Es posible cambiar la apariencia del widget?

Sí. Puede personalizar el color, el título, el mensaje de bienvenida, el texto del cuadro de mensaje, el tema y la posición del botón, entre otras cosas.

¿El chat en vivo gratuito tiene un límite de conversación?

Chataptor actualmente no tiene límite de conversaciones ni funciones pagas. El widget, la aplicación móvil y las traducciones de IA están disponibles sin suscripción adicional.

¿Puedo agregar un widget a varias páginas?

Sí. En el panel puedes agregar páginas adicionales y generar configuraciones apropiadas para ellas. Esto ayuda a separar conversaciones provenientes de diferentes dominios, tiendas o versiones de idiomas.