Facilita el contacto.
A persistent button is available without sending visitors through the navigation or footer.
Generador de botones de chat de WhatsApp
Generador gratuito de botón de chat de WhatsApp
Cree un botón flotante de WhatsApp que permita a los visitantes de su sitio web iniciar una conversación con un solo clic. Introduzca su número de teléfono y un mensaje predefinido opcional, previsualice el resultado y copie el código HTML listo para pegar.
Un punto de acceso visible en el sitio web
¿Qué es un botón de chat de WhatsApp?
A WhatsApp chat button is a visible website link—usually fixed in a bottom corner—that opens a conversation with your business on WhatsApp. It removes the need for visitors to copy your number, save a contact, or search for a contact page.
El destino suele ser una URL de chat de WhatsApp:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">
Chat on WhatsApp
</a>
guía oficial de WhatsApp para iniciar chats confirms that a visitor can begin a chat without saving the number first and provides an official button example.
A WhatsApp button is not the same as live chat embedded inside a webpage. The website provides the entry point; the conversation continues in WhatsApp after the click.
Reducir la fricción en el contacto
¿Por qué añadir un botón de WhatsApp a tu sitio web?
Mantén activa la intención de compra.
Someone can ask about price, stock, delivery, or booking while looking at the relevant page.
Usa un canal familiar.
Mobile visitors can move from the website into the WhatsApp app they already use.
Da contexto a la consulta.
A useful prefilled message can identify the product, service, or campaign that prompted the click.
The button does not guarantee a reply or a sale. Its job is to reduce friction between interest on the website and the start of a conversation.
Cómo funciona
Cómo añadir un botón de WhatsApp a tu sitio web
Introduce tu número de WhatsApp.
Usa el número internacional completo conectado a WhatsApp.
Añade un mensaje prellenado.
Give the visitor a useful starting point, such as “Hi, I'm visiting your website and would like to ask about your services.”
Previsualiza el botón.
Check how the floating button will look alongside your website content.
Copia el HTML.
Generate and copy the code instead of writing the link and button markup yourself.
Pégalo y pruébalo.
Add the snippet to an area of your website that accepts HTML, save the change, and test it on desktop and mobile.
If you do not manage the website yourself, send the generated code to the person who maintains your theme or site template.
Mensajes predefinidos
Copie estos ejemplos de mensajes prediseñados
Redacte los mensajes desde la perspectiva del visitante y asegúrese de que el primer envío sea lo más sencillo posible.
Hola, estoy viendo [nombre del producto] en tu sitio. ¿Está disponible?
Hola, me interesa [servicio]. ¿Podrías explicar cómo funciona?
Hola, me gustaría solicitar un presupuesto para [servicio].
Hola, me gustaría reservar una cita. ¿Qué horarios hay disponibles?
Hola, necesito ayuda con un pedido que hice en tu sitio.
Avoid putting passwords, card details, health information, or other sensitive data into a prefilled message. The text becomes part of a shareable URL inside the button code.
Instalación
Cómo instalar el botón en las plataformas web más populares
Plain HTML
Paste the generated snippet into the shared page template, commonly near the closing </body> tag. Save the file, load the page, and test before applying the change across the whole site.
WordPress
Use an area that executes supported custom HTML, such as a suitable template or Custom HTML block. Available tags and site-wide code options can depend on the plan and hosting setup.
Shopify
Duplicate or back up the theme first. Add the snippet to the appropriate theme layout, preview the storefront, and confirm that it does not interfere with cart or checkout elements.
Wix, Squarespace, Webflow, and Framer
Use the platform's current custom-code or HTML-embed feature. Some builders restrict custom code by plan or placement.
WordPress Custom HTML instructions · Shopify theme-code precautions
Ubicación
¿Dónde deberías colocar el botón de WhatsApp?
La esquina inferior derecha es el espacio habitual para los controles de mensajería. Sin embargo, ubicarlo en la esquina inferior izquierda puede resultar más efectivo si el lado derecho ya incluye un carrito de compras, controles de accesibilidad, la configuración de cookies u otra herramienta de chat. Asegúrese de mantener una ubicación consistente y revise estas páginas de alta intención de compra:
Product pages
Help shoppers ask about availability, fit, delivery, or product differences.
Service pages
Let prospects explain their needs before requesting a quote.
Pricing pages
Answer the final question stopping someone from choosing a plan or package.
Booking pages
Help visitors clarify timing, location, or requirements.
Support pages
Offer WhatsApp alongside email and phone when appropriate.
Do not let the button cover checkout controls, navigation, form fields, mobile sticky bars, or privacy notices.
Resolución de problemas
¿Por qué no funciona mi botón de WhatsApp?
| Problema | Causa probable | What to check |
|---|---|---|
| The code appears as text | It was pasted into a text or code-display block | Use an area that executes permitted HTML |
| The button does not appear | The platform stripped the code or the snippet is in the wrong template | Check platform restrictions and placement |
| The wrong conversation opens | The phone number or country code is incorrect | Correct the number and regenerate the button |
| Part of the message is missing | The encoded link was edited manually | Generate a new snippet instead of changing the URL |
| The button covers another element | Multiple controls occupy the same corner | Change the placement or surrounding layout |
| It works on desktop but not mobile | Responsive styles hide it or another element overlaps it | Inspect mobile visibility and positioning |
| WhatsApp opens but sends nothing | Prefilled messages require visitor confirmation | Ask the visitor to press Send |
Clear website caches after changing the code, then test again in a private browser window if an old version still appears.
Antes de publicar
Pruebe el botón antes de publicar
Test the published installation on mobile and desktop. Confirm that:
✓The correct WhatsApp account opens.
✓The complete prefilled message appears.
✓The visitor still controls whether the message is sent.
✓It does not cover forms, product options, checkout controls, or consent notices.
✓WhatsApp Web or the expected desktop experience opens correctly.
✓The page remains usable at common mobile screen sizes.
Lista de verificación de diseño
Guía de diseño para el botón de WhatsApp
✓Use recognizable WhatsApp styling that still fits the website.
✓Maintain strong contrast between the icon, button, and page background.
✓Leave space between the button and the screen edge.
✓Give an icon-only button an accessible name such as “Chat on WhatsApp.”
✓Make the touch target easy to press on a phone.
✓Check whether cookie banners or other floating tools overlap it.
✓Avoid aggressive animation that distracts visitors from the page.
The button should be easy to notice without becoming the most disruptive element on the website.
Elija el formato adecuado
Botón, enlace o código QR de WhatsApp
| Formato | Mejor uso | What the visitor does |
|---|---|---|
| Botón de chat de WhatsApp | Sitios web y landing pages | Pulsa un botón permanente |
| Enlace de WhatsApp | Bios, emails, ads, and digital messages | Pulsa un enlace |
| Código QR de WhatsApp | Menus, packaging, posters, and screens | Escanea con el móvil |
All three can lead to the same phone number and message. Use the WhatsApp Link Generator for a shareable URL and the WhatsApp QR Code Generator for a code customers can scan.
Del clic a la conversación
Un botón inicia la transición, no la conversación
A website button can move an interested visitor into WhatsApp at exactly the right moment. What happens next determines whether that click becomes a useful enquiry—or another unanswered chat.
Dealism combines focused automation with an AI Customer Agent. Automation can handle consistent starting actions. The AI agent continues the actual conversation, answers questions using business information, understands intent, and guides the customer toward a suitable next step. A person can stay in control when judgment or personal attention is needed.
Explore Dealism for WhatsApp, read the practical guide to WhatsApp automation, or compare more WhatsApp marketing tools for small businesses.
Add the button for free. Connect WhatsApp to Dealism when you need help continuing every conversation.
Preguntas frecuentes
Preguntas frecuentes
Is the WhatsApp chat button generator free?+
Yes. Generate the button and copy its HTML without signing up.
Do I need WhatsApp Business?+
No. The button can link to a valid number registered on WhatsApp. It does not configure a WhatsApp Business account or API connection.
Will the button slow down my website?+
Any added code should be tested on the published page. The effect depends on the final snippet and the website, so this generator does not promise zero performance impact.
Can the button track clicks?+
The generated button should not be treated as a complete analytics product. If you need measurement, configure click tracking through your existing, consent-aware website analytics setup.
Can Dealism reply after someone clicks?+
The button only creates the entry point. After connecting a supported WhatsApp channel to Dealism, its automation and AI Customer Agent can help manage the conversation that follows.
Dealism responde en cuanto te escriben, conversa de forma natural y ayuda a cerrar oportunidades en segundo plano.
Comenzar ahora
Cada respuesta puede convertirse en una oportunidad.
Cada respuesta puede convertirse en una oportunidad.
Cada respuesta puede convertirse en una oportunidad.
