¿Cómo poner enlace de WhatsApp en HTML?

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.

Cómo poner WhatsApp en HTML (sitio web) con botón

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.

Abrir chat en WhatsApp con URL

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 botón oficial.

Descargar el botón oficial de WhatsApp

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:

Contáctame por WhatsApp

¡Eso es todo! Así que si tienes alguna duda, puedes dejarnos un comentario para ayudarte.


También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.