Cómo añadir un chat a WordPress

Un chat es una de las mejores herramientas para asistir a clientes ante una compra, dar un mejor servicio a tus usuarios o resolver dudas en tiempo real.

Aunque existen herramientas para hacerlo mediante WhatsApp, Slack, Discord o incluso Facebook, a veces buscamos algo mucho más sencillo, como crear un canal para que nuestros usuarios chateen entre ellos durante un evento online como un vídeo, una película, un partido…

En estos casos no hace falta usar ningún servicio externo ni ningún sistema de tickets, ya que funciona de una forma desatendida

En las siguientes lineas vamos a ver cómo añadir un chat a tu WordPress, gratis.

Plugin para chat en WordPress

Uno de los plugins más sencillos para instalar un chat de comunidad en WordPress es Simple Ajax Chat. Se trata de un plugin creado por Jeff Star, un desarrollador de amplia trayectoria que cuenta con algunos plugins muy conocidos en el repositorio.

Se trata de un plugin para chat sencillo pero muy efectivo, que no requiere de sistemas externos o configuraciones avanzadas.

En apenas unos minutos, tendrás disponible en cualquier espacio de tu página web un chat grupal totalmente funcional que podrás administrar cómodamente, con sus filtros de palabras prohibidas, exportación de historial y ajustes visuales.

Una vez instalado el plugin con el método convencional llega el proceso de configuración. Aunque es simple, tiene bastantes campos que pueden confundir un poco al principio.

Simple Ajax Chat crea una nueva entrada en el menú de Ajustes con su mismo nombre. En su única página de configuración encontrarás los siguientes apartados:

1. Ajustes del plugin

Son los ajustes de comportamiento y apariencia de Simple Ajax Chat. A su vez se dividen en:

1.1. Opciones generales

Son los ajustes más importantes de todos los que verás a continuación.

Te permiten definir:

• Nombre y mensaje de bienvenida al chat.
• Especificar si los usuarios deben o no estar registrados en tu sitio para poder usar el chat.
• El modo de visualización.
• El nombre con el que firmarán sus mensajes.
• El sonido que se producirá con cada mensaje nuevo publicado.
• El orden de los mensajes (cronológico o cronológico inverso).
• Ajustes de privacidad (registro de IPs).
• Limitaciones en cuanto al número máximo de mensajes y caracteres de mensajes o nombres de usuario.

El ajuste del sonido personalizado que sonará cuando se recibe un mensaje nuevo requiere de ciertas configuraciones extra.

Para modificarlo deberás abrir el directorio /resources/audio/ del plugin via ftp y reemplazar los archivos msg.mp3 y msg.ogg con los archivos de audio que desees.

Encontrarás muchos archivos de sonido alternativos incluidos en ese mismo directorio. Simplemente cambia el nombre de cualquier pareja de archivos para reemplazar los valores predeterminados.

1.2. Tiempos y colores

Define los tiempos de actualización de refresco de mensajes en el chat y los colores fondo de los mensajes más recientes.

1.3. Apariencia

Permite activar estilos CSS personalizados para el chat. Si lo desactivas, veras el chat sin estilos, de forma muy similar a un formulario.

Al activarlo, hace uso del código CSS que hayas añadido a la caja Estilos de CSS personalizados.

Por defecto esa caja ya trae cierto código estándar que puedes modificar a tu gusto. Te recomiendo hacer una copia del código inicial por si necesitaras volver al punto de partida. Especialmente si el CSS no es lo tuyo, ya sabes 😉

Por si acaso este aviso llega tarde, aquí te dejo los de la versión 20201124:

