Cómo Añadir un Botón de Chat de WhatsApp a Carrd (Guía 2026)
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.
Actualizado Publicado 47 min de lectura
Los formularios de contacto están bien, pero algunos visitantes quieren respuestas ahora. Un botón de chat de WhatsApp en tu sitio 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.
Carrd.coAlgunos tutoriales de Carrd:
- Añadir un Modal Emergente a Carrd
- Añadir Scroll Suave a Carrd
- Añadir un Alternador de Modo Oscuro a Carrd
- Añadir un Menú Flotante a Carrd
- Añadir un Menú Lateral a Carrd
- Análisis de Carrd.co
La lista completa con plugins, temas y tutoriales de Carrd la encuentras en mi sitio carrdme.com.
Por Qué Añadir un Botón de WhatsApp a Tu Sitio Carrd
Algunas razones por las que funciona:
-
Conexión instantánea - Los visitantes pueden escribirte de inmediato en lugar de esperar una respuesta por email.
-
Mayor conversión - La gente es más propensa a contactar cuando es así de fácil.
-
Amigable con el móvil - WhatsApp ya está en su teléfono. Un toque y están chateando.
-
Mensajes pre-rellenados - Puedes definir un mensaje por defecto para que los visitantes no tengan que pensar qué escribir.
-
Alcance global - WhatsApp tiene más de 3.000 millones de usuarios mensuales (a fecha de 2025). En muchos países es la forma principal de escribir a un negocio.
Un simple botón flotante cubre la mayoría de casos. Si quieres un “widget de chat de WhatsApp para Carrd” con una vista previa del mensaje antes de que se abra el chat, la Opción 3 de abajo está hecha para eso. Los negocios de servicios, tiendas locales y freelancers suelen sacarle más partido.
Qué Necesitas Antes de Empezar
Esta es la lista corta. El requisito del plan es el que bloquea a la gente, así que va primero.
- Una cuenta de Carrd en Pro Standard o superior (19 $/año) - Los Embeds no están en el plan gratuito ni en Pro Lite
- Tu número de WhatsApp en formato internacional (código de país, sin ceros delante)
- La app de WhatsApp en tu teléfono, o WhatsApp Web, para probar la entrega del chat
- Opcional: la app gratuita WhatsApp Business si quieres mensajes de saludo y un enlace corto que oculta el número
Necesitas Carrd Pro Standard o superior
El elemento Embed que se usa en todas las opciones requiere Pro Standard (19 $/año) o superior. El plan gratuito y Pro Lite (9 $/año) no pueden añadir código personalizado, así que un botón de WhatsApp no es posible en esos planes. Precios verificados contra carrd.com/pro en septiembre de 2026.
| Plan | Precio | Sitios | Qué incluye |
|---|---|---|---|
| Pro Lite | 9 $/año | 3 | Sin Embeds |
| Pro Standard | 19 $/año | 10 | Embeds, Widgets, Formularios, Analítica, Meta Tags |
| Pro Plus | 49 $/año | 25 | Todo lo de Standard más Ajustes Avanzados, Protección por Contraseña, Framing |
Pro Standard es la elección por defecto: 19 $/año sale a unos 1,60 $/mes, y te da Embeds más Analítica (útil para el snippet de seguimiento de clics de más adelante). No pagaría Pro Plus solo por un botón de chat. Para el desglose completo de planes, mira los planes y precios de Carrd Pro.
Consigue Carrd ProCómo Añadir un Botón de WhatsApp a Carrd
Tres pasos: crea tu enlace wa.me, añade un elemento Embed, pega uno de los cuatro estilos de código de abajo. Todo es HTML, CSS y SVG en línea. Sin script de widget, sin fuente externa y (en general) sin carga extra de consentimiento de cookies por el propio código.
Paso 1: Consigue Tu Enlace de Chat de WhatsApp (wa.me)
El formato de enlace click-to-chat de WhatsApp es:
https://wa.me/YOURNUMBERSustituye YOURNUMBER por tu número de teléfono en formato internacional, sin +, espacios ni guiones. Por ejemplo:
- Número de EE. UU.:
12125551234 - Número de Reino Unido:
447911123456
Para añadir un mensaje pre-rellenado:
https://wa.me/YOURNUMBER?text=Hi,%20I%20found%20you%20on%20your%20websiteLos espacios deben ser %20 en las URLs. Usa %0A para los saltos de línea.
El formato del número de teléfono es el fallo nº 1
Sin +, espacios, guiones, paréntesis ni ceros iniciales. 12125551234, no +1 (212) 555-1234. WhatsApp rechaza cualquier otra cosa con “phone number shared via url is invalid”.
Dos variantes oficiales más, ambas documentadas en la página de ayuda de click to chat de WhatsApp:
- Enlace sin número para elegir chat -
https://wa.me/?text=Hi!%20Quick%20questionabre WhatsApp y deja que el visitante elija a quién enviarlo. - Enlace corto de WhatsApp Business -
https://wa.me/message/YOURSHORTLINKCODEoculta tu número de teléfono del código fuente de la página. Lo cubro en detalle en la sección de privacidad de abajo.
wa.me es el único formato en la documentación oficial actual. No uses los antiguos enlaces api.whatsapp.com/send?phone=, ya no están documentados. Conviene revisar la página oficial de click-to-chat de vez en cuando por si WhatsApp cambia el formato.
Paso 2: Añade un Elemento Embed en Carrd
Esto requiere Pro Standard o superior. Haz clic en el signo + y añade un elemento Embed:
- Type: Code
- Style: Hidden
Hidden tiene tres ubicaciones en el Carrd actual: Head, Body Top y Body End. Regla general:
- Body End - las cuatro opciones. Cada una incluye marcado visible (un
<a>o<div>), que pertenece al body de la página, y el script de la Opción 3 consulta el DOM, así que conviene que el marcado del widget ya esté parseado - Head - solo para snippets de
<style>puros, como el CSS de personalización de más abajo si lo mantienes en un embed aparte - Body Top - disponible, no hace falta aquí
Si el panel de elementos se está llenando, Carrd lanzó un Elements Panel en agosto de 2026 (More Actions → Elements) que facilita encontrar el código embebido en el editor.
No se verá nada en el editor
El elemento Embed no mostrará nada en el editor de Carrd. Es lo esperado. Publica el sitio y abre la URL en vivo para ver el botón. Si pegas código y “no pasa nada”, es que aún no has publicado.
Paso 3: Elige el Estilo de Tu Botón
Cuatro opciones de copiar y pegar abajo. Elige una, pégala en el campo Code del Embed, sustituye YOURNUMBER (o los otros marcadores) y publica.
Opción 1: Botón Flotante de WhatsApp Simple
Un botón de WhatsApp limpio que flota en la esquina. Es mi elección por defecto: la menor huella, un enlace, nada que mantener. Si no aparece después de publicar, salta a Solución de problemas.
<style>
.whatsapp-float {
position: fixed;
bottom: 25px;
right: 25px;
width: 60px;
height: 60px;
background-color: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
z-index: 9999;
transition: all 0.3s ease;
text-decoration: none;
}
.whatsapp-float:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.whatsapp-float svg {
width: 32px;
height: 32px;
fill: white;
}
/* Pulse animation */
.whatsapp-float::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #25D366;
border-radius: 50%;
z-index: -1;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
70% {
transform: scale(1.3);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/* Hide on desktop if you only want mobile */
/*
@media (min-width: 769px) {
.whatsapp-float {
display: none;
}
}
*/
</style>
<a href="https://wa.me/YOURNUMBER?text=Hi,%20I%20found%20you%20on%20your%20website" class="whatsapp-float" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16.004 0h-.008C7.174 0 0 7.176 0 16c0 3.5 1.128 6.744 3.046 9.378L1.054 32l6.826-2.192A15.915 15.915 0 0016.004 32C24.826 32 32 24.822 32 16S24.826 0 16.004 0zm9.35 22.614c-.396 1.116-1.956 2.042-3.216 2.312-.864.184-1.99.33-5.786-1.244-4.858-2.014-7.984-6.952-8.226-7.274-.232-.322-1.958-2.606-1.958-4.972s1.238-3.528 1.678-4.012c.396-.436 1.036-.636 1.65-.636.198 0 .376.01.536.018.44.02.66.046.95.734.364.864 1.25 3.05 1.36 3.272.11.222.184.482.036.772-.138.3-.208.486-.416.748-.208.262-.438.584-.626.784-.208.24-.424.5-.182.98.242.48 1.076 1.774 2.312 2.874 1.588 1.414 2.926 1.852 3.342 2.058.416.206.658.172.9-.104.252-.286 1.072-1.248 1.358-1.676.276-.428.562-.356.95-.214.39.144 2.476 1.168 2.9 1.38.424.214.706.322.81.498.104.176.104 1.022-.292 2.138z"/>
</svg>
</a>Importante: Sustituye YOURNUMBER por tu número de teléfono real (p. ej., 12125551234).
El aria-label="Chat on WhatsApp" coincide con el ejemplo de etiqueta accesible de los snippets HTML oficiales de WhatsApp. Consérvalo: el botón es solo un icono, así que los lectores de pantalla lo necesitan.
Si además quieres un control de volver arriba, el patrón es casi idéntico. Mira cómo añadir un botón de volver arriba a Carrd (la captura del embed de ese tutorial es la usada en el Paso 2).
Opción 2: Botón con Texto
Un botón que muestra el texto “Chat with us” al pasar el ratón. Se colapsa a un icono por debajo de 600px.
<style>
.wa-button {
position: fixed;
bottom: 25px;
right: 25px;
display: flex;
align-items: center;
gap: 12px;
background: #25D366;
padding: 15px 20px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 9999;
transition: all 0.3s ease;
}
.wa-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.wa-button svg {
width: 28px;
height: 28px;
fill: white;
flex-shrink: 0;
}
.wa-button-text {
color: white;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
/* Collapse to icon only on mobile */
@media (max-width: 600px) {
.wa-button {
padding: 15px;
border-radius: 50%;
}
.wa-button-text {
display: none;
}
}
</style>
<a href="https://wa.me/YOURNUMBER?text=Hi,%20I'm%20interested%20in%20your%20services" class="wa-button" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16.004 0h-.008C7.174 0 0 7.176 0 16c0 3.5 1.128 6.744 3.046 9.378L1.054 32l6.826-2.192A15.915 15.915 0 0016.004 32C24.826 32 32 24.822 32 16S24.826 0 16.004 0zm9.35 22.614c-.396 1.116-1.956 2.042-3.216 2.312-.864.184-1.99.33-5.786-1.244-4.858-2.014-7.984-6.952-8.226-7.274-.232-.322-1.958-2.606-1.958-4.972s1.238-3.528 1.678-4.012c.396-.436 1.036-.636 1.65-.636.198 0 .376.01.536.018.44.02.66.046.95.734.364.864 1.25 3.05 1.36 3.272.11.222.184.482.036.772-.138.3-.208.486-.416.748-.208.262-.438.584-.626.784-.208.24-.424.5-.182.98.242.48 1.076 1.774 2.312 2.874 1.588 1.414 2.926 1.852 3.342 2.058.416.206.658.172.9-.104.252-.286 1.072-1.248 1.358-1.676.276-.428.562-.356.95-.214.39.144 2.476 1.168 2.9 1.38.424.214.706.322.81.498.104.176.104 1.022-.292 2.138z"/>
</svg>
<span class="wa-button-text">Chat with us</span>
</a>El aria-label importa aún más aquí: una vez el texto se colapsa en móvil, la etiqueta es el único nombre accesible que queda.
¿Prefieres el botón oficial?
WhatsApp publica recursos de botón con marca “Chat on WhatsApp” (verde y blanco, 3 tamaños, descargas en SVG y PNG) con directrices de marca, además de ejemplos HTML oficiales. Por ahora solo están en inglés. El SVG en línea personalizado de este tutorial es más ligero y te permite cambiar la etiqueta. Los recursos oficiales están en la página de ayuda de click to chat.
Opción 3: Widget de Chat de WhatsApp Expandible
Un botón que se expande para mostrar una vista previa del mensaje antes de abrir WhatsApp. Es la opción más pesada de las cuatro (más marcado y CSS), pero vende mejor la conversación porque los visitantes ven una invitación antes de decidirse.
Pega este embed en Body End (ver Paso 2). El script de abajo espera al DOM y sale limpiamente si falta el botón o el popup, así que funciona en cualquiera de las dos ubicaciones. Body End sigue siendo la ubicación más segura, ya que el marcado del widget está garantizado a estar parseado primero.
<style>
.wa-widget {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wa-widget-button {
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
transition: all 0.3s;
}
.wa-widget-button:hover {
transform: scale(1.05);
}
.wa-widget-button svg {
width: 32px;
height: 32px;
fill: white;
}
.wa-widget-popup {
position: absolute;
bottom: 75px;
right: 0;
width: 320px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
overflow: hidden;
transform: scale(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
.wa-widget-popup.active {
transform: scale(1);
}
.wa-widget-header {
background: #075E54;
color: white;
padding: 20px;
}
.wa-widget-header h4 {
margin: 0 0 5px 0;
font-size: 18px;
}
.wa-widget-header p {
margin: 0;
font-size: 13px;
opacity: 0.9;
}
.wa-widget-body {
padding: 20px;
background: #ECE5DD;
}
.wa-widget-message {
background: white;
padding: 12px 15px;
border-radius: 8px;
border-top-left-radius: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
position: relative;
margin-bottom: 15px;
}
.wa-widget-message::before {
content: '';
position: absolute;
top: 0;
left: -8px;
border: 8px solid transparent;
border-right-color: white;
border-top-color: white;
}
.wa-widget-message p {
margin: 0;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.wa-widget-time {
font-size: 11px;
color: #999;
text-align: right;
margin-top: 5px;
}
.wa-widget-cta {
display: block;
width: 100%;
padding: 15px;
background: #25D366;
color: white;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: background 0.2s;
}
.wa-widget-cta:hover {
background: #20bd5a;
}
@media (max-width: 400px) {
.wa-widget-popup {
width: 280px;
right: -10px;
}
}
</style>
<div class="wa-widget">
<div class="wa-widget-popup" id="waPopup">
<div class="wa-widget-header">
<h4>Need help?</h4>
<p>Typically replies within minutes</p>
</div>
<div class="wa-widget-body">
<div class="wa-widget-message">
<p>Hi there! 👋 How can I help you today?</p>
<div class="wa-widget-time">Just now</div>
</div>
</div>
<a href="https://wa.me/YOURNUMBER?text=Hi,%20I%20have%20a%20question" class="wa-widget-cta" target="_blank" rel="noopener">
Start Chat
</a>
</div>
<button class="wa-widget-button" id="waButton" aria-label="Open WhatsApp chat">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16.004 0h-.008C7.174 0 0 7.176 0 16c0 3.5 1.128 6.744 3.046 9.378L1.054 32l6.826-2.192A15.915 15.915 0 0016.004 32C24.826 32 32 24.822 32 16S24.826 0 16.004 0zm9.35 22.614c-.396 1.116-1.956 2.042-3.216 2.312-.864.184-1.99.33-5.786-1.244-4.858-2.014-7.984-6.952-8.226-7.274-.232-.322-1.958-2.606-1.958-4.972s1.238-3.528 1.678-4.012c.396-.436 1.036-.636 1.65-.636.198 0 .376.01.536.018.44.02.66.046.95.734.364.864 1.25 3.05 1.36 3.272.11.222.184.482.036.772-.138.3-.208.486-.416.748-.208.262-.438.584-.626.784-.208.24-.424.5-.182.98.242.48 1.076 1.774 2.312 2.874 1.588 1.414 2.926 1.852 3.342 2.058.416.206.658.172.9-.104.252-.286 1.072-1.248 1.358-1.676.276-.428.562-.356.95-.214.39.144 2.476 1.168 2.9 1.38.424.214.706.322.81.498.104.176.104 1.022-.292 2.138z"/>
</svg>
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const waButton = document.getElementById('waButton');
const waPopup = document.getElementById('waPopup');
if (!waButton || !waPopup) return;
waButton.addEventListener('click', () => waPopup.classList.toggle('active'));
document.addEventListener('click', (e) => {
if (!e.target.closest('.wa-widget')) waPopup.classList.remove('active');
});
});
</script>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.
Opción 4: Botón Multi-Chat (WhatsApp + Otros)
Si quieres ofrecer varias opciones de contacto:
<style>
.chat-buttons {
position: fixed;
bottom: 25px;
right: 25px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 9999;
}
.chat-btn {
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
position: relative;
transition: all 0.3s;
transform: scale(0);
animation: popIn 0.3s ease forwards;
}
.chat-btn:nth-child(1) { animation-delay: 0s; }
.chat-btn:nth-child(2) { animation-delay: 0.1s; }
.chat-btn:nth-child(3) { animation-delay: 0.2s; }
@keyframes popIn {
to {
transform: scale(1);
}
}
.chat-btn:hover {
transform: scale(1.1) !important;
}
.chat-btn svg {
width: 28px;
height: 28px;
fill: white;
}
.chat-btn.whatsapp {
background: #25D366;
}
.chat-btn.telegram {
background: #0088cc;
}
.chat-btn.email {
background: #ea4335;
}
/* Tooltip */
.chat-btn::before {
content: attr(data-tooltip);
position: absolute;
right: 65px;
background: #333;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.chat-btn:hover::before {
opacity: 1;
}
</style>
<div class="chat-buttons">
<a href="https://wa.me/YOURNUMBER?text=Hi" class="chat-btn whatsapp" target="_blank" rel="noopener" data-tooltip="WhatsApp" aria-label="Chat on WhatsApp">
<svg viewBox="0 0 32 32"><path d="M16.004 0h-.008C7.174 0 0 7.176 0 16c0 3.5 1.128 6.744 3.046 9.378L1.054 32l6.826-2.192A15.915 15.915 0 0016.004 32C24.826 32 32 24.822 32 16S24.826 0 16.004 0zm9.35 22.614c-.396 1.116-1.956 2.042-3.216 2.312-.864.184-1.99.33-5.786-1.244-4.858-2.014-7.984-6.952-8.226-7.274-.232-.322-1.958-2.606-1.958-4.972s1.238-3.528 1.678-4.012c.396-.436 1.036-.636 1.65-.636.198 0 .376.01.536.018.44.02.66.046.95.734.364.864 1.25 3.05 1.36 3.272.11.222.184.482.036.772-.138.3-.208.486-.416.748-.208.262-.438.584-.626.784-.208.24-.424.5-.182.98.242.48 1.076 1.774 2.312 2.874 1.588 1.414 2.926 1.852 3.342 2.058.416.206.658.172.9-.104.252-.286 1.072-1.248 1.358-1.676.276-.428.562-.356.95-.214.39.144 2.476 1.168 2.9 1.38.424.214.706.322.81.498.104.176.104 1.022-.292 2.138z"/></svg>
</a>
<a href="https://t.me/YOURUSERNAME" class="chat-btn telegram" target="_blank" rel="noopener" data-tooltip="Telegram" aria-label="Message on Telegram">
<svg viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.015-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.751-.244-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.015 3.333-1.386 4.025-1.627 4.477-1.635.099-.002.321.023.465.141.121.1.154.234.169.334.016.1.035.323.02.498z"/></svg>
</a>
<a href="mailto:[email protected]" class="chat-btn email" data-tooltip="Email" aria-label="Send an email">
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
</a>
</div>Sustituye YOURNUMBER, YOURUSERNAME y [email protected]. Ú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.
- Publica el sitio desde el editor de Carrd
- Abre la URL en vivo en una ventana privada o de incógnito (evita rarezas de la vista previa y CSS en caché)
- Haz clic en el botón y confirma que el chat wa.me se abre con el texto pre-rellenado intacto
- Prueba en un teléfono real: confirma que la app de WhatsApp se abre y que el botón de 60px abajo a la derecha no tapa CTAs ni contenido
- Si usas un dominio personalizado, prueba en el dominio en vivo, no en la URL de staging. Mira cómo conectar un dominio personalizado a Carrd
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:
/* 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:
.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:
.whatsapp-float::before {
display: none;
}Mensaje Pre-rellenado Personalizado
Personaliza lo que aparece cuando los visitantes abren el chat:
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 <a>:
Plausible
<a href="https://wa.me/YOURNUMBER" onclick="plausible('WhatsApp Click')" ...>Google Analytics
<a href="https://wa.me/YOURNUMBER" onclick="gtag('event','whatsapp_click')" ...>Matomo
<a href="https://wa.me/YOURNUMBER" onclick="_paq.push(['trackEvent','Contact','WhatsApp Click'])" ...>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 o a un header sticky en 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
Tu número queda público al publicar
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:
- Usa un número de negocio dedicado en lugar de tu personal. SIM barata, cuenta de WhatsApp separada, separación limpia.
- 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:
<a href="https://wa.me/message/YOURSHORTLINKCODE" class="whatsapp-float" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">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 <a> 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.
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:
@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 responde las cinco preguntas que todo el mundo hace, o usa un plugin de acordeón para Carrd ya hecho 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 como respaldo.
Prueba Carrd.coPreguntas Frecuentes
¿Necesito un plan de pago de Carrd para un botón de WhatsApp?
Sí. El elemento Embed que contiene el código requiere Pro Standard o superior (19 $/año). El plan gratuito y Pro Lite (9 $/año) no incluyen Embeds. Mira los planes y precios de Carrd Pro para el desglose completo.
¿El botón de WhatsApp en sí es gratis?
Sí. Los enlaces click-to-chat de wa.me no cuestan nada y el código de este tutorial es HTML y CSS puro. La única pieza de pago es el plan de Carrd que necesitas para los Embeds.
¿Esto ralentizará mi sitio?
No. No hay script de widget de terceros. Cada opción es una etiqueta <a> en línea más un pequeño bloque CSS y un SVG en línea. El widget expandible (Opción 3) añade más marcado, y aun así es diminuto comparado con un widget de chat alojado.
¿Necesito WhatsApp Business?
No. Una cuenta normal de WhatsApp funciona bien con los enlaces wa.me. La app gratuita WhatsApp Business añade mensajes de saludo y ausencia, un perfil de empresa, catálogos y el enlace corto que oculta el número. Vale la pena instalarla si chateas con clientes a menudo.
¿Puedo usar esto en otros creadores de sitios?
Sí. Las cuatro opciones de código son HTML y CSS puros, así que funcionan en cualquier sitio que acepte código personalizado o bloques HTML. Solo los pasos de configuración del Embed son específicos de Carrd.
Conclusión
Un botón de WhatsApp elimina fricción entre los visitantes y el contacto. Todo el camino: Pro Standard, pegar el código, publicar, ejecutar la checklist de pruebas, y luego decidir si el enlace corto de Business le gana a los mensajes pre-rellenados en tu caso. Solo asegúrate de estar listo para atender los mensajes que lleguen.
Si quieres más opciones de contacto, combina esto con un formulario de contacto en cualquier web estática o un modal emergente.
