Generador de Botones de WhatsApp


Configuración de botones


Quedan 25 caracteres

Vista previa


Vista previa de cómo se verá el botón instalado en su sitio web


¿Cómo creo un botón de WhatsApp en mi sitio web?

Puedes crear tu botón y ajustarlo tantas veces como quieras, la creación es muy sencilla, puedes adaptar la ubicación donde se mostrará el botón, el texto que se mostrará al pasar el mouse y si es necesario abrirlo en un computadora, ya sea que se abra en una computadora o no, una nueva pestaña del navegador.

Tener tu botón es sencillo, solo ingresa el número al que se llamará, si lo deseas configura un mensaje estándar que el usuario puede enviar con un simple envío.

El botón creado responde y funciona perfectamente en cualquier dispositivo, ya sea computadora de escritorio, tableta o teléfono inteligente.

Son fáciles de instalar: simplemente copie y pegue el código HTML en su sitio web.

¿Por qué necesito tener un botón de WhatsApp en mi sitio web?

Un botón de WhatsApp en su sitio web le permite:

 Permita que sus clientes o clientes potenciales hablen con usted o su empresa rápidamente, con solo hacer clic en un botón.

 Facilita a los clientes potenciales que navegan por tu sitio web contactar con tu equipo de ventas, resolver sus dudas sobre tus productos o servicios y aumentar tus ventas en línea.

 capture los datos de contacto de sus visitantes e inclúyalos en su lista de marketing.

¿Cómo instalar el código generado en mi sitio web?

⚠️ Atención, comprueba el grado de dificultad antes de realizar cambios en tu código, para estar seguro haz una copia de seguridad antes de realizar cambios o pide ayuda a un programador. No nos hacemos responsables de los problemas generados por una instalación incorrecta del código.

Instalación directa en el código de página/sitio

Nivel de dificultad:

El código generado debe instalarse en el HTML de su sitio web entre las etiquetas <head> e </body>, No hay una ubicación exacta, pero recomendamos que sea la más cercana a la etiqueta </body>, evitando así cambios en el rendimiento de tu sitio web cuando se carga el botón.

Ejemplo de cómo se puede instalar el código en su sitio web:

<!DOCTYPE html>
<html>







</html>


Instalación mediante Google Tag Manager

Nivel de dificultad:

Usando el Administrador de etiquetas de Google, puedes crear una nueva etiqueta con el tipo , es una forma sencilla y rápida de instalar el botón, considerando que ya tienes una cuenta creada y configurada, crea una nueva etiqueta, pega el código generado aquí por nuestra herramienta, configura un disparador, guarda y publica tu código, una vez hecho tu botón ahora estará funcionando.


Instalación en WordPress

Nivel de dificultad:

Si utilizas Wordpress en tu sitio web, la instalación del código del botón de WhatsApp se puede realizar de dos formas:

  • Accede a tu panel de WordPress y ve a Apariencia > Editor de archivos de tema.
  • Seleccione el archivo header.php.
  • Ubique la etiqueta </body> en el código y pegue el código HTML generado antes, como en el ejemplo que se muestra arriba.
  • Guardar cambios.

  • Instale y active un complemento de administración de código como  o el .
  • Accede al menú de complementos en tu panel de WordPress.
  • Crea un nuevo fragmento de código.
  • Seleccione el tipo de código como HTML.
  • Pegue el código HTML personalizado en el campo de texto.
  • Especifique dónde se debe insertar el código, como en el encabezado o pie de página del sitio.
  • Guardar cambios.

Ajustar el modelo del botón directamente en el código

Aumentar o reducir el tamaño.

Puede configurar el botón para que sea más grande o más pequeño, para hacer esto, busque la siguiente sección en el código:

position:fixed;width:60px;height:60px;

Por defecto se generará un botón con 60 píxeles, si lo quieres más grande o más pequeño solo cambia los valores resaltados arriba y prueba hasta el punto de dejarlo de la mejor forma que más te convenga.


Ajustando la posición

Cada sitio web tiene su propio diseño, y si necesita que el botón esté ubicado más arriba, más abajo, más central o más cerca del borde, esto es posible editando la siguiente parte del código:

bottom:40px;right:40px

en la parte inferior determinas la altura, cuanto mayor sea el número, más alto estará en la pantalla, en la derecha determinas si lo quieres más cerca del centro o más cerca del borde de la página.

Aquí también se pueden realizar ajustes hasta conseguirlo de la forma que mejor se adapte a tus necesidades.


Ajustar la ubicación, derecha o izquierda

Puedes elegir la ubicación seleccionando el botón al inicio de la página, en el campo Ubicación del botón, pero si ya generaste el código y quieres cambiarlo sin generar otro código nuevamente, ajusta la siguiente parte del código:

bottom:40px;right:40px

Puedes usar left o right.

Plantillas de mensajes de bienvenida para que las utilices

Al crear el botón de WhatsApp, puede crear mensajes listos para usar en los que su cliente puede simplemente hacer clic en enviar, esto ayuda al usuario a iniciar la conversación con usted y puede crear diferentes mensajes según sus necesidades, por ejemplo, en una página de contacto. puede decir: "Hola, necesito ayuda", en la página de un producto puede decir: "Hola, estoy viendo el producto XYZ en su sitio web y me gustaría obtener más información", tenga en cuenta que, con mensajes ya preparados, incluso puede Sepa de dónde vino el cliente y qué estaba buscando, así que veamos algunos otros ejemplos:

  1. Hola.
  2. Hola, buenos días/buenas tardes.
  3. Hola, estoy en su sitio web y me gustaría obtener más información.
  4. ¿Puedo hablar del sector comercial?
  5. Me gustaría concertar una cita.
  6. Necesito ayuda.
  7. ¿Cuál es el valor del producto?

Herramientas Relacionadas