HTML Tips

WhatsApp, ¿cómo crear un link para recibir mensajes?

[titulo]¿Cómo crear un botón de WhatsApp chat en Html?[/titulo]

La archiconocida app de mensajería instantánea, considerada por muchos como la red social más usada del mundo, permite enviar mensajes directos desde el hipervínculo de una web.

Pero claro, tú eso ya lo sabías, ¿no? ¡Por eso estás aquí! 😉

WhatsApp tiene una api rest que admite los siguientes parámetros:

  • phone: Que es, obvio, el número de teléfono al que enviar el mensaje, siempre precedido del prefijo de tu país.
  • text: Si quieres incluír algún texto por defecto.

Así pues, si queremos crear un enlace en el que al hacer clic nos envíen un mensaje, pondremos algo como esto:

<a href="https://api.whatsapp.com/send?phone=34666777888">El anchor text que quiera<a/>

Donde 666777888 se sustituye por tu num de teléfono.

Si queremos que nos envíen un texto inicial por defecto:

<a href="https://api.whatsapp.com/send?phone=34666777888&text=Hola%20Caracola!">El anchor text que quiera<a/>

Donde «Hola%20Caracola!» debe sustituirse por el texto que queramos que se envíe inicialmente, y para poner espacios debemos usar [codigo]%20[/codigo].

 

¿Y si queremos poner ese enlace a una imagen que hace las veces de botón?

Pues cambiamos el anchor text por la imagen:

<a href="https://api.whatsapp.com/send?phone=34666777888&text=Hola%20Caracola!">
    <img src="la_url_de_la_imagen"> 
<a/>

 

¿Dudas, preguntas, propuestas? ¡A los comentarios!

 

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

1 Comentario

Haz clic aquí para dejar tu comentario