Cómo crear salas de chat en WordPress para tus usuarios (2 métodos)

Construir una comunidad en línea próspera puede transformar tu sitio web, pero la mayoría de las soluciones de chat crean más problemas de los que resuelven. Muchos propietarios de sitios aprenden esto de la manera difícil cuando comienzan a experimentar con salas de chat: cada opción parece requerir pagos mensuales costosos o te obliga a enviar visitantes a plataformas externas.

Es exactamente por eso que hemos probado todas las opciones más populares y hemos encontrado soluciones de salas de chat que realmente funcionan para los propietarios de sitios web de WordPress.

Aquí te explicamos cómo agregar una sala de chat atractiva y autoalojada a tu sitio web de WordPress sin suscripciones mensuales costosas, depender de servicios de terceros o enviar a tus usuarios a clientes de chat externos como Slack o Discord.

¿Por qué agregar una sala de chat en WordPress?

Si tienes un sitio web de membresía o un foro en línea, entonces es posible que desees crear una sala de chat de mensajería instantánea para tus usuarios.

Algunos propietarios de sitios web optan por usar un servicio de terceros como Slack, WhatsApp, grupos de Facebook o Discord. Sin embargo, estos métodos alejan a las personas de tu sitio, por lo que son malas noticias para tus visitas a la página y tasa de rebote. Además, no tienes control total sobre la experiencia del chat.

Al integrar una sala de chat en tu sitio web, puedes mantener a la gente conectada por más tiempo y construir un sentido de comunidad más fuerte. Aún mejor, al crear una sala de chat autoalojada, a menudo puedes evitar costosas tarifas de suscripción continuas.

Dicho esto, veamos cómo agregar una sala de chat a tu blog o sitio web de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Método 1. Usando Simple Ajax Chat (Plugin gratuito para WordPress)
• Método 2. Usando BuddyBoss (Lo mejor para construir comunidades en línea)
• Guías adicionales

Método 1. Usando Simple Ajax Chat (Plugin gratuito para WordPress)

¿Quieres agregar una sala de chat simple a tu sitio sin tener que presupuestar un plugin premium de WordPress o una suscripción continua? Simple Ajax Chat te permite agregar una sala de chat simple y autoalojada a cualquier página, publicación o área lista para widgets sin tener que pagar un centavo.

También te permite restringir el acceso a usuarios registrados o incluso crear una sala de chat completamente abierta al público. Para más detalles, consulta nuestra reseña de Simple Ajax Chat.

Paso 1. Configura Simple Ajax Chat

Primero, necesitarás instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Al activar, ve a Configuración » Simple Ajax Chat para configurar tu sala de chat.

Para empezar, haz clic para expandir la sección ‘Configuración del plugin’ y luego cambia el ‘Nombre predeterminado’ a lo que desees.

También puedes escribir un ‘Mensaje predeterminado’, que aparecerá la primera vez que alguien visite tu sala de chat.

A continuación, puedes decidir si los usuarios necesitan iniciar sesión para usar la sala de chat. Requerir el registro de usuarios puede ayudarte a combatir el spam y los trolls, pero una sala de chat pública puede atraer a más usuarios.

Para tomar esta decisión, marca o desmarca la casilla junto a ‘Requerir que los usuarios inicien sesión para ver y usar el cuadro de chat.’

También es posible que desees marcar la casilla junto a ‘Nombre de usuario con sesión iniciada’ para que WordPress muestre el nombre de usuario de la persona en el chat.

Otra opción es permitir que los visitantes no registrados lean el chat pero no interactúen.

A las personas que les guste lo que vean, les puede interesar crear una cuenta para unirse a la conversación, así que quizás quieras marcar la casilla junto a ‘Mostrar mensajes de chat como solo lectura’.

Paso 2. Personaliza tu sala de chat

