Conecta el chat de tu sitio web

Crea la burbuja de chat, pega el código en tu sitio (con WordPress paso a paso) y atiende a tus visitantes desde la bandeja.

7 min Básico 2 de 13 en Canales 29/09/2026
Al terminar vas a tener

Una burbuja de chat en tu sitio web, conectada a tu bandejaBandeja de entradaCada canal conectado en Tulogica. Tiene su propia lista de conversaciones y sus propios agentes..

Ten a mano

Poder editar tu sitio web (WordPress, Shopify u otro).

El chat web es la burbuja de chat que aparece en la esquina de tu sitio. Tus visitantes escriben ahí y la conversación llega a tu bandeja, igual que un WhatsApp. No depende de MetaMetaLa empresa dueña de WhatsApp, Facebook e Instagram. Aprueba los permisos y cobra las conversaciones de la API oficial. ni de ninguna aprobación: lo tienes funcionando en minutos.

Cómo leer las capturas: los recuadros cian señalan dónde hacer clic o escribir y los verdes lo que aparece solo o el resultado. Lo borroso son datos privados de una cuenta de prueba.

Antes de empezar

  • Ser administrador en Tulogica.
  • Poder editar tu sitio web, o tener a mano a quien lo administra: hay que pegar un pequeño código.

Parte 1: Crea el chat en Tulogica

Paso 1: Añade una bandeja de entrada

Ve a AjustesEntradas y haz clic en Añadir bandeja de entrada, arriba a la derecha.

Sección Entradas con el menú Entradas y el botón Añadir bandeja de entrada señalados
Aquí verás también las bandejas que ya tienes conectadas.

Paso 2: Elige Sitio Web

En la cuadrícula de canales elige Sitio Web (Create a live-chat widgetWidgetUn pequeño componente que se inserta en una página web. En el chat web, es la burbuja de la esquina.). Es la primera tarjeta.

Cuadrícula de canales con la tarjeta Sitio Web señalada
Sitio Web está arriba a la izquierda.

Paso 3: Completa los datos del chat

Lo que escribas aquí es lo que ve el visitante al abrir la burbuja:

  1. Nombre del sitio web: el nombre de tu negocio. Es también el nombre de la bandeja.
  2. Dominio del sitio web: la dirección de tu sitio, por ejemplo https://tuempresa.com.
  3. Color del widget: el de tu marca. Es el color de la burbuja y de los mensajes.
  4. Cabecera de bienvenida: el título grande, por ejemplo ¡Hola! Somos Tu Empresa.
  5. Bienvenido Tagline: una línea debajo del título que diga qué pueden preguntar y cuánto tardas en responder.
  6. Habilitar bienvenida al canal: en Activado, el chat saluda solo con el mensaje que escribas debajo cada vez que alguien empieza una conversación.

Pulsa Crear bandeja de entrada.

Formulario Canal del sitio web con los seis campos numerados y el botón Crear bandeja de entrada señalado
Todo esto se puede cambiar después, en los ajustes de la bandeja.

Paso 4: Agrega los agentes

Elige en AgentesAgenteUna persona de tu equipo que atiende conversaciones en Tulogica. Solo ve las bandejas en las que está añadida. quién atiende este chat y pulsa Añadir agentes. Si eres administrador y quieres ver las conversaciones, añádete también.

Paso Añadir agentes con el selector y el botón Añadir agentes señalados
Solo los agentes de esta lista verán los mensajes del chat web.

Paso 5: Copia el código

Aparece ¡Tu bandeja de entrada está lista! con un bloque de código que empieza con <script>. Pulsa Copiar: ese código es lo que hace aparecer la burbuja en tu sitio.

Pantalla final con el código del widget en verde y el botón Copiar en cian
Si lo necesitas después, está en los ajustes de la bandeja, pestaña Configuración.

Parte 2: Pega el código en tu sitio

El código tiene que cargarse en todas las páginas, al final, justo antes de </body>. Cómo se hace depende de con qué está hecho tu sitio.

Paso 6: En WordPress, abre el editor de archivos del tema

En el escritorio de WordPress ve a AparienciaEditor de archivos de temas. Si WordPress muestra un aviso sobre editar archivos, acéptalo.

Escritorio de WordPress con Apariencia y Editor de archivos de temas señalados
Si no ves esta opción, tu hosting la desactivó: usa el método con plugin de más abajo.

Paso 7: Pega el código al final de functions.php

A la derecha, en Archivos del tema, elige Funciones del tema (functions.php). Baja hasta el final del archivo y pega esto, reemplazando la parte del <script> por el código que copiaste en el paso 5:

add_action( 'wp_footer', function () { ?>
<script>
  ... pega aquí el código que copiaste de Tulogica ...
</script>
<?php } );

Pulsa Actualizar archivo.

Editor de archivos de temas con functions.php elegido, el código pegado al final en verde y el botón Actualizar archivo señalado
La primera y la última línea son las que le dicen a WordPress que cargue el chat en el pie de todas las páginas.

