Cómo integrar Facebook Messenger y WhatsApp en tu Web
4-5-2016 Herramientas Social MediaEn la actualidad el e-mail y los formularios de contacto sigue 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 voy a explicar paso a paso cómo insertar Facebook Messenger o WhatsApp en la web de tu negocio. Cuando alguien pulse el botón de «enviar mensaje» se abrirá directamente la aplicación correspondiente para comenzar a chatear contigo.
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.
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:
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: puedes 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.
Facebook Messenger ventas WhatsApp
16/5/2016 a las 02:39 PM
Buen dato! Gracias
17/5/2016 a las 02:19 PM
intenté implementar la solución para whatsapp y no funciona… en iOs directamente salta mensaje de error diciendo que no es capaz de abrir el enlace y con Android salta mensaje de error de Whatsapp que dice no reconocer el numero.. Probé con el facilitado en este articulo y con el mío própio…
La info referente al messenger de Facebbook, sí funciona..
29/6/2016 a las 04:10 AM
hola, pudiste hacerlo funcionar en android? porque si abres esta web desde un movil, el href si funciona… pero compilado en phoengap no
22/6/2016 a las 10:40 PM
De que manera puedo usar esa implementación para integrarla a iOS?, ya que manda mensaje de error, en android funciona da maravilla.
26/9/2016 a las 08:29 PM
esta interesante lo de facebook
2/10/2016 a las 03:11 AM
Hola, Muy buen post.
¿Nos podrías comentar cómo se pueden aplicar los estilos usando CSS?
2/10/2016 a las 12:34 PM
Hola Luis,
El plugin ‘SiteOrigin CSS’ te permite editar el CSS de forma cómoda y sencilla, visualizando todos los cambios al momento.
Si vas al repositorio de WordPress.org lo encontrarás sin problemas. El autor es: Greg Priday.
8/10/2016 a las 10:47 PM
Muchas Gracias Joan por la respuesta.
Ya generé el siguiente html para obtener un botón:
>a href=»#» class=»classname»>Text
Y el siguiente html para hacer el enlace a whattsap:
>ahref=»intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end»>Envíanos un mensaje de WhatsApp
¿Me podrás decir por favor cómo puedo juntarlos?
Saludos!
9/10/2016 a las 05:19 PM
Hola Joan. Gracias por la respuesta.
Ya tengo el código html del botón y el html del enlace al whatsapp.
¿Me podrías decir por favor cómo los puedo unir? https://uploads.disquscdn.com/images/33fa446334d22a18cfd4cdb9b6d3c51336ee501330df6665f20ba9a8219458c0.png
10/10/2016 a las 12:03 PM
Hola Luis.
Pues parece ser que lo ha hecho de manera mucho más fácil aunque obligándote a copiar y pegar el mismo código una y otra vez, en diferentes artículos.
Si haces clic con el botón derecho del ratón sobre cualquiera de las 2 pestañas (Facebook / WhatsApp), se abre una caja de menú con varias opciones, elige ‘Inspeccionar’/’Inspeccionar elemento’ (depende del navegador).
Ahí verás en la parte inferior el código HTML y en el lateral derecho el estilo CSS que le ha dado para dejarlo bonito.
No me deja adjuntar imagen sino te lo mostraba mejor.
11/10/2016 a las 11:08 PM
Muchas Gracias Joan!
Ya quedó 🙂
Me ahorraste horas…jajaja
12/10/2016 a las 07:19 PM
Me alegro haber sido de utilidad 🙂
22/10/2016 a las 06:10 AM
Hola que tal, tengo una pregunta espero puedas ayudarme. Utilice tu código para abrir whatssapp y mandar un mensaje a un número en especifico. Funciona excelente. Pero por ejemplo como sería el » Intent » para utilizarlo en una aplicación android ? Yo utilizo el programa de INTEL XDK y he utilizado el intent whatssapp:* com.whatssapp:* pero sin éxito. Te agradezco tu atención.
17/11/2016 a las 12:15 PM
Hola! Tengo una pregunta, he intentado meter el código de whatsapp en mi versión móvil, cuando le doy al botón desde mi tlf me dice que «El teléfono no está registrado en WhatsApp». El número que he metido tiene la App instalada, el problema es que yo no lo tengo como contacto porque cuando meto otro número que si tengo como contacto no me sale ese mensaje.
¿Podrías ayudarme? ¿Estoy haciendo algo mal?
Gracias!!
25/2/2017 a las 04:02 PM
Tu botón dejo de funcionar?
Envíanos un mensaje de WhatsApp
21/3/2017 a las 05:11 PM
el link de whatsapp es unicamente para android, no?
17/4/2017 a las 06:26 PM
Agradezco mucho el aporte. Les comparto otra opción multiplataforma, que incluso con la última actualización de whatsapp, permite mensajear con usuarios no registrados en tu teléfono: Envíanos un mensaje de WhatsApp Sólo es necesario cambiar los números por el celular deseado incluida la clave internacional…
19/4/2017 a las 02:50 AM
Woww!! Cómo hiciste eso @albertoeg:disqus ? Genio! Sirve si el usuario está desde el browser de su celular iOs (Safari) y lo redirige al aplicación móvil o al app store para que descargue whatsapp? y desde un android (Chrome) al app, o desde mi computador (firefox) a web.whatsapp sin guardar el número de télefono en mis contactos y personalizando el mensaje? Cómo es el código?
17/6/2017 a las 06:24 PM
la informacion que esta en la web de whataspp me funciono para mis propositos. que era que abriera el whataspp al menos en ios
coloque esto
https://api.whatsapp.com/send?phone=15551234567
Referencia del sitio original
https://faq.whatsapp.com/en/general/26000030
Igual agradecido pues me sirvio de punto de partida para investigar mas.
Saludos
16/10/2017 a las 09:33 PM
Muchas gracias, la información me ayudo bastante.
26/10/2017 a las 01:22 PM
muchísimas gracias por el aporte
30/1/2018 a las 08:31 PM
Excelente tutorial