Your AI Connector Docs

Widget de WhatsApp

Integración del widget de WhatsApp

Añade un botón flotante de chat de WhatsApp a tu sitio web con esta sencilla guía.

Es bueno saberlo. El widget de WhatsApp es un sencillo botón de “clic para chatear”: al hacer clic en él, se abre WhatsApp para que el visitante pueda enviarte un mensaje desde allí. No lleva los mensajes a tu bandeja de entrada de Chats ni activa la IA por sí solo. Para disfrutar de una experiencia de chat con IA integrada en tu página web, utiliza en su lugar el Chat Widget independiente.

¿Solo quieres un enlace sencillo o tu propio botón? Si no quieres el widget flotante y prefieres enlazar tu propio botón (o un fragmento de texto) directamente a un chat de WhatsApp, salta a ¿Prefieres un enlace o botón sencillo? (wa.me) más abajo. Para ver el equivalente en SMS, consulta Añadir un enlace de clic para enviar SMS.

Instalación

  1. Abre el archivo HTML de tu sitio web en un editor de texto.
  2. Localiza la etiqueta </body> (normalmente al final de tu archivo HTML).
  3. Pega el siguiente script justo antes de la etiqueta </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  1. En el código anterior, sustituye:
    • NUMBER por tu número de WhatsApp
    • Por ejemplo: para el número +1 555 123 4567, simplemente usa: 15551234567

Añadir un mensaje personalizado

Si quieres que aparezca un mensaje prellenado cuando alguien haga clic en el botón:

  1. Utiliza este código en su lugar:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Ejemplo con un número y un mensaje reales:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

Qué obtienes

Tras la instalación, verás automáticamente:

  • Un botón verde de WhatsApp en la parte inferior derecha de tu sitio web
  • El botón permanece visible mientras haces scroll
  • El botón funciona perfectamente en dispositivos móviles
  • Una sutil animación aparece al pasar el cursor sobre el botón

Información adicional

  • Su número de teléfono puede escribirse con o sin:
    • Signo más (+)
    • Espacios
    • Guiones (-)
    • Estos se procesarán automáticamente de forma correcta
  • El mensaje puede contener espacios de forma natural
  • No se necesitan archivos ni instalaciones adicionales
  • El botón se adapta automáticamente a las pantallas móviles

Ejemplo de página web completa 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

¿Prefiere un enlace o botón sencillo? (wa.me)

El widget de arriba le ofrece un botón flotante listo para usar. Pero si ya tiene su propio botón (o un enlace de menú, imagen o fragmento de texto) y solo quiere que abra un chat de WhatsApp con su número, no necesita el widget en absoluto; simplemente vincúlelo a una URL wa.me.

El formato es:

https://wa.me/NUMBER

Reemplace NUMBER con su número completo en formato internacional: solo dígitos, sin signo más, espacios ni guiones. Por ejemplo, para +31 6 5801 5937 usaría:

https://wa.me/31658015937

Prellenar un mensaje

Para que aparezca un mensaje ya escrito cuando se abra el chat, añada ?text= seguido de su mensaje:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

Los espacios en el mensaje deben escribirse como %20 (así es como los enlaces gestionan los espacios).

Colocarlo en un botón

Vincule cualquier botón a esa URL, exactamente de la misma manera que vincularía un botón a cualquier otra dirección web. En HTML sin procesar se ve así:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

En un creador de sitios web (Wix, Squarespace, WordPress, Webflow, etc.), añada un botón como de costumbre y pegue la URL wa.me en su campo de “enlace” / “URL”.

¿Quieres un enlace corto que rote entre varios números, recuerde a los visitantes recurrentes y realice un seguimiento de los clics? Utiliza los enlaces cortos (en Ajustes → Canales) en lugar de una URL wa.me sin procesar.