Cómo integrar Facebook Messenger y WhatsApp en tu Web

iniciar sesión

¿Quieres conseguir más ventas para tu negocio?

Aprende a crear y automatizar un proceso de generación de leads para tener un flujo constante de clientes para tu empresa, sin malgastar dinero en publicidad de pago.

Cómo integrar Facebook Messenger y WhatsApp en tu Web

4-5-2016     Herramientas Social Media

En 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:

Inserta Facebook Messenger en tu Web

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:

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.

whatsapp negocios crm pymes

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.



Ángel Diaz
Angel Diaz

Soy el creador de MetricSpot y estoy aquí para ayudarte. Puedes conectar conmigo vía Twitter.






Deja tu comentario:

Comentarios:

  1. John Betancourth ha escrito:

    Buen dato! Gracias

  2. Xus_Boya ha escrito:

    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..

  3. Slays ha escrito:

    hola, pudiste hacerlo funcionar en android? porque si abres esta web desde un movil, el href si funciona… pero compilado en phoengap no

  4. Angel Diaz Ibarra ha escrito:

    Usando la API: http://disq.us/p/1hx03o4

  5. ElCuboCreativo GDL ha escrito:

    De que manera puedo usar esa implementación para integrarla a iOS?, ya que manda mensaje de error, en android funciona da maravilla.

  6. Angel Diaz Ibarra ha escrito:

    Mira qué solución más buena usando la API: http://disq.us/p/1hx03o4

  7. Manuel ha escrito:

    esta interesante lo de facebook

  8. Luis ha escrito:

    Hola Angel, Muy buen post.
    ¿Nos podrías comentar cómo se pueden aplicar los estilos usando CSS?

  9. Joan Morci ha escrito:

    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.

  10. Luis Junco ha escrito:

    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!

  11. Luis Junco ha escrito:

    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

  12. Joan Morci ha escrito:

    Hola Luis.

    Pues parece ser que Ángel 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.

  13. Angel Diaz Ibarra ha escrito:

    Mira qué solución más buena, usando la API: http://disq.us/p/1hx03o4

  14. Luis Junco ha escrito:

    Muchas Gracias Joan!
    Ya quedó 🙂
    Me ahorraste horas…jajaja

  15. Joan Morci ha escrito:

    Me alegro haber sido de utilidad 🙂

  16. Harold Anguiano ha escrito:

    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. Marta Camacho ha escrito:

    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!!

  18. Angel Diaz Ibarra ha escrito:
  19. David Monge ha escrito:

    Tu botón dejo de funcionar?
    Envíanos un mensaje de WhatsApp

  20. Angel Diaz Ibarra ha escrito:

    Cambié de país y de teléfono 😉

  21. Alejandro Martinez ha escrito:

    el link de whatsapp es unicamente para android, no?

  22. Angel Diaz Ibarra ha escrito:

    Sí, he visto que en iPhone no va…

  23. Alberto EG ha escrito:

    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…

  24. Gabriel Castillo ha escrito:

    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?

  25. Angel Diaz Ibarra ha escrito:

    Comentario destacado 😉 ¡Muchas gracias a ti por la solución! Creo que cuando escribí este artículo la API de WhatsApp todavía no era pública.

  26. Espacucho es ha escrito:

    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

  27. Sindy Paola ha escrito:

    Muchas gracias, la información me ayudo bastante.

  28. Manuel ha escrito:

    muchísimas gracias por el aporte

  29. Carolina Lallana ha escrito:

    Excelente tutorial


¡Deja tu comentario!

(Anti-Spam)