Hoy te mostramos cómo poner un enlace de WhatsApp en tu sitio web con HTML. Esto es super sencillo, y te ayuda a mantenerte en contacto con tus clientes. Puedes crear el enlace con un botón o solo con un texto. Así que sigue leyendo para aprender cómo.
Enlace de WhatsApp
WhatsApp te da la habilidad de crear un enlace para comenzar un chat con un número específico. Esto es perfecto para poner en tu sitio web para que tus clientes se contacten contigo via WhatsApp.
Puedes crear tu propio enlace, indicando un número telefónico con formato internacional. Para esto, solo debes usar el siguiente enlace, https://wa.me/###### donde deberás poner tu número en vez de ######. Solo incluye los números, sin guiones ni espacios.
Además, podrás indicar un mensaje predeterminado. Por ejemplo, podemos crear un enlace de WhatsApp con un mensaje de «¡Estoy interesado!». Para ello, usamos el siguiente enlace: https://wa.me/######?text=¡Estoy+interesado!
Luego de crear tu enlace, puedes probarlo colocándo la URL en tu navegador. Se abrirá una ventana que te redireccionará a la app de WhatsApp para comenzar un chat con el mensaje predeterminado y al número específico.
Enlace con botón de WhatsApp con HTML
Una opción es usar el enlace que creamos en un botón con el logo de WhatsApp. Para esto, vamos a ir a la página de Branding de WhatsApp para descargar el logo oficial y sus variaciones. Puedes descargar los botones oficiales de WhatsApp aquí.
Se descarga un archivo comprimido que contiene una imagen con extensión .png. Podemos usar esta imagen o cualquier otra imagen que tú desees. La debemos subir a nuestro sitio web para tener una URL.
El código HTML para crear el enlace con una imagen sería el siguiente:
<a href="https://wa.me/######?text=¡Estoy+interesado!"><img src="URL-DE-IMAGEN"></a>
Recuerda reemplazar la URL-DE-IMAGEN por la URL de la imagen que desees usar. Y como mencionamos antes, debes colocar tu número telefónico, donde dice ######.
El resultado será el siguiente:
Enlace de texto de WhatsApp con HTML
La otra opción es que usemos el enlace de WhatsApp con un texto. Esto es más sencillo, así que el código HTML será el siguiente:
<a href="https://wa.me/######?text=¡Estoy+interesado!">Contáctame por WhatsApp</a>
Puedes reemplazar el texto que desees mostrar, en vez de «Contáctame por WhatsApp. Y como mencionamos antes, debes colocar tu número telefónico, donde dice ######.
El resultado será el siguiente:
¡Eso es todo! Así que si tienes alguna duda, puedes dejarnos un comentario para ayudarte.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
Hola! La URL wa.me funciona perfecto para enlazar desde móvil. Pero para escritorio no funciona, porque el enlace debería ser a web.whatsapp. Cómo se puede poner el enlace para que abra Whatsapp desde ambos lugares: móvil y escritorio? (Sólo abrir la aplicación, sin texto customizado ni imágenes) Gracias.
¡Hola Silvia!
El enlace de wa.me es el que se debe utilizar, ya que funciona para escritorio y móvil. En desktop o escritorio, este enlace abrirá el chat en la aplicación de WhatsApp, y si el usuario no la tiene instalada, le saldrá un mensaje para descargarla o un enlace para abrirlo en WhatsApp Web.
Además, si no quieres colocar ningun texto ni imagen, el enlace solo sería el de wa.me sin la parte de ?text=
¡Saludos!
como hago para que el mesaje de wattshap tambien adjunte una imagen.
pir ejempolod eun producto que se quiere comprar, quero que el mensaje de saludo. imediatamnete adjunte la imagen del producto que quiero
¡Hola Helder! Lamentablemente, no se puede adjuntar directamente una imagen, pero te recomiendo incluir el título del producto en el texto del mensaje, y quizás la URL del producto.