--- title: "Cómo Añadir un Botón de Chat de WhatsApp a Carrd (Guía 2026)" description: "Añade un botón de chat de WhatsApp a tu sitio Carrd con código para copiar y pegar: botón flotante, widget de chat y opciones multi-chat, con pasos de configuración y solución de problemas." date: 2026-01-21 categories: ["web-development"] tags: ["carrd","whatsapp"] --- import Button from "@components/widgets/Button.astro"; import { Picture } from "astro:assets"; import imag1 from "@assets/images/24/02/carrd-back-to-top-embed.png"; import Notice from "@components/widgets/Notice.astro"; import ListCheck from "@components/widgets/ListCheck.astro"; import Accordion from "@components/widgets/Accordion.astro"; import Tabs from "@components/widgets/Tabs.astro"; import Tab from "@components/widgets/Tab.astro"; Los formularios de contacto están bien, pero algunos visitantes quieren respuestas ahora. Un **botón de chat de WhatsApp** en tu sitio [Carrd](https://go.bitdoze.com/carrd) les permite escribirte al instante, sin salir de la página ni rellenar un formulario. Esto funciona bien para negocios de servicios, tiendas locales y freelancers que ya viven en WhatsApp. Los estilos de botón flotante y widget de chat de abajo son HTML y CSS puros con SVG en línea, así que no hay scripts de terceros que cargar. Una cosa de entrada: todas las opciones de aquí viven en un elemento Embed de Carrd, y eso requiere **Carrd Pro Standard o superior** (19 $/año). El plan gratuito y Pro Lite no pueden añadir código personalizado. Detalles abajo. ``` Edita el texto de la cabecera y el mensaje de vista previa ficticio para que coincida con lo que esperas responder. Si quieres el mismo patrón de mostrar/ocultar para otro contenido, aquí está cómo [añadir un modal emergente a Carrd](https://www.bitdoze.com/es/ventana-modal-emergente-carrd/). --- ## Opción 4: Botón Multi-Chat (WhatsApp + Otros) Si quieres ofrecer varias opciones de contacto: ```html
``` Sustituye `YOURNUMBER`, `YOURUSERNAME` y `your@email.com`. Úsalo cuando de verdad ofreces varios canales. Una nota operativa: cada canal que añades es otra bandeja de entrada que vigilar. --- ## Cómo Probar Tu Botón de WhatsApp Después de Publicar Los embeds de Carrd no renderizan nada en el editor, así que publicar es la única forma de ver el botón. Ejecuta esta checklist tú mismo después de cada publicación. Si el clic abre WhatsApp pero el texto del mensaje se ve roto, tu codificación de URL está mal (vuelve al Paso 1). Si no se renderiza nada en absoluto, la solución está casi siempre en la Solución de problemas de abajo. ## Personaliza Tu Botón de WhatsApp Pequeños ajustes de CSS y URL una vez el botón está en vivo. ### Cambiar la Posición Mueve el botón a otra esquina: ```css /* Bottom left */ .whatsapp-float { bottom: 25px; left: 25px; right: auto; } /* Top right */ .whatsapp-float { top: 25px; right: 25px; bottom: auto; } ``` Usa una de las dos reglas, y cambia `.whatsapp-float` por `.wa-button`, `.wa-widget` o `.chat-buttons` si elegiste la Opción 2, 3 o 4. Para la Opción 3 a la izquierda, voltea también el popup con `.wa-widget-popup { left: 0; right: auto; transform-origin: bottom left; }`. Sea cual sea la esquina que elijas, asegúrate de que no se superpone a los elementos flotantes propios de Carrd (mira el arreglo de solapamiento en Solución de problemas). ### Cambiar el Tamaño Ajusta las dimensiones del botón: ```css .whatsapp-float { width: 50px; /* Smaller */ height: 50px; } /* Or larger */ .whatsapp-float { width: 70px; height: 70px; } ``` Mantén al menos un área táctil de 48px en móvil. Por debajo de eso, los toques empiezan a fallar. ### Desactivar la Animación de Pulso Elimina el pseudo-elemento `::before` o pon `animation: none`: ```css .whatsapp-float::before { display: none; } ``` ### Mensaje Pre-rellenado Personalizado Personaliza lo que aparece cuando los visitantes abren el chat: ```text https://wa.me/12125551234?text=Hi!%20I'm%20interested%20in%20your%20web%20design%20services.%20My%20name%20is%20___ ``` Usa `%20` para espacios y `%0A` para saltos de línea. Dos trucos operativos que merecen la pena: pon tu horario de respuesta en el mensaje ("Suelo responder en menos de 2 horas") para fijar expectativas antes del primer mensaje, y etiqueta el origen ("te encontré en tu web") para saber qué canal convierte. ### Rastrear Clics (Opcional) Mídelo, o no sabrás si el botón se gana su sitio. Carrd Pro Standard ya incluye Analítica (Google Analytics, Plausible, Matomo y otros), así que el seguimiento no te cuesta nada extra en el plan que ya necesitas. Añade un atributo `onclick` a la etiqueta ``: ```html ``` ```html ``` ```html ``` ## Solución de Problemas: el Botón de WhatsApp No Funciona en Carrd Comprueba estos en orden. Los dos primeros resuelven la mayoría de casos. ### El botón no aparece en absoluto Causa: el Style del Embed no está en Hidden, tu plan no incluye Embeds (gratuito o Pro Lite), o guardaste sin republicar. Solución: pon el Embed en Type: Code, Style: Hidden, confirma que estás en Pro Standard o superior, publica de nuevo y fuerza la recarga de la página en vivo. Si sigue chocando con otro elemento fijo, las mismas reglas de apilado se aplican a un [menú flotante en Carrd](https://www.bitdoze.com/carrd-floating-menu/) o a un [header sticky en Carrd](https://www.bitdoze.com/add-stickey-header-carrd/). ### "Phone number shared via url is invalid" Causa: el número en el href de `wa.me` no está en formato internacional completo. Solución: quita `+`, espacios, guiones, paréntesis y ceros iniciales. `12125551234`, no `+1 (212) 555-1234`. Revisa cada href de `wa.me` si pegaste la opción multi-chat. ### El widget emergente no se abre (Opción 3) Causa: el script se ejecutó antes de que el DOM estuviera listo, o los IDs de los elementos no coinciden. Solución: usa el script con guarda de DOMContentLoaded de la Opción 3 y mueve el embed de Head a Body End. Mantén los IDs `waButton` y `waPopup` como en el snippet. Republica. ### El botón se solapa con otros elementos flotantes Causa: dos elementos fijos peleando por la misma esquina y `z-index`. Solución: baja el `z-index` de WhatsApp (por ejemplo `9999` → `999`) o muévelo a otra esquina (ver Cambiar la Posición). El mismo choque aparece con menús flotantes y headers sticky en Carrd. ## Consejo de Privacidad: Oculta Tu Número con un Enlace Corto de WhatsApp Business Un simple enlace wa.me/YOURNUMBER pone tu número de teléfono en el código fuente de la página. Los scrapers lo recogen, y deberías esperar algunas llamadas spam y mensajes de WhatsApp. No es un problema de Carrd, es cómo funciona el formato del enlace. Dos mitigaciones: 1. **Usa un número de negocio dedicado** en lugar de tu personal. SIM barata, cuenta de WhatsApp separada, separación limpia. 2. **Usa el enlace corto de WhatsApp Business** - `https://wa.me/message/YOURSHORTLINKCODE`, generado en las herramientas de empresa de la app gratuita WhatsApp Business (las etiquetas varían según la versión). No revela el número. Cambio de href directo para cualquiera de las cuatro opciones: ```html ``` Pierdes el mensaje pre-rellenado `?text=` con los enlaces cortos, así que elige: número oculto o mensaje pre-rellenado. Para la mayoría de los que trabajan en solitario, gana el mensaje pre-rellenado y el número ya está en la página de contacto de todos modos. Sobre el consentimiento de cookies: como este código es un simple `` con CSS y SVG en línea y sin JavaScript de terceros, en general no añade carga de cookies ni de consentimiento por sí mismo. Es orientación general, no asesoramiento legal. Si ejecutas scripts de analítica (incluidos los snippets de seguimiento de clics de arriba), eso es otra conversación y puede que necesites [un aviso de cookies en tu sitio Carrd](https://www.bitdoze.com/add-cookie-notice-carrd/). ## Botón de WhatsApp en Móvil vs Escritorio El botón funciona en ambos, pero la experiencia difiere: - **Móvil**: abre directamente la app de WhatsApp - **Escritorio**: abre WhatsApp Web en una pestaña nueva Si quieres mostrar el botón solo en móvil: ```css @media (min-width: 769px) { .whatsapp-float { display: none; } } ``` La Opción 2 ya se colapsa a un icono por debajo de 600px. Sea cual sea el estilo que uses, mantén el área táctil en al menos 48-60px para que los pulgares le den con fiabilidad. ## Consejos de Negocio: Respuestas Automáticas, FAQs y Más **El tiempo de respuesta importa** - Si añades un botón de chat, prepárate para responder rápido. Las respuestas lentas dan mala impresión. **Define horarios de disponibilidad** - Considera mencionar tus horas de respuesta en el mensaje pre-rellenado o en el widget emergente. **Usa WhatsApp Business** - La app gratuita WhatsApp Business ofrece mensajes de saludo, mensajes de ausencia, perfiles de empresa y catálogos. Solo el mensaje de ausencia te ahorra el estrés del "visto a las 2 de la madrugada". Desvía las preguntas repetitivas antes de que se conviertan en chats. Una [sección de FAQs en acordeón en Carrd](https://www.bitdoze.com/es/anadir-acordeon-faq-carrd/) responde las cinco preguntas que todo el mundo hace, o usa un [plugin de acordeón para Carrd ya hecho](https://go.carrdme.com/accordion) si no quieres escribir el código a mano. Y mantén un segundo canal activo para que WhatsApp no se convierta en la única bandeja de entrada: [añade un formulario de contacto a cualquier web estática](https://www.bitdoze.com/add-contact-form-static-websites/) como respaldo.