Hazlo en el tema hijoTema hijoUna capa de un tema de WordPress donde se hacen cambios sin perderlos cuando se actualiza el tema principal. y guarda una copia. Edita el tema que dice (activo), idealmente un tema hijo. Antes de pegar, copia todo el contenido del archivo en un bloc de notas: si algo sale mal, lo vuelves a pegar tal cual. Y ten en cuenta que si actualizas o reinstalas ese tema, el código se borra y hay que pegarlo otra vez.

Alternativa sin tocar archivos: instala el plugin WPCode, crea un fragmento de tipo HTML, pega solo el código de Tulogica (desde <script> hasta </script>) y elige que se inserte en el pie de página de todo el sitio. Así no se pierde al actualizar el tema.

Otras plataformas

  • Shopify: Tienda online → Temas → Editar código → theme.liquid, y pégalo antes de </body>.
  • Wix, Tiendanube u otros: busca la opción de “código personalizado” o “scripts en el pie de página” y pégalo ahí, para todas las páginas.

Parte 3: Compruébalo

Paso 8: Busca la burbuja en tu sitio

Abre tu sitio en una ventana de incógnitoVentana de incógnitoUna ventana del navegador sin caché ni sesiones guardadas: muestra tu sitio como lo ve un visitante nuevo.. Debe aparecer la burbuja del chat en una esquina, con el color que elegiste.

Sitio web con la burbuja del chat señalada abajo a la izquierda
Si ya tienes un botón de WhatsApp en la esquina derecha, la burbuja puede ir a la izquierda.

Paso 9: Abre el chat y escribe

Toca la burbuja. Verás la cabecera y el saludo que configuraste, si estás en línea y cuánto sueles tardar. Pulsa Iniciar conversación.

Chat abierto con el saludo y el botón Iniciar conversación señalado
La foto es la del agente disponible: cada agente la cambia en su perfil.

Escribe un mensaje de prueba. Si nadie contesta enseguida, el chat pide un correo para avisarle al cliente cuando le respondan, así la conversación no se pierde aunque cierre la página.

Conversación en el chat web: el mensaje de prueba y la petición de correo electrónico
Pedir el correo es automático; puedes pedir más datos con el pre-formulario de chat.

Paso 10: Responde desde Tulogica

En Conversaciones aparece la bandeja con el nombre de tu sitio y, dentro, el mensaje. Mientras el visitante no deje su nombre, Tulogica le pone uno al azar (como green-sunset-672). Responde desde la caja de texto y la respuesta le aparece en el chat de tu sitio.

Bandeja de Tulogica con la bandeja del sitio web señalada y el mensaje de prueba en verde
Mientras el visitante escribe, lo ves en vivo con el aviso «escribiendo».

Ajustes que conviene revisar

En AjustesEntradas, pulsa el engranaje de la bandeja del sitio web. A la derecha tienes una vista previa del chat que se actualiza mientras cambias cosas.

Ajustes de la bandeja del sitio web con las pestañas señaladas y la vista previa del chat en verde
La pestaña Configuración vuelve a mostrar el código, por si lo necesitas otra vez.
  • Ajustes: avatar, nombre, dominio y cómo firma las respuestas (Amigable con el nombre del agente o Profesional solo con el nombre del negocio).
  • Horarios: fuera de ese horario el chat avisa que responderán más tarde, así nadie queda esperando.
  • Pre-formulario de chat: pide nombre y correo o teléfono antes de empezar, para poder volver a contactar al cliente.
  • Encuestas de SatisfacciónCSAT (encuesta de satisfacción)Una encuesta corta que recibe el cliente al resolver su conversación, para calificar la atención.: al resolver la conversación, el cliente califica la atención.
  • Configuración del bot: conecta CapitánCapitánLa IA integrada de Tulogica: responde con lo que le enseñas y pasa la conversación a una persona cuando hace falta. o un Agente IAAgentes IAAsistentes de inteligencia artificial que atienden solos una conversación siguiendo una plantilla de instrucciones. para que responda también en el chat web.

Si algo no funciona

¿Tu problema no está en esta lista? Búscalo en el Centro de soluciones, que reúne los de todos los manuales.

  • No aparece la burbuja del chat web — revisa que pegaste el código completo y que tu sitio no guarda una copia vieja: vacía la cachéCachéUna copia guardada de tu sitio para que cargue más rápido. Si un cambio no aparece, hay que vaciarla. del plugin de caché o del hosting y vuelve a probar en incógnito.
  • Aparecen dos burbujas de chat — el código está pegado dos veces (por ejemplo en functions.php y en un plugin). Déjalo en un solo lugar.
  • El chat web desapareció después de actualizar el tema — el código estaba en functions.php y la actualización lo reemplazó. Pégalo otra vez o pásalo al plugin WPCode para que no vuelva a pasar.
  • WordPress no deja guardar functions.php — WordPress detectó un error y no guardó el cambio. Revisa que pegaste también la primera línea (add_action) y la última (<?php } );).
  • Los mensajes del chat web llegan pero no puedo responder al cliente después — si el visitante cierra la página sin dejar datos, no hay forma de escribirle. Activa el pre-formulario de chat.

Ver todos los manuales