358 | Cómo poner un botón de chat de WhatsApp en WordPress
22 Feb 2023 · 19 min
Episodio 358 del podcast 'WordPress Semanal' por Gonzalo Navarro sobre cuándo conviene añadir un botón de chat de WhatsApp en una web con WordPress, qué criterios tener en cuenta, los dos plugins más usados (Click to Chat y Join Chat) y una alternativa manual sin plugins. El autor explica pros/contras, opciones de configuración (horarios, visibilidad por dispositivo/página, diseño, número de contacto, mensaje predeterminado) y comparte recursos y vídeos relacionados para implementación y pruebas de rendimiento.
Chapters
En el episodio 358 de WordPress semanal te hablo de cuándo merece la pena poner un botón de chat para WhatsApp en tu web con WordPress, de cuáles son los mejores plugins para lograrlo y de una opción para hacerlo incluso sin tener que utilizar plugins. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 358 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy, como digo, vamos a hablar de los mejores plugins de chat enfocados a WhatsApp que puedes utilizar en WordPress. Pero no solo eso, también te voy a decir cuándo, según mi opinión, según mi experiencia, es buena idea que lo pongas y cuándo no. Y si lo pones, qué debes tener en cuenta para que la experiencia de tu visitante, posible cliente sin, sea la mejor posible. Después vamos a ver los dos mejores plugins. Hay muchos plugins para esto. Yo he escogido los dos con más activaciones, los dos que están en más webs, pero no quiere decir que si tú utilizas otro o ves otro que te gusta o lo que sea, no lo puedas usar. Yo voy a analizar, ya digo, estos dos, que además los he utilizado los dos, los he probado muy recientemente para un proyecto real, hacía tiempo que no lo ponía en ninguna web y he aprovechado para investigar un poco en esta última vez que los he tenido que utilizar. Y como digo, al final también te diré o te explicaré, te pasaré documentación para cómo puedes crear estos enlaces para contactar por WhatsApp de forma manual y qué pros y qué contras tiene hacerlo así. Sí, fantástico, todo esto en un momentito. Pero antes, como siempre, vámonos con las novedades. ¿Qué está pasando en Gonzalo Navarro? ¿Es esta semana? Pues tenemos nuevo vídeo de la zona código. Es el vídeo 308 y en él aprendes a quitar la opción de descarga del reproductor de audio de WordPress. WordPress te permite con su bloque, con un bloque del editor, incrustar un reproductor. Y este reproductor realmente es un reproductor de HTML que lo que va a hacer es mostrarse tal y como los navegadores lo tengan preparado. Cuando accedes desde Chrome, no sé si pasa en algún otro navegador, este reproductor te da la opción de descargar el audio y esto muchas veces no lo queremos. Entonces Yo estuve investigando también, estaba haciendo la web de una clienta y estamos utilizando este reproductor y queríamos quitar esa opción, aunque siempre puede llegar a haber alguna forma de descarga. Pero. Pero en este sentido, que el visitante o que el usuario no esté viendo esa opción de descargar. Y hay que hacerlo con un poquito de HTML, hay que editar por HTML ese reproductor. Y te enseño cómo hacerlo en el vídeo más reciente de la zona código. Ya sabes que en la zona código vemos cosas que se pueden hacer sin plugins para evitar cargar tu web con demasiados plugins. Muchas veces queremos hacer una cosa muy pequeñita, instalamos un plugin enorme para ello. Pues aquí te explico paso a paso y sin que tengas que saber nada de código, cómo puedes hacer esas pequeñas modificaciones tanto de funcionamiento como de aspecto, de diseño visual. Fíjate que ya vamos por el vídeo 308 más los vídeos que recomiendo ver al principio, que no están numerados, así que habrá como unos 315 vídeos. Y además siempre hago caso a lo que me pidáis. Y todo esto está incluido si eres miembro en Gonzalo Navarro ES. No solo todos estos vídeos que saco uno nuevo a la semana, que sino también los cursos que saco uno nuevo al mes o una renovación de alguno que se quede antiguo. Y tenéis más de 70 cursos desde WordPress básico hasta WordPress avanzado, incluyendo cómo gestionar webs propias, cómo gestionar webs para clientes. Todo lo necesario para que puedas crear y gestionar webs con WordPress con resultados profesionales. Recuerda que para apuntarte solo tienes que ir a Gonzalo Navarro es y que son únicamente 10 euros al mes y sin permanencia. Sí, fantástico. Vámonos ahora con el plugin de la semana que se llama WPC Product Bundles for woocommerce. Este hoy va de cosas que he usado recientemente. Este plugin lo he usado también hace muy poquito también para la web de otro cliente, clienta en este caso, y es para crear productos agrupados en WooCommerce, pero con mucho más control. Por ejemplo, lo que nosotros necesitábamos era agrupar dos productos distintos y ponerle un precio al producto agrupado. No que se sumaran los precios de ambos productos, sino que yo le pusiese un precio y ya está. Y además queríamos algo sencillo, simplemente eso, agrupar los productos, poner el precio y utilizarlo como producto único porque estamos utilizando en esta web en concreto productos que no son típicos, productos que se venden en WooCommerce. Bueno, no quiero entrar en demasiado detalle, pero estamos vendiendo a través de WooCommerce cosas que realmente no están generadas con WooCommerce. Entonces necesitamos algo que nos permitiese unirlo de forma sencilla. Y esta es una de las mejores, vamos, la mejor solución que encontré. Es muy fácil de utilizar, tiene buen rendimiento y nada, le he grabado un vídeo de un minutito a la clienta y ella misma ya lo está utilizando o lo va a empezar a utilizar a partir de ahora en su negocio. Sí, de nuevo WPC product bundles for WooCommerce. De todas maneras, todo lo que comento lo tenéis directamente enlazado en las notas del episodio. Ya sabéis Gonzalo es 358 que es el número de este episodio. Si en algún momento estáis escuchando cualquier episodio siempre creo estos enlaces sencillitos para que podáis ir a todos los contenidos que voy recomendando. Fantástico. Vámonos ahora ya sí con el tema central del episodio. Mejores plugins de chat por WhatsApp para WordPress. Pero antes de hablar de estos plugins, vamos a ver cuándo es buena idea poner un botón flotante. Habitualmente se pone un botón flotante de WhatsApp. Esto típico que llegas a una web y estás navegando y te aparece normalmente en la esquina inferior derecha o izquierda el iconito de WhatsApp y si estás en móvil pues le das y te abre una conversación en móvil. Hay veces que se te abre como una especie de chat ahí, otras veces si estás en escritorio te lleva a web WhatsApp. Esto es, digamos, tener una comunicación o permitir a tu visitante o usuario que tenga una comunicación contigo directamente en tu teléfono de WhatsApp. Bien, ¿Por qué no lo tiene todo el mundo? ¿Es esto buena idea? Bueno, pues depende. Yo creo que lo más básico es pensar Si tú usas WhatsApp en tu negocio. Si no lo estás usando y es algo que vas a añadir, no lo tienes muy claro, piensas que como lo ves por ahí tú también lo tienes que poner, pues bueno, cuidado porque a lo mejor, primero, lo ideal es que tengas un teléfono separado de empresa o de lo que sea para que no se junte con tu número personal, salvo que lo que tú hagas sea muy personal y lo quieras hacer así. Segundo, vas a estar pendiente realmente de ese teléfono, ¿Sirve de algo? ¿Puedes cerrar un acuerdo, puedes cerrar lo que sea a través de WhatsApp, ¿Sirve de primer punto de contacto o realmente va a ser más lío que otra cosa, pérdida de tiempo para ti, pérdida de tiempo para el posible cliente? Esto tienes que plantearlo bien, si de verdad WhatsApp es una vía de comunicación eficiente para lo que quieras conseguir en definitiva, si va a suponer una frustración para tu cliente o tu posible cliente, pues yo no lo pondría. Luego debes tener en cuenta tu disponibilidad, WhatsApp se percibe como algo ágil y rápido, el que usa WhatsApp quiere que le contesten, no sé, en el momento o en unas horas, pero no que mande un mensaje el viernes y le contesten el lunes, entonces si esto va a ser así, pues mejor no lo pongas o también puedes hacer algunos de los plugins de los que te voy a hablar tienen en sus características premium la posibilidad de solo mostrar este botón de contacto por WhatsApp en las horas en las que estés disponible o en los días en los que estés disponible, porque tú si tienes ya un perfil de WhatsApp de estos de empresa, tú puedes poner el típico mensaje ahora mismo no estamos y volveremos el día que sea, pero si la persona ve el mensaje un domingo, piensa que te puede contactar, te manda un mensaje y le llega eso de vuelta, pues bueno, no es la mejor experiencia. Bien, esto yo creo que ya queda claro, básicamente si lo vas a usar y va a funcionar y tiene sentido, ponlo, si no, ahórratelo. Vamos a ver ahora los criterios, lo que te puedes plantear o qué puedes pensar a la hora de elegir uno de estos plugins de chat para WordPress. Tienes que pensar muy bien qué necesitas. Por ejemplo, vas a necesitar control sobre el diseño del botón flotante que va a aparecer, vas a poder, vas a querer, no lo sé, elegir el color, elegir el icono, elegir el tamaño, elegir si quieres que aparezca a la izquierda, a la derecha, a mitad de pantalla, quieres tener la posibilidad de poner el botón a mano donde tú quieras, por ejemplo. También necesitas un teléfono de contacto o más teléfonos de contacto con distintas personas o agentes que puedan ir recibiendo esos mensajes de los posibles clientes o los posibles contactos. Como te comentaba antes vas a necesitar control sobre los horarios en los que chat va a estar disponible. Vas a necesitar control si se va a mostrar en móvil, en ordenador, en las dos, qué va a pasar cuando se vea desde un ordenador, se va a abrir WhatsApp o habrá algún otro tipo de funcionamiento. Todo eso tienes que tenerlo en cuenta. También vas a necesitar controlar la visibilidad según las páginas en las que esté el visitante. ¿Quieres que se vean en unas, no quieres que se vean en otras? ¿Tu idea es que se muestre una especie de chat con el primer mensaje un poco animando a la persona a escribir o quieres simplemente que salga el botoncito que la persona le dé y ya se abra directamente el chat? Bueno, todas estas son preguntas que te puedes hacer que yo me hice en su momento y que también repasando las características de los plugins más populares que hay, pues puedes ver que algunos las cumplen y que otros no las cumplen. Recuerda que yo uso un método para probar plugins sin sobrecargar la web, es decir, sin instalarlos todos en una web mía, sino generando webs que después se eliminan solas. Para poder probar los plugins te voy a dejar el enlace, es un tutorial en abierto, pero tienes, si eres suscriptor, tienes la parte extra de un vídeo premium donde te enseño a hacerlo, pues eso, en vídeo. Te voy a dejar el enlace justo en este puntito en el que hablo de los criterios para elegir un plugin de chat por WhatsApp y también abajo en la parte de contenidos relacionados, recuerda Gonzalo Navarro es 358 y ahí tienes todos los enlaces. Bien, una vez definidos los criterios que tú ya dices pues si necesito esto, no necesito lo otro, ya puedes ir buscando el plugin y yo te lo voy a dejar resumido en los dos grandes plugins que hay. Ya digo que hay muchos más, hay otros que también tienen características parecidas. Yo me voy a centrar en estos dos que además son los que yo he probado en profundidad hace muy poquito. El número uno, click to chat para WhatsApp. La versión gratuita de este plugin es funcional, no es hiper funcional, pero cumple lo que promete, permitirte poner un chat, el típico botón flotante para que la persona te contacte. Este plugin está activo en más de 100.000 webs con WordPress y te permite mostrar un botón o burbuja flotante. Aquí este plugin hace distinción entre permitirte mostrar lo que es un típico botón donde tú puedes poner un texto encima de ese botón o la típica burbujita flotante. El icono de WhatsApp te permite asociar a ese botón o a esa burbuja flotante un único número de teléfono y un único contacto. Después te permite ponerlo en la izquierda o en la derecha y dentro de izquierda o derecha te permite elegir si quieres abajo o en mitad de pantalla. En cuanto al diseño que le puedes dar es muy básico, puedes elegir el color y el tamaño de fuente tanto del texto o del color del botón, pero nada más. Lo demás, todas las opciones de más te aparecen lo típico como en grisáceo para que te pases al plan premium si quieres utilizarlas. Tampoco te deja en su versión gratuita elegir un icono personalizado de WhatsApp, tienes que utilizar el que te. El que te ponen ellos, que bueno, es el típico a nivel de cuando la persona le da al chat. Hay una opción que es que tú dejes un mensaje predeterminado y en ese mensaje por ejemplo puedes poner automáticamente Hola, necesito información sobre. Y ahí poner una etiqueta que te recoge automáticamente la URL desde donde te ha contactado la persona. Esto es bastante útil, sobre todo a ti cuando a ti o a la persona que vaya a recibir el mensaje, porque ya sabes en qué página estaba esa persona cuando te ha contactado. También puedes poner también el que aparezca automáticamente el título de la web y alguna opción más. ¿Son las típicas etiquetas estas que se ponen entre braces, no? La verdad que no sé cómo están, corchetes, paréntesis y luego la otra que tiene como la cosita, no me sale el nombre, pero bueno, cuando se edita código y eso en inglés se suele decir braces, no sé cómo será en español. Después tienes las opciones de ocultar según dispositivo, lo típico quiero mostrarlo en ordenador y en móvil, solo en móvil, en los dos, lo que sea. Y a nivel de dónde de en qué página se puede mostrar también tienes un filtro que te permite elegirlo si lo quieres mostrar en la página de inicio nada más, si lo vas a mostrar en unas páginas de categoría y en otras no, pero sí que está limitado en este sentido a páginas y entradas, a los tipos de contenido, ahí no puedes filtrar salvo que tengas la versión premium. Y luego en su versión premium también te da la posibilidad de añadir un código de seguimiento para que puedas ver las conversiones en Google Analytics, pero no en su versión gratuita. Por cierto, se llama Click to Chat, pero dejo el enlace a la página del plugin gratuita. Bien, vamos con la segunda opción. Este plugin se llama Join Chat, es algo más completa que la anterior y está activa en más de 500.000 webs con WordPress, medio millón de webs. Es un plugin hiperpopular, tiene muy buen rendimiento. Por cierto, os voy a dejar un vídeo del curso de velocidad en WordPress en el que os explico cómo analizar de forma muy sencilla el rendimiento de los plugins que vayas a instalar en tu web antes de instalarlos. En la típica página del plugin de WordPress, ahí puedes ver de un vistazo el rendimiento del plugin. No he mencionado el de Click to Chat porque ellos me da la sensación que lo tienen bloqueado de alguna manera, lo cual no sé si es buena señal, pero en este caso Join Chat pues sí que se puede ver. Puedes hacer el análisis rapidito tal y como te explico en la clase 8 del curso de velocidad en WordPress, que por cierto renové desde cero hace muy poquito, así que os lo dejo enlazado también al curso de velocidad. Bueno, en este caso Joint Chat si te permite por ejemplo seleccionar el icono para el botón, puedes subir uno personalizado si quieres, también te limita a un número de teléfono y a un contacto. Tanto el anterior plugin como éste te permite más, pero en su versión de pago, en este caso puedes colocar el botón en la izquierda o en la derecha, pero solo abajo, no te da esa opción de ponerlas en el centro. Como característica extra que no trae el anterior plugin, puedes elegir el tiempo que va a pasar hasta que aparezca el botón, puedes retrasar un poquito, por ejemplo que pasen unos segundos. Te permite por supuesto también ocultarlo según el dispositivo se muestre, pues en móvil, ordenador los dos o no. Y una característica muy chula es que este en ordenador, te permite mostrar un código QR para que la persona con su móvil lo escanee y se le abra directamente la conversación en su móvil, en el chat de WhatsApp, en su móvil, aunque esté navegando desde el ordenador. Esto es algo chulo y yo particularmente elegí este plugin, además de porque trae más opciones que el anterior para un cliente que se lo acabo de poner hace muy poquito y esta opción la verdad es que es muy interesante. Eso sí, vais a tener que traducir el texto que aparece debajo que pone scan code, vamos, eso se entiende, pero si quieres que salga en español, yo en mi caso lo traduje con Loco Translate, que ya sabes que es un plugin que te permite traducir cualquier cadena de texto que arroje WordPress, un plugin, un thing a nivel interno, todo aquello que no puedas tú toquetear desde la propia administración de WordPress, desde los ajustes, desde la parte frontal, ni nada a nivel interno de código, lo puedes traducir o modificar gracias a este plugin que vemos en el curso de WordPress intermedio. Y luego en cuanto a visibilidad a nivel de cada página, tienes opción de elegir a nivel de tipos de contenido, si quieres que se muestren páginas, si quieres que se muestren entradas en categorías, en páginas de archivo, ¿Vale? Tiene algo más de control en su versión gratuita. Básicamente ellos no te lo limitan en su versión gratuita, mientras que el anterior plugin si te limita en algunas partes. Además tienes la posibilidad de mostrar un chat que aparece en pantalla para esa primera interacción con el usuario. Imagínate que le da al botón y le aparece un chat dicié Hola, gracias por chatear conmigo. Recuerda que tienes un código del 10% de descuento si compras aquí. Y si tienes alguna duda, dale a abrir chat por ejemplo. Me lo estoy inventando y como que animar un poco a la persona más allá de ese primer clic, pues que después chate o lo que sea, o como yo lo he dejado configurado en mi caso, que creo que genera menos fricción si alguien quiere contactar por WhatsApp, quiere contactar por WhatsApp, entonces cuando le das al botón que se te abra directamente el chat de la persona contigo. Más características, en este caso Join Chat sí permite incluir un código de seguimiento para medir conversión en Analytics y como extra que no trae la anterior, te permite añadir una casilla de aceptación de la política de privacidad, donde además puedes poner un mensaje personalizado dónde puede ganar el anterior Click Chat a este Join Chat. En la versión Premium, Click Chat tiene la posibilidad de que elijas qué días de la semana y en qué horario se va a mostrar ese botón de WhatsApp. En el caso de Join Chat, yo al menos no lo he encontrado especificado en sus características premium. Si alguien lo ha visto, yo es que al final he usado, no lo necesitaba y uso la versión gratuita. Si alguien lo ha visto pues me lo podéis comentar si queréis. Los que estéis en el grupo de Telegram, ya sabéis, todos los miembros de la suscripción tenéis acceso a la comunidad privada en Telegram. Si eres miembro de la suscripción y no estás, escríbeme y te doy acceso. Estos son los dos grandes plugins que hay, ya dependiendo de lo que necesites, pues puedes optar por uno u otro. Y luego está la tercera opción, que es añadir un botón o un enlace para el chat de WhatsApp sin utilizar plugins. Si prefieres ahorrarte un plugin, esta puede ser una buena opción, pero este caso que te voy a contar es para cuando no necesitas demasiadas características, porque aquí no vamos a crear un botón flotante que aparezca en pantalla, que se puede hacer también manualmente, pero ya implica pues más código. Y si ya hay una solución que lo hace bien y que está optimizada, pues la verdad que es que yo preferiría utilizar un plugin, porque un plugin no deja de ser código, así que ¿Por qué reinventar la rueda? Pero si lo que quieres es simplemente, por ejemplo, te pongo un ejemplo práctico, poner en tu menú de navegación un botón para contactar por WhatsApp, pues para esto no necesitas un plugin, lo puedes hacer de forma manual. Te voy a dejar la documentación de WhatsApp donde explican pues digamos el código que puedes utilizar para que te envíen un WhatsApp, que hay que modificarlo un poco para poner tu número de teléfono, un mensaje predeterminado y todo esto. Y si no te aclaras mucho, yo ya publiqué en su día un vídeo, un vídeo de la zona código donde explico cómo hacerlo de forma práctica, incluso vemos cómo poner el enlace en la parte de menú de navegación. Así que os lo voy a dejar enlazado en esta última parte, en la que en el tercer punto de añadir el botón de chat de WhatsApp sin plugins en este sentido, también publiqué un vídeo en el que te explicaba cómo crear enlaces para enviar emails, mensajes o llamadas, también sin plugins ni nada, trabajando con un poquito de HTML que puede ser. Y si te interesa esto, pues puede ser interesante que le eches un vistazo también. Es el vídeo 216, es el vídeo 216 de la zona código. Te lo dejo en la parte de contenidos recomendados. Por último, porque me imagino que además alguno me preguntará, fíjate que yo he hablado aquí de poner un botón de contactar, de abrir un chat de WordPress y contactar. Si lo que buscáis son opciones para compartir contenidos que hay en vuestra web por WhatsApp para que el visitante pueda darle a compartir por WhatsApp, para eso hay otro grupo grande de plugins, hay varios plugins y en un episodio de preguntas y respuestas ya hablé de varias opciones. También os lo dejo enlazado. Fantástico. Pues nada más por este episodio. Recuerda que si quieres aportar tu granito de arena, pues te agradezco mucho que te suscribas al podcast en la app en la que lo estés escuchando, que lo compartas con la gente a la que pienses que le puede servir y si ya te animas a dejar una valoración, pues fantástico. Nada más por este episodio, nos seguimos escuchando. Adiós.
More from Gonzalo
518 | Redes sociales, precios personalizados, audios desde Drive y temas de bloques (Q&A)
513 | Por qué sigo usando estos plugins después de tantos años (y cuáles he abandonado)