Añadir un icono de Whatsapp a tu web para que tus clientes te escriban

Hoy en Destaca imagen queremos compartir con vosotros este tutorial. Vamos a incluir un icono de WhatsApp en nuestra web. Con un enlace a directo a nuestro perfil de WhatsApp para nuestro posibles clientes o usuarios puedan hacer click y directamente chatear con nosotros. ¿Suena práctico verdad?

Te adelantamos que si eres de los que prefieren delegar puedes contactar con nosotros y por sólo 20€ + IVA añadiremos esta funcionalidad a tu web y mostraremos este icono en el horario que quieras.

El resultado es este:

También te recordamos que puedes utilizar WhatsApp en tu ordenador. Si, has oido bien. Puedes escribir, enviar archivos, audios, ubicaciones, contactos, etc… desde tu equipo. Si no conocías esta funcionalidad estamos seguro que ahora te habrás quedado con la boca abierta. Te recomendamos que leas este otro artículo donde te explicamos como hacerlo: https://www.destacaimagen.com/whatsapp-web-para-empresas/

Retomamos el tutorial

Como añadir nuestro icono y un enlace a nuestro WhatsApp:

Si trabajas con WordPress, debes añadir este código al footer de tu web. Puedes localizar y editar este archivo en:

Después debes seleccionar el archivo footer.php y añadir el código que aparece debajo

Código a añadir:

<div id="whatsapp-icon" style="position:fixed; left:10px; bottom:10px; text-align:center; padding:3px">
<a href="https://api.whatsapp.com/send?phone=+34662681XXX">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50"></a>
</div>

Muy importante
Debes sustituir el número de teléfono que aparece en el código anterior por tú numero de teléfono ….?phone=+34662681XXX

¿Prefieres que el icono aparezca a la izquierda?

Sólo debes cambiar el valor left:10px; por right:10px;. El código final sería este:

<div style="position:fixed; right:10px; bottom:10px; text-align:center; padding:3px">
<a href="https://api.whatsapp.com/send?phone=+34662681XXX">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50"></a>
</div>

Ocultar icono de WhatsApp en ordenadores

Por último, vamos a hacer algo que no es obligatorio pero si recomendable. Ocultaremos el icono de whatsApp para tablets y ordenadores.

Para ello debemos añadir este código en apariencia / personalizar / css personalizado

@media (min-width:767px){
	#whatsapp-icon{
		display:none;
	}
}

Gestionar el horario de atención al cliente

Aquí la solución más sencilla que te recomendamos es que utilices WhatsApp Business. Esta es la versión para empresas. Tiene funcionalidades especiales para negocios, como crear un horario de atención al cliente y una respuesta automática para cuando te escriben fuera de este horario.

Recuerda diseñamos y desarrollamos páginas webs, así que si prefieres encargarnos esta tarea o pedirnos presupuesto para el desarrollo de tu tienda online, web corporativa contacta con nosotros haciendo clic aquí y encantados te atenderemos.