Cómo integrar Facebook Messenger y WhatsApp en tu Web

Para integrar Facebook Messenger en tu web, usa un enlace HTML del tipo https://m.me/TU_USUARIO. Para WhatsApp, usa https://api.whatsapp.com/send?phone=TU_NUMERO_INTERNACIONAL. Cuando un usuario pulse sobre el enlace, se abrirá la aplicación correspondiente con una conversación nueva contigo. Estos enlaces funcionan en e-mails, newsletters y banners, sin necesidad de JavaScript.

En la actualidad el e-mail y los formularios de contacto siguen siendo los métodos más utilizados en las webs para contactar con clientes, pero las nuevas generaciones prefieren hablar mediante mensajería instantánea como Facebook Messenger o WhatsApp. En este tutorial te explico paso a paso cómo insertar Facebook Messenger o WhatsApp en la web de tu negocio.

Enlace a Facebook Messenger

El botón de Facebook Messenger estándar se genera utilizando JavaScript, pero también puedes crear un enlace sencillo mediante HTML. La ventaja es que estos enlaces aparecerán aunque el navegador del usuario esté bloqueando JavaScript. Además, también puedes insertar estos enlaces en e-mails y Newsletters o en banners como este:

Lo que tienes que hacer es sustituir “XYZ” por tu nombre de usuario en el siguiente código. Si no tienes nombre de usuario, puedes utilizar tu ID numérico de Facebook en su lugar, pero te recomiendo que crees uno personalizado siguiendo este enlace.

<a href="https://m.me/XYZ">Envíanos un mensaje de Facebook</a>

El enlace resultante debería quedar similar a este: Envíanos un mensaje de Facebook

NOTA: Si no ves los mensajes que te envían en tu perfil es porque Facebook oculta automáticamente los mensajes de personas que no están en tu lista de contactos. Tendrás que ir a Mensajes > Más > Filtrados para poder verlos.

Enlace a WhatsApp

Del mismo modo, puedes crear un enlace HTML que abrirá la aplicación de WhatsApp e iniciará una conversación con el número de teléfono que tú especifiques. Sólo tienes que sustituir “0123456789” por tu número de teléfono (recuerda poner el código internacional de tu país delante).

<a href="https://api.whatsapp.com/send?phone=0123456789">Envíanos un mensaje de WhatsApp</a>

Debería aparecer un mensaje así: Envíanos un mensaje de WhatsApp (este era uno de mis números, pero ya no lo uso).

Recuerda que a diferencia de Facebook Messenger, el enlace de WhatsApp no es válido para usuarios que navegan por tu web desde su laptop o tablet, por lo que es conveniente mostrar el link sólo a usuarios móviles.

Comparativa: Facebook Messenger vs WhatsApp

Aspecto	Facebook Messenger	WhatsApp
URL base	https://m.me/	https://api.whatsapp.com/send?phone=
Identificador	Nombre de usuario o ID de Facebook	Número de teléfono con código internacional
Funciona en desktop	Sí	No (solo móvil y WhatsApp Web)
Funciona sin JavaScript	Sí	Sí
Útil para newsletters	Sí	Sí (con limitaciones de desktop)

Un poquito de estilo, por favor

Recuerda que puedes aplicarle estilos a los enlaces usando CSS. También puedes hacer enlaces en botones o imágenes que parezcan botones, así se verá más integrado en tu web:

Mensaje de Facebook Mensaje de WhatsApp

Mucho mejor así, ¿verdad?

Novedad: WhatsApp para Negocios

A principios de 2018 salió al mercado WhatsApp Business, una aplicación gratuita desarrollada especialmente para que las PYMES puedan chatear con sus clientes de una forma sencilla.

No la he probado todavía así que no te puedo dar muchos detalles, pero las funcionalidades que incluye tienen muy buena pinta:

• Crear tu perfil de empresa.
• Programar respuestas automáticas para cuando no estés conectado.
• Ver estadísticas de mensajes.
• Y mucho más.

Vamos, que puedes utilizarlo como un CRM para tu negocio.

¿Necesitas más clientes para tu negocio?

Puede que salgas el primero en Google o que lleves 1000 visitas al día a tu web a través de redes sociales, pero si todo ese tráfico se va sin comprar no te sirve de nada. Integrar Facebook Messenger, WhatsApp o cualquier otro chat en tu web es esencial para que tus clientes puedan contactar contigo, pero ese es sólo el primer paso.

Si quieres saber cómo conseguir más ventas a través de tu web, te recomiendo que leas este artículo con 5 trucos que puedes implementar hoy mismo.

Preguntas frecuentes

¿Cómo creo un enlace a Facebook Messenger desde mi web?

Usa un enlace HTML del tipo <a href="https://m.me/TU_USUARIO">Envíanos un mensaje</a>, sustituyendo TU_USUARIO por tu nombre de usuario de Facebook (o tu ID numérico si no tienes uno personalizado). Te recomiendo crear uno legible desde facebook.com/username.

¿Cómo enlazo a WhatsApp desde un botón en mi web?

Con <a href="https://api.whatsapp.com/send?phone=TU_NUMERO_INTERNACIONAL">...</a>. Recuerda incluir el código internacional delante del número (sin ”+”) y muestra el botón solamente a usuarios móviles, ya que WhatsApp no funciona desde laptops salvo a través de WhatsApp Web.

¿Funcionan estos enlaces en e-mails y newsletters?

Sí. Una de las ventajas de hacerlo con HTML puro en lugar del botón JavaScript estándar de Messenger es que estos enlaces aparecen aunque el cliente bloquee JavaScript, así que se pueden incrustar sin problemas en e-mails, newsletters o banners.

¿Por qué no veo los mensajes que me envían por Messenger?

Porque Facebook oculta automáticamente los mensajes de personas que no están en tu lista de contactos. Tienes que ir a Mensajes > Más > Filtrados para verlos.

Conclusiones clave

• Para Messenger: <a href="https://m.me/TU_USUARIO">...</a>.
• Para WhatsApp: <a href="https://api.whatsapp.com/send?phone=TU_NUMERO">...</a> (con código internacional).
• Estos enlaces funcionan sin JavaScript y se pueden incrustar en e-mails y newsletters.
• WhatsApp solo funciona desde móvil o WhatsApp Web; muestra el botón solo a usuarios móviles.
• Si tu marca está en Facebook, crea un nombre de usuario personalizado para que el enlace sea legible.
• WhatsApp Business (lanzado en 2018) añade funciones de CRM ligero para PYMES.