WhatsApp y Messenger en el Blog: Botón Flotante de Chat

Te explico cómo agregar el botón de Chat de WhatsApp y Messenger en el blog de Blogger o WordPress, sin usar ningún plugin y lo mejor es que es fácil y rápido de aplicar.

¡Hola! soy Gabriela de peengler.com. Esta vez quiero enfocarme en la comunicación y la confianza entre tus visitantes, clientes, lectores o seguidores. Ya sabes que mantener una audiencia no es nada fácil. Es por eso que vengo a recomendarte en colocar WhatsApp y Facebook Messenger en tu sitio.

Sin más que decir, ¡Empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Por qué añadir WhatsApp y Messenger en el Blog?

No sé si te pasa que llega un momento en donde quieres tener confianza con tu público, quieres que ellos confíen en lo que haces y que no pasen de largo sin darte una oportunidad.

Hace poco coloqué el botón de Messenger de Facebook en mi sitio y poco a poco empecé a recibir mensajes de personas, pidiendo ayuda, saludando, agradeciendo, dando consejos y hasta empezaron a seguirme en mis redes sociales.

Por supuesto que debe haber un buen trato, ser agradable y lo más importante ser tu mismo.

6 razones para usar el chat de WhatsApp y Messenger en el Blog

 Estos son algunos de los beneficios de usar estas 2 mensajerías:

• En primer lugar, estas herramientas están disponibles las 24 horas del día en los 7 días de la semana.
• Son totalmente gratis.
• Mejoras la confianza con tus visitantes, clientes y seguidores.
• Puedes responder las dudas y preguntas que puedan tener las personas.
• Tu sitio es más humano porque das a entender: “Hey, estoy aquí por si me necesitas”
• Puedes tener más clientes, seguidores y ventas.

¿Cómo poner un botón de chat de WhatsApp en tu blog o web?

Para añadir el botón de chat de WhatsApp, primero vas a modificar el enlace del botón. Aquí te dejo uno de ejemplo:

https://api.whatsapp.com/send?phone=123456789

Lo que vas a modificar son los números que llevan el prefijo de tu país y el número de teléfono. Sino sabes cuál es el prefijo, te recomiendo que visites esta página y lo averigües -> Clic Aquí

En mi caso, que soy de Venezuela mi prefijo es 58 y mi número del teléfono es: 123456789 entonces el enlace quedaría así:

https://api.whatsapp.com/send?phone=58123456789

Ya con esto funcionaria el enlace de tu WhatsApp. Ahora faltaría mostrarlo en un botón flotante en tu sitio, para eso usaremos un poco de HTML y CSS.

Botón de WhatsApp en HTML

<div class="whatsapp">
 <a href="ENLACE-DE-TU-WHATSAPP" target="_blank" title="Contactame por Whatsapp">
 <img src="https://www.peengler.com/wp-content/uploads/whatsapp.png" alt="WhatsApp" />
 </a>
</div>

Botón de WhatsApp en CSS

<style>
.whatsapp {
 position: fixed; 
 right:25px; /*Margen derecho*/
 bottom:20px; /*Margen abajo*/
 z-index:999;
}
.whatsapp img {
 width:60px; /*Alto del icono*/
 height:60px; /*Ancho del icono*/
}
.whatsapp:hover{
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
</style>

¿Cómo agregar un botón de chat de Facebook Messenger en mi blog?

Con el siguiente botón lo puedes asociar para la mensajería de tu cuenta personal de Facebook o de tu Fan Page. En primer lugar, debes modificar el enlace de chat de Messenger que es el siguiente:

https://m.me/TUSUARIO

Donde dice TUSUARIO, colocas el nombre del usuario de tu cuenta personal o de tu fan Page, cualquier duda mírate el vídeo tutorial. En mi caso, usare la de mi Fan Page y el nombre de usuario es: GabrielaPeengler. Por lo tanto, quedaría así mi enlace:

https://m.me/GabrielaPeengler

Ahora falta mostrarlo en un botón flotante en el blog. Aquí te dejo el código:

Botón de Facebook Messenger en HTML

<div class="facebook">
 <a href="TU-ENLACE" target="_blank" title="Contactame por Messenger">
 <img src="https://www.peengler.com/wp-content/uploads/messenger.png" alt="Messenger" />
 </a>
</div>

Botón de Facebook Messenger en CSS

<style>
.facebook {
 position: fixed; 
 right:25px; /*Margen derecho*/
 bottom:20px; /*Margen abajo*/
 z-index:999;
}
.facebook img {
 width:60px; /*Alto del icono*/
 height:60px; /*Ancho del icono*/
}
.facebook:hover{
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
</style>

¿Cómo poner el chat de WhatsApp y Messenger en el Blog?

Si has decidido en colocar las 2 mensajerías en tu sitio, aquí te dejo el código:

Botón de WhatsApp y Messenger en el Blog en HTML

<div class="whatsapp">
 <a href="TU-ENLACE" target="_blank" title="Contactame por Whatsapp">
 <img src="https://www.peengler.com/wp-content/uploads/whatsapp.png" alt="WhatsApp" />
 </a>
</div>
<div class="facebook">
 <a href="TU-ENLACE" target="_blank" title="Contactame por Messenger">
 <img src="https://www.peengler.com/wp-content/uploads/messenger.png" alt="Messenger" />
 </a>
</div>

Botón de WhatsApp y Messenger en CSS

<style>
.whatsapp, .facebook{
 position: fixed; 
 z-index:999;
 right:25px; /*Margen derecho*/
}
.whatsapp img, .facebook img{
 width:60px; /*Alto del icono*/
 height:60px; /*Ancho del icono*/
}
.whatsapp { 
 bottom:20px; /*Margen abajo*/}
.facebook {
 bottom:95px; /*Margen abajo*/}
.whatsapp:hover, .facebook:hover{
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
</style>

Integrar Facebook Messenger en el blog

Para usar el plugin de chat del Facebook, primero debes tener una Fan Page, cuando lo tengas creado, sigue estos pasos:

• Te vas a tu Fan Page.
• Configuración.
• Mensajería avanzada > Dominios de la lista de autorizados: coloca la URL de tu sitio.
• Mensajes > Añade Messenger a tu sitio web: Aquí empiezas a Configurar el plugin de chat.

Cuando finalices, pegas el código antes del </body> o después del <body>

En conclusión

Ya no tienes excusa para conectar directamente con tus clientes, seguidores o visitantes. Gracias a WhatsApp y Messenger en el Blog puedes humanizar más tu sitio y también en ayudar a las personas con sus dudas y preguntas.

Recuerda que los botones son imágenes y por lo tanto lo puedes cambiar por las imágenes que tú quieras, te recomiendo que sean imágenes pequeñas, con extensión .png y con fondo transparente.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.