div#simple-ajax-chat {width:100%; overflow:hidden; margin:0 0 20px 0;}
div#sac-content {display:none;}
div#sac-output {float:left; width:58%; height:350px; overflow:auto; border:1px solid #d1d1d1;}
div#sac-output.sac-reg-req {float:none; width:100%; height:auto; border:0;}
div#sac-latest-message {padding:5px 10px; font-size:14px; background-color:#d1d1d1; text-shadow:1px 1px 1px rgba(255,255,255,0.5);}
ul#sac-messages {margin:10px 0; padding:0; font-size:14px; line-height:20px;}
ul#sac-messages li {margin:0; padding:4px 10px;}
ul#sac-messages li span {font-weight:bold;}
div#sac-panel {float:right; width:38%;}
form#sac-form fieldset {margin:0 0 5px 0; padding:0; border:0;}
form#sac-form fieldset label,form#sac-form fieldset input,form#sac-form fieldset textarea {float:left; clear:both; width:94%; margin:0 0 2px 0; font-size:14px;}
form#sac-form fieldset textarea {height:133px;}
.tooltip {border:0; text-shadow:none;}

1.4. Carga dirigida

Este ajuste es particularmente importante si te preocupa la WPO de tu sitio.

De forma predeterminada, el JavaScript de Simple Ajax Chat se incluye en todas y cada una de las páginas de tu sitio web. Pero esto solo es necesario si incluyes el chat en un área de widgets que se cargue en todos sitios. Si no, es suficiente con cargarlo solo en aquellas páginas que lo requieran. Aquí puedes definir las urls de esas páginas.

1.5. Contenido personalizado

Se trata de cadenas de texto opcionales que puedes añadir antes y después del chat o del formulario del chat.

Te permite añadir información que dé contexto al chat o recordar alguna norma de comportamiento, por ejemplo.

2. Palabras no permitidas

Lista de palabras prohibidas que se censurarán en el chat. Este ajuste se aplica tanto a los nombres como a los enlaces y mensajes de chat.

3. Administrar mensajes de chat

Lista con todos los mensajes publicados en la caja chat. Puedes borrar o editar cualquiera de ellos y/o borrar todos ellos con un clic.

Digamos que permite una gestión «quirúrgica» del historial de mensajes.

4. Exportar mensajes de chat

Permite crear un archivo de tipo CSV que contendrá todos los mensajes y datos del chat (incluida la IP del usuario). Puedes importarlo después a tu aplicación de hojas de cálculo para consultar cualquier dato recogido.

5. Restaurar los valores por defecto

Reinicializa los ajustes del plugin a la configuración por defecto. Viene bien si te has vuelto loco cambiando cosas y no sabes por qué esta fallando algo.

6. Shortcode y etiqueta de la plantilla

En esta sección se indica el shortcode que puedes utilizar para añadir el chat a un widget, entrada, página… Cualquier espacio donde puedas añadir contenido en WordPress.

Si prefieres añadir el chat en las plantillas de tu tema, aquí encontraras el código php para hacerlo. Este código también es muy útil si quieres añadir la función que pinta el chat en algún hook, por ejemplo.

Entonces, ¿mola?

Conclusión

Un chat es una estupenda forma de mantener activa a tu comunidad de usuarios. Habitualmente usamos herramientas de terceros para gestionarlo, pero lo cierto es que Simple Ajax Chat demuestra que no es así si lo que necesitas no es una herramienta de ticketing.

La configuración es muy completa y simple. Todos los ajustes son muy autoexplicativos y puedes afinar cada aspecto a tu necesidad concreta.

En algunos temas puede que Simple Ajax Chat requiera matizar un poco sus estilos para que se muestre exactamente como quieres. Precisamente para eso está sección de Apariencia en los ajustes del plugin.

En algunos temas para WordPress me he encontrado con problemas en la visualización que desaparecen una vez que desactivamos los estilos personalizados. Esto quiere decir que tan solo debes ajustar el CSS personalizado que se ofrece por defecto con el plugin.

Así que sí, si estás buscando un chat para tu WordPress donde comentar con tus amigos las partidas de Among Us, la ceremonia de los Oscar en directo o el último derbi del siglo de tu equipo de futbol favorito, Simple Ajax Chat va a satisfacer perfectamente tus necesidades.