En la actualidad la mayoría de las personas utilizan la aplicación de mensajería WhatsApp para conversan con sus amigos, familiares y otros contactos, Páginas Web Premium se ha dado a la tarea en este post de enseñarte como utilizar esta aplicación a tu favor para que el público de tu sitio web te contacten de una forma más rápida y directa, te enseñaremos como crear un botón que te permita chatear directamente en WhatsApp.
Lo primero que debemos considerar al realizar este botón es identificar en que parte de nuestro sitio web lo colocaremos, esto para seguir un estilo o no dañar la estructura de diseño de nuestro sitio web. Después de seleccionar el lugar de nuestro botón es crear nuestro botón.
Realizaremos un formulario y dentro del formulario declararemos una etiqueta input de tipo submit y pondremos a continuación un texto dentro del botón con el atributo value, en este caso “conversación directa”.

A continuación te mostramos el código.

 
 < form >
 < input type="submit" value="conversación directa" />
 < /form >
 
 
Ahora que ya tenemos nuestro botón prediseñado a nuestro formulario daremos la acción de la API de WhatsApp que puedes consultar aquí.

A continuación te proporcionamos el código:

 
 < form action="https://api.whatsapp.com/send?phone=5255TuNumero" >
 < input type="submit" value="conversación directa" />
 < /form >
 
 

Resultado

La API de WhatsApp básicamente es un link que permite iniciar una conversación este se compone por tres cosas, la API que es  https://api.whatsapp.com/send?phone= después de esto sigue tu número celular con formato internacional, en México es el 52, un ejemplo es 52 55 12345678 y por ultimo un mensaje si lo deseas agregar.
Para crear un mensaje solo tiene que agregar después del link la función &text= seguido de tu mensaje cambiando los espacios por %20. Un ejemplo es: “Quiero una cotización”.

Aqui te damos el código.

 
 < form action="https://api.whatsapp.com/send?phone=5255TuNumero&text=Quiero%20una
 %20cotización" >
 < input type="submit" value="conversación directa" />
 < /form >
 
 

Resultado

Ahora que ya tenemos nuestro botón podemos darle estilo con un archivo css y el atributo class a nuetra etiqueta input, para personalizarlo a nuestro gusto y que sea perfecto.

Aquí te proporcionamos un estilo por si quieres usarlo.

 
 < form action="https://api.whatsapp.com/send?phone=5255TuNumero&text=Quiero%20una
 %20cotización" >
 < input type="submit" value="conversación directa" class="button-personalizado" />
 < /form >
 Archivo CSS:
 button-personalizado{
 padding: 10px;
 font-size: 20px;
 color: #ffffff;
 background-color: #25d366;
 border-radius: 5px;
 border: 5px solid #25d366;
 }
 
 

Resultado

Ahora que ya conoces la forma de hacer este botón apresurate a integrarlo a tu web y que tus usarios comiencen a chatear directamente contigo, no olvides enviar tus comentarios o preguntas en nuestra caja de comentarios y seguirnos en Facebook.