Hecho esto, puedes personalizar la sala de chat. Por ejemplo, podrías agregar tu propio logotipo, colores personalizados y marca. Este es un gran beneficio de elegir una solución autoalojada como Simple Ajax Chat, en comparación con una plataforma separada como Discord.

Para hacer estos cambios, simplemente usa la configuración en los cuadros ‘Horas y colores’ y ‘Apariencia’.

También puedes reemplazar el ícono de notificación predeterminado con tu propia imagen. Por ejemplo, podrías usar tu logotipo, ícono o cualquier otra imagen que hayas creado usando software de diseño web como Canva.

Para agregar tu propio gráfico, busca el campo ‘Ícono de notificación predeterminado’ y haz clic en ‘Subir’.

Ahora puedes elegir una imagen de la biblioteca de medios de WordPress o subir un archivo desde tu computadora.

Si realizas algún cambio en esta sección, ¡no olvides hacer clic en ‘Guardar configuración’!

Paso 3. Agrega funciones de moderación

Después de eso, puedes hacer clic para expandir la sección ‘Frases prohibidas’ y luego escribir cualquier palabra que nunca deba aparecer en tu chat. Podría ser el nombre de un competidor, palabras ofensivas o cualquier otra cosa que pueda dañar la experiencia del visitante y tu reputación.

Dado que es una solución autoalojada, tienes control total sobre las palabras que quieres ver y las palabras que no tienen cabida en tu comunidad.

Simplemente separa cada palabra con una coma.

De nuevo, ¡no olvides hacer clic en ‘Guardar configuración’ para almacenar tus cambios!

Hay muchas más configuraciones para explorar, así que vale la pena revisarlas y ver qué cambios puedes hacer. Sin embargo, esto es todo lo que necesitas para crear una sala de chat simple, así que veamos cómo puedes agregarla a tu sitio web de WordPress.

Paso 4. Muestra tu sala de chat en WordPress

Simple Ajax Chat te permite controlar exactamente dónde muestras tus salas de chat para que puedas agregarlas a cualquier página, publicación o área lista para widgets.

Cuando estés satisfecho con la configuración de la sala de chat, desplázate hacia abajo hasta el área de Shortcode & Template Tag y haz clic para abrirla. Aquí verás el shortcode que puedes usar.

Para agregar la sala de chat a una página, simplemente ve a Páginas » Agregar nueva en el panel de WordPress.

Ahora puedes escribir un título, subir una imagen destacada, agregar categorías y etiquetas, además de cualquier otro contenido que desees mostrar en la página.

Incluso podrías ir un paso más allá y agregar una encuesta de retroalimentación de experiencia de usuario utilizando un plugin como UserFeedback.

Esto te ayuda a obtener valiosas sugerencias e ideas sobre cómo mejorar tu sala de chat.

Esta flexibilidad es otra razón por la que siempre recomendamos usar un plugin como Simple Ajax Chat, en comparación con software rígido de terceros.

Para incrustar tu sala de chat, haz clic en el signo ‘+’ y luego escribe ‘Shortcode’. Ahora puedes seleccionar el bloque correcto cuando aparezca.

Después de eso, solo agrega el shortcode [sac_happens] al bloque Shortcode.

Ahora puedes hacer clic en ‘Publicar’ o ‘Actualizar’ para que la sala de chat esté activa.

Otra opción es agregar la sala de chat a un área lista para widgets. Esta es una forma fácil de mostrar la ventana de chat en varias páginas.

Si estás usando uno de los temas más nuevos basados en bloques, entonces incluso puedes agregar la sala de chat a áreas de tu sitio que no puedes editar usando el editor de contenido estándar de WordPress.

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo agregar y usar widgets.

No importa cómo agregues la sala de chat a WordPress, es importante verificar que se vea bien y funcione correctamente en todos los dispositivos probando la versión móvil de tu sitio web.

Para más información sobre este tema, consulta nuestros consejos de expertos sobre cómo crear un sitio web compatible con dispositivos móviles.

Método 2. Usando BuddyBoss (Lo mejor para construir comunidades en línea)

¿Quieres crear una comunidad en línea próspera que haga que la gente regrese por más? Las salas de chat son un buen comienzo, pero son solo una parte de la construcción de una comunidad digital exitosa.

Ahí es donde entran potentes funciones como perfiles de miembros, directorios con búsqueda, foros, grupos sociales y fuentes de actividad.

¿La buena noticia? No tienes que juntar un montón de plugins diferentes para ofrecer este tipo de experiencia. BuddyBoss tiene todas estas funciones, y más. 

BuddyBoss es la mejor plataforma de creación de comunidades de WordPress del mercado. De hecho, incluso tenemos una reseña completa de BuddyBoss que describe todas las razones por las que es nuestro plugin de comunidad favorito. 

En esta guía, te mostraremos cómo agregar mensajería en vivo a tu sitio usando BuddyBoss.

 Para obtener más información sobre cómo usar sus otras funciones sociales, consulta nuestra guía sobre cómo crear tu propia comunidad privada con WordPress.

Paso 1. Crea una cuenta de Pusher

BuddyBoss puede agregar mensajería en vivo a tu sitio usando Pusher Channels, que es un servicio que permite a los usuarios comunicarse en tiempo real. 

Antes de comenzar con BuddyBoss, necesitarás crear una cuenta de Pusher. Afortunadamente, Pusher tiene un plan gratuito que te permite enviar hasta 200 mil mensajes por día, lo cual debería ser suficiente para la mayoría de los blogs y sitios web de WordPress. Sin embargo, si necesitas actualizar, puedes enviar hasta 1 millón de mensajes por día por $49 al mes.

Para empezar, dirígete al sitio web de Pusher y haz clic en el botón 'Sign up'.

Luego puedes seguir las instrucciones en pantalla para crear tu cuenta gratuita. 

Una vez hecho esto, serás redirigido automáticamente al panel de Pusher. En esta pantalla, haz clic en el botón 'Get started' debajo de 'Channels'.

Ahora puedes escribir un nombre para tu aplicación de Pusher. Esto representará la aplicación en tu panel de Pusher, por lo que es una buena idea usar algo descriptivo.

También puedes seleccionar un Cluster, que es la ubicación física de los servidores que manejarán las solicitudes de tu aplicación de Pusher. Al elegir una ubicación, ten en cuenta que las regulaciones europeas de protección de datos especifican que los datos personales de los usuarios no pueden salir de las fronteras de la UE. 

También tiene sentido elegir una ubicación que esté geográficamente cerca de tus usuarios o de tus propios servidores. Esto reducirá el retraso que puede ocurrir al enviar y recibir mensajes. 

Para elegir una ubicación, abre el menú desplegable ‘Seleccionar un clúster’ y elige una opción de la lista. 

Hecho esto, haz clic en ‘Crear aplicación’.

Para terminar de configurar la aplicación, selecciona ‘Configuración de la aplicación’ en el menú de la izquierda. Luego, desplázate hasta la sección ‘Habilitar eventos del cliente’ y haz clic para activar su interruptor.

A continuación, desplázate hasta la sección ‘Habilitar conexiones autorizadas’.

Una vez más, haz clic para activar este interruptor.

Tu aplicación ya está en funcionamiento, así que haz clic en ‘Claves de la aplicación’ en el menú de la izquierda. Esto contiene toda la información que necesitarás agregar a tu plugin de BuddyBoss.

Teniendo esto en cuenta, deja esta pantalla abierta en una pestaña separada durante los siguientes pasos.

Paso 2. Instalar los Plugins y el Tema de BuddyBoss

Para configurar la mensajería en vivo, necesitarás el plugin principal de BuddyBoss, BuddyBoss Platform Pro y el tema de BuddyBoss. Dicho esto, dirígete al sitio web de BuddyBoss y regístrate para el paquete Web o un Bundle.

Después de completar tu compra, deberás instalar los plugins de BuddyBoss y BuddyBoss Platform Pro en tu sitio. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Cuando se te solicite, ingresa tu clave de licencia del producto. Puedes encontrar esta información en tu cuenta en el sitio web de BuddyBoss.

A continuación, deberás instalar el tema de BuddyBoss que viene incluido en todos los paquetes Web y Bundle. 

Para obtener instrucciones detalladas paso a paso, consulta nuestra guía sobre cómo instalar un tema de WordPress. 

Paso 3. Habilitar Mensajería Privada 

BuddyBoss tiene una gran cantidad de funciones, por lo que para facilitar las cosas, el plugin separa estas funciones en diferentes Componentes. Puedes habilitar o deshabilitar estos Componentes, dependiendo de las funciones que necesites.

Para hacer esto, dirígete a la página BuddyBoss » Componentes. 

Aquí verás todos los diferentes Componentes que puedes usar.

Como queremos agregar mensajería en vivo a WordPress, busca el componente de Mensajería Privada y haz clic en su enlace 'Activar'.

Paso 4. Integrar con Pusher Channel

Ahora, estás listo para vincular tu sitio web de WordPress y tu cuenta de Pusher yendo a BuddyBoss » Integraciones. Aquí, haz clic en el enlace ‘Pusher’. 

Ahora verás un área donde puedes agregar tu ID y claves de Pusher. 

Simplemente copia cada dato de tu pestaña de Pusher y pégalo en el campo correspondiente en tu panel de WordPress.

Es posible que también necesites cambiar el campo ‘Pusher Cluster’ para que coincida con el clúster seleccionado en tu cuenta de Pusher. 

Una vez hecho esto, haz clic en ‘Guardar Configuración’ en tu panel de WordPress. Si todo funciona bien, verás un mensaje verde de ‘Conectado’ en la parte superior de la pantalla.

También verás un nuevo campo ‘Mensajería en Vivo’.

Continúa y marca la casilla junto a esta opción.

Finalmente, haz clic en ‘Guardar Configuración’ para guardar tus cambios. 

Paso 5. Prueba tu chat en vivo 

Es una buena idea probar la nueva función de chat solo para confirmar que todo funciona bien. Para hacer esto, necesitas iniciar sesión en dos cuentas de miembro diferentes usando el modo incógnito en tu navegador.

Luego, dirígete a la página ‘Miembros’ que BuddyBoss crea automáticamente. Si no estás seguro de dónde encontrar esta página, BuddyBoss típicamente la crea en tu-sitio-web-url/members.

En esta página, busca la otra cuenta de miembro que estás usando en tu prueba y haz clic en el botón ‘Enviar Mensaje’. 

Deberías ver un ícono verde que indica que esta persona está en línea.

Continúa y escribe un mensaje, luego haz clic en ‘Enviar’.

Ahora, si cambias a tu otra ventana del navegador, deberías recibir este mensaje inmediatamente sin tener que actualizar la pestaña.

Guías adicionales

Ahora que has aprendido a crear salas de chat en tu sitio web, es posible que desees aprender más consejos para mejorar tu comunidad en línea y la experiencia del usuario:

• Cómo ofrecer cursos en línea basados en cohortes — Aprendizaje grupal en WordPress
• Cómo crear tu propia comunidad privada con WordPress
• Cómo rastrear la participación del usuario en WordPress con Google Analytics
• ¿Qué es Google Lighthouse? ¿Cómo puede mejorar la experiencia de usuario (UX) de tu sitio?
• Cómo obtener comentarios sobre el diseño de tu sitio web en WordPress (paso a paso)
• Cómo hacer pruebas de regresión visual fácilmente en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo crear salas de chat para tus usuarios de WordPress. También puedes ver nuestras guías sobre cómo agregar botones de reacción para aumentar la participación y cómo hacer una auditoría UX de tu sitio web de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.