Saltar al contenido
▸ Chatsac Tools

Guía de instalación · HTML

Código HTML para botón de WhatsApp: cómo instalarlo

Instala un botón flotante en un sitio HTML o constructor que permita JavaScript. Genera el código, colócalo antes de </body> y pruébalo en el teléfono.

Contenido revisado el 2 de octubre de 2026

Generar código del botón

Cómo funciona el botón

El botón abre una conversación en WhatsApp con el número y el mensaje que elijas. El visitante confirma el envío en WhatsApp. El widget no responde mensajes, asigna conversaciones ni conecta la API de WhatsApp.

HTML personalizado y ejecución de JavaScript son permisos diferentes. Si el editor acepta HTML pero bloquea scripts, esta opción no funcionará. Consulta la documentación de la plataforma antes de cambiar de plan.

Instalación paso a paso

  1. 1. Generar código del botón

    Escribe el número con código de país, prepara un mensaje breve y elige color, tamaño y posición. Revisa la vista previa y copia el código. La misma configuración sirve para las cuatro opciones de instalación.

  2. 2. Añade el script una sola vez

    En el archivo HTML, pega el snippet antes de </body>. En un constructor, busca el área de código del pie de página o inserción de JavaScript. En React u otro framework, usa el layout compartido y evita montar el widget otra vez en cada navegación.

  3. 3. Publica y prueba una conversación

    Después de publicar, abre la página en el teléfono y la computadora. Comprueba el código de país y el número, toca el botón y revisa el mensaje. Si el icono no aparece, revisa si el editor conservó el script y si la política de seguridad del sitio permite tools.chatsac.com.

Qué revisar antes de publicar

El editor elimina scripts

Revisa el HTML publicado, no solo el editor. Si el script fue eliminado, usa un área de código admitida por la plataforma y tu plan.

El icono tapa contenido u otro botón

Prueba ambas posiciones y los tres tamaños en el teléfono. Revisa banners de cookies, carrito y otros widgets. Si ya tienes otro botón de WhatsApp, elige cuál mantener.

Número o mensaje incorrectos

Incluye el código de país y utiliza un número que controles. No incluyas datos personales en el mensaje inicial. El visitante puede editar el borrador antes de enviarlo.

Preguntas frecuentes

¿El botón es gratis?

El generador y el widget son gratuitos e incluyen la marca Chatsac Tools. La plataforma del sitio puede limitar código personalizado según el plan o tus permisos.

¿Necesito la API de WhatsApp?

No. El botón usa un enlace wa.me para abrir WhatsApp. La automatización, varios agentes y las conexiones con CRM requieren un servicio separado.

¿El botón garantiza ventas o envía informes semanales?

No hay garantía de ventas. El servicio registra beacons de instalación y clic, que no demuestran el envío de un mensaje. Los informes semanales por correo todavía no están disponibles.

Documentación de la plataforma