EveryChat

El botón de WhatsApp en tu web: dónde se pega el código en cada plataforma

Respuesta corta: el botón es un enlace a wa.me con tu número y el mensaje codificado, vestido con HTML y CSS — sin JavaScript. Se pega antes de la etiqueta </body> de todas las páginas; lo que cambia según la plataforma es cómo llegás ahí y qué te filtra el plan: en WordPress con un bloque «HTML personalizado» (WordPress.com gratuito quita el ícono), en Shopify en theme.liquid o en una sección «Liquid personalizado», en Tiendanube hay un botón nativo y el código propio va por FTP (no en «Códigos externos»), en Wix en Ajustes → Código personalizado pero solo con dominio conectado, y en HTML puro donde quieras. Generá tu código, elegí la pestaña de tu plataforma y seguí los pasos.

1. Armá tu código

Es el mismo generador que /boton/: valida el número según el país (la causa #1 de botones que «no funcionan» es un número mal escrito — el formato por país) y codifica el mensaje.

Si cambiás el mensaje por página («Hola, vi el producto X»), sabés desde dónde te escriben.
Ejemplo de código (completá el formulario para el tuyo) 
<!-- Botón de WhatsApp — generado con everychat.io -->
<a class="ec-wa-btn" href="https://wa.me/525512345678?text=Hola%2C%20vengo%20de%20tu%20p%C3%A1gina%20web" target="_blank" rel="noopener" aria-label="Chatear por WhatsApp"
   style="position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:10px;text-decoration:none;">
  
  <span style="display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 4px 12px rgba(0,0,0,.25);"><svg viewBox="0 0 32 32" width="30" height="30" fill="#fff" aria-hidden="true" focusable="false"><path d="M16 3C9.4 3 4 8.3 4 14.9c0 2.6.9 5 2.3 7L4 29l7.3-2.3c2 1.1 4.3 1.7 6.7 1.7 6.6 0 12-5.3 12-11.9S22.6 3 16 3zm0 21.7c-2.1 0-4.1-.6-5.8-1.6l-.4-.2-4.3 1.4 1.4-4.2-.3-.4a9.6 9.6 0 0 1-1.8-5.7C4.8 9.5 9.8 4.9 16 4.9s11.2 4.6 11.2 10.1S22.2 24.7 16 24.7zm5.5-7.5c-.3-.2-1.8-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1a8 8 0 0 1-2.4-1.5 9 9 0 0 1-1.6-2c-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.4.3-.6s0-.4 0-.6l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.6 5.7 5 3.3 1.4 3.3.9 3.9.9.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4l-.6-.3z"/></svg></span>
</a>

Sin JavaScript, sin llamadas a terceros, menos de 2 KB. La clase ec-wa-btn es para que midas los clics con tu analítica (ver abajo).

2. Pegalo en tu plataforma

Elegí la tuya. Cada pestaña dice el camino exacto de menús, qué limita tu plan y de dónde sale cada dato.

WordPress

Dónde: Bloque «HTML personalizado». En una página: el editor. En todo el sitio: Apariencia → Editor (tema de bloques) o Apariencia → Widgets (tema clásico).

Pasos

  1. Solo en una página o entrada: abrí el editor, hacé clic en + (o escribí /html en un párrafo vacío), elegí HTML personalizado, pegá el código y hacé clic en Actualizar. Con la vista «Vista previa» del bloque lo ves antes de publicar.
  2. En todo el sitio, tema de bloques (Twenty Twenty-Four, Twenty Twenty-Five y similares): Apariencia → Editor, abrí la parte de plantilla Pie de página (Footer), agregá un bloque HTML personalizado al final y guardá. Como el botón es position:fixed, da igual en qué parte del pie quede: flota sobre toda la página.
  3. En todo el sitio, tema clásico (Astra, GeneratePress, OceanWP…): Apariencia → Widgets, elegí un área de Pie de página, + → HTML personalizado, pegá y hacé clic en Actualizar. Si tu tema no tiene áreas de widgets, casi todos traen un campo «scripts del pie» en sus opciones; sirve igual.
  4. Guardá y recargá el sitio en el celular: el botón tiene que quedar abajo a la derecha, por encima de todo.

Límites y trampas

  • WordPress.com gratuito filtra el bloque HTML a una lista de etiquetas permitidas (a, div, span, img…): <script>, <style>, <iframe> y <svg> se borran al guardar. Nuestro botón no lleva JavaScript, así que sobrevive, pero sin el ícono: te queda el círculo verde vacío. Ahí conviene el botón inline con texto de más abajo (no depende del ícono) o, si tenés plan Premium o superior, el bloque nativo WhatsApp Button de WordPress.com (no existe en el plan gratuito ni en el Personal). Con cualquier plan con plugins («hosting features» activadas) no hay filtro.
  • WordPress.org (autoalojado): el código se guarda entero si lo pega un Administrador o Editor. Un Colaborador no tiene el permiso unfiltered_html y WordPress le quita <script> e <iframe> al guardar. Desde WordPress 7.0 el bloque tiene paneles separados de HTML, CSS y JavaScript; los dos últimos solo aparecen con ese permiso.
  • Si usás un plugin de caché (WP Rocket, LiteSpeed…), vaciá la caché después de pegar: si no, el botón tarda en aparecer y parece que «no funcionó».
Cambiar número o mensaje

Verificado el 10 de septiembre de 2026 en: WordPress.org — Documentación del bloque «Custom HTML» · WordPress.org — Site Editor (Apariencia → Editor) · WordPress.org — Editor de widgets por bloques (Apariencia → Widgets) · WordPress.com — Bloque Custom HTML y etiquetas permitidas por plan · WordPress.com — Qué código se puede agregar según el plan · WordPress.com — Bloque WhatsApp Button (planes Premium, Business y Commerce)

Shopify

Dónde: Sin tocar código: una sección o bloque «Liquid personalizado» desde Personalizar. Para todo el sitio: Tienda online → Temas → ⋯ → Editar código → layout/theme.liquid, antes de </body>.

Pasos

  1. Sin editar el tema (una página o una sección): en el panel de Shopify, Tienda online → Temas → Personalizar. En la página que quieras, Agregar sección (o «Agregar bloque» dentro de una sección) y buscá Liquid personalizado («Custom Liquid»). Pegá el código en el campo y guardá. Los temas gratuitos de Shopify (Dawn y su familia) traen esta sección; si el tuyo no la tiene, seguí con el paso siguiente.
  2. En todo el sitio: Tienda online → Temas, en tu tema activo hacé clic en ⋯ → Editar código. En la carpeta layout abrí theme.liquid, buscá la etiqueta </body> (casi al final) y pegá el código en la línea de arriba. Guardar.
  3. Antes de editar el tema, duplicalo (⋯ → Duplicar) y editá la copia: si algo se rompe, publicás el original y listo. El editor de código además guarda versiones anteriores de cada archivo en el panel Timeline.
  4. Comprobá en el celular y en la página de un producto: el botón no tiene que tapar el botón «Agregar al carrito» fijo que algunos temas ponen abajo. Si lo tapa, cambiá la posición a «izquierda» en el generador.

Límites y trampas

  • El campo Liquid personalizado acepta HTML y Liquid limitado, con un tope de 50 KB; nuestro botón pesa menos de 2 KB. Como la sección vive dentro de una página, si la querés en todas conviene pegarla en theme.liquid.
  • theme.liquid tiene que conservar {{ content_for_header }} y {{ content_for_layout }}: si los tocás sin querer, Shopify no te deja guardar el archivo. Pegá el botón después de content_for_layout, justo antes de </body>.
  • El checkout no se puede editar desde el tema (el layout checkout.liquid es exclusivo de Shopify Plus): el botón se ve en toda la tienda menos en el pago. Es lo normal en todas las plataformas.
  • No pudimos leer hoy el centro de ayuda de Shopify (help.shopify.com bloquea consultas automáticas), así que los nombres de menú de arriba salen de la referencia técnica de shopify.dev y de la interfaz en español, y pueden variar levemente con tu tema o idioma.
Cambiar número o mensaje

Verificado el 10 de septiembre de 2026 en: shopify.dev — Code editor: Online Store → Themes → … → Edit code · shopify.dev — Layouts: theme.liquid y content_for_layout · shopify.dev — Ajuste de tipo «liquid» (HTML + Liquid, máximo 50 KB) · shopify.dev — Theme editor: Online Store → Themes → Customize

Tiendanube

Dónde: Primero el botón nativo: Configuración → Botón de WhatsApp. Para código propio: Tienda online → Diseño → Editar el código (FTP), en la plantilla Layout.tpl. «Códigos externos» NO es el lugar.

Pasos

  1. Probá primero el botón nativo, que no necesita código: en el administrador, Configuración → Botón de WhatsApp → Informar teléfono, escribí tu número, dejá tildada la casilla «Mostrar un botón en tu tienda para que puedan escribirte por WhatsApp» y hacé clic en Agregar. Aparece en todas las páginas menos el checkout.
  2. Si necesitás nuestro código (un número de otro país, mensaje prellenado, tu propio texto o el botón dentro de una página): Tienda online → Diseño → Editar el código → Abrir FTP. Tiendanube te da usuario y contraseña; entrás con un cliente FTP (recomiendan FileZilla, transferencia en modo binario), abrís Layout.tpl y pegás el código antes de </body>.
  3. Alternativa sin FTP: una app del catálogo de Tiendanube con botón de WhatsApp configurable (la ayuda oficial nombra TITANPush, WhatsPRO, Chaty y Cliengo). Permiten otro código de país, horarios, varios números y elegir en qué páginas se muestra.
  4. Probá desde el celular en la ficha de un producto y en el inicio.

Límites y trampas

  • «Configuración → Códigos externos» no sirve para el botón: esa sección solo tiene campos para Google Analytics, Google Ads, el píxel de Facebook y «Otros códigos de conversión», y estos últimos se cargan únicamente en las páginas de fin de compra (/success/, /exit/, /pending/). Si pegás el botón ahí, aparece solo cuando el cliente ya pagó.
  • El botón nativo usa el código de país con el que registraste la tienda (Argentina, México, Colombia o Chile) y no se puede cambiar; para un número de otro país hay que ir por app o por FTP.
  • El FTP no está en todos los planes (buscá «Diseño 100 % flexible» en Planes y precios). Mientras el FTP esté abierto no podés cambiar de plantilla, no hay vista previa ni borrador (los cambios van directo a la tienda) y el checkout no se puede tocar.
  • Si tu tienda ya tiene diseño a medida (FTP abierto) y el botón nativo no aparece, la ayuda oficial indica que el desarrollador tiene que integrar la documentación técnica del botón en la plantilla.
Cambiar número o mensaje

Verificado el 10 de septiembre de 2026 en: Ayuda Tiendanube — ¿Cómo agregar el botón de WhatsApp en mi Tiendanube? (actualizado 27/07/2026) · Ayuda Tiendanube — ¿Cómo cambiar el prefijo telefónico para el botón de WhatsApp? · Ayuda Tiendanube — ¿Qué son y cómo configurar los códigos de conversión? (Configuración → Códigos externos) · Ayuda Tiendanube — ¿Cómo acceder al código de mi tienda para personalizar el diseño? (FTP) · Ayuda Tiendanube — ¿Qué tipo de cambios se pueden hacer sobre el diseño vía código?

Wix

Dónde: Panel de control → Ajustes → Código personalizado (Desarrollo e integraciones) → + Agregar código personalizado → Todas las páginas → Cuerpo - final.

Pasos

  1. En el panel de control de tu sitio (no en el editor), Ajustes → sección Desarrollo e integraciones → Código personalizado.
  2. + Agregar código personalizado, pegá el snippet, ponele un nombre («Botón WhatsApp»), en Agregar código a las páginas elegí Todas las páginas (cargar una vez por visita) y en Coloca el código en elegí Cuerpo - final. Aplicar.
  3. Publicá el sitio de nuevo si el editor te lo pide y probá en el celular.
  4. Sin dominio propio (sitio en usuario.wixsite.com): el código personalizado no está disponible. La única vía es el elemento Agregar elementos → Código incrustado → Incrustaciones populares → Incrustar HTML desde el editor, pegando el código en Ingresar código. Es un iframe, así que usá el botón inline de esta guía y dale al elemento el tamaño del botón: el flotante quedaría preso dentro del recuadro.

Límites y trampas

  • Wix exige que el sitio esté publicado y con un dominio conectado para usar «Código personalizado», y conectar un dominio requiere un plan Premium (o de Wix Studio). En el plan gratuito no hay dónde pegar código para todo el sitio: solo el elemento «Incrustar HTML» página por página.
  • El elemento «Incrustar HTML» es un iframe: el contenido no puede flotar sobre la página ni adaptarse al ancho, y solo acepta código y URLs con HTTPS.
  • Los fragmentos quedan atados al dominio: si cambiás el dominio del sitio, Wix los borra y hay que volver a pegarlos.
  • Desde diciembre de 2025 Wix aplica medidas de seguridad nuevas al código personalizado y algunos fragmentos de terceros pueden quedar bloqueados. El nuestro no carga scripts ni recursos externos, que es justamente lo que se bloquea.
  • Para medir clics, no cargues Google Analytics o Tag Manager por código personalizado: Wix indica que esos scripts no funcionan por esa vía y hay que conectarlos desde Integraciones de marketing.
Cambiar número o mensaje

Verificado el 10 de septiembre de 2026 en: Centro de ayuda de Wix — Editor de Wix: incrustar código personalizado en tu sitio · Centro de ayuda de Wix — Editor de Wix: incrustar un sitio o un widget (elemento HTML/iframe) · Centro de ayuda de Wix — Asignar un dominio a tu sitio (requiere plan Premium o Wix Studio)

HTML puro

Dónde: En el archivo de cada página (o en la plantilla/pie compartido), justo antes de </body>.

Pasos

  1. Abrí el archivo HTML de la página (o la plantilla que comparten todas: footer.html, layout.html, el _layout de tu generador estático) y pegá el código en la línea anterior a </body>.
  2. Si tu sitio tiene varias páginas sin plantilla común, pegalo en cada una: el código es el mismo. Los generadores estáticos (Astro, Hugo, Jekyll, Eleventy, Next…) tienen un layout base; con pegarlo ahí una vez alcanza.
  3. Para un botón dentro del contenido (ficha de producto, página de contacto), usá la variante inline en el lugar exacto del texto.
  4. Subí el archivo y probá el link desde otro teléfono: tiene que abrir el chat con tu nombre y el mensaje ya escrito.

Límites y trampas

  • Si tu sitio manda una cabecera Content-Security-Policy estricta sin style-src 'unsafe-inline', los estilos en línea del botón no se aplican. Solución: movés los estilos a tu hoja CSS con la clase ec-wa-btn (que ya viene en el snippet) y borrás los atributos style.
  • Nada más. Es HTML y CSS: no depende de librerías, versiones de framework ni permisos.
Cambiar número o mensaje

Flotante o inline: cuál usar

El flotante (position:fixed, abajo a la derecha) es el que la gente reconoce y está en toda la navegación sin que tengas que pensar dónde ponerlo. El inline vive dentro del contenido, como cualquier botón de la página, y sirve para tres cosas: un llamado a la acción específico («Consultar stock», «Pedir presupuesto») al lado de lo que se vende; plataformas donde no se puede flotar nada (el elemento «Incrustar HTML» de Wix es un iframe, WordPress.com gratuito borra el ícono); y páginas de contacto, donde un botón grande con texto rinde más que un círculo en la esquina. Se combinan sin problema. El inline sale así del generador (elegí «Inline» en «Tipo de botón»):

<!-- Botón de WhatsApp (inline) — generado con everychat.io -->
<a class="ec-wa-btn" href="https://wa.me/525512345678?text=Hola%2C%20vengo%20de%20tu%20p%C3%A1gina%20web" target="_blank" rel="noopener" aria-label="Escribinos por WhatsApp (abre WhatsApp)"
   style="display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border-radius:999px;background:#25D366;color:#fff;font:600 16px/1 sans-serif;text-decoration:none;">
  <span style="display:flex;width:24px;height:24px;"><svg viewBox="0 0 32 32" width="24" height="24" fill="#fff" aria-hidden="true" focusable="false"><path d="M16 3C9.4 3 4 8.3 4 14.9c0 2.6.9 5 2.3 7L4 29l7.3-2.3c2 1.1 4.3 1.7 6.7 1.7 6.6 0 12-5.3 12-11.9S22.6 3 16 3zm0 21.7c-2.1 0-4.1-.6-5.8-1.6l-.4-.2-4.3 1.4 1.4-4.2-.3-.4a9.6 9.6 0 0 1-1.8-5.7C4.8 9.5 9.8 4.9 16 4.9s11.2 4.6 11.2 10.1S22.2 24.7 16 24.7zm5.5-7.5c-.3-.2-1.8-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1a8 8 0 0 1-2.4-1.5 9 9 0 0 1-1.6-2c-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.4.3-.6s0-.4 0-.6l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.6 5.7 5 3.3 1.4 3.3.9 3.9.9.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4l-.6-.3z"/></svg></span>
  <span>Escribinos por WhatsApp</span>
</a>

Dos cuidados con el flotante: que no tape el botón fijo de «Agregar al carrito» o de cookies que algunos temas ponen abajo (si pasa, cambiá la posición a izquierda), y que en pantallas chicas no quede encima del contenido que se lee (24 px de margen alcanzan).

Accesibilidad: que lo pueda usar cualquiera

Pestaña nueva, sin regalar la ventana

En el celular wa.me abre la app; en escritorio abre WhatsApp Web. Por eso el enlace lleva target="_blank": el visitante sigue con tu página abierta cuando termina de chatear. Y rel="noopener" evita que la pestaña nueva pueda acceder a la tuya a través de window.opener. Los navegadores actuales ya aplican noopener por defecto a los _blank; lo dejamos explícito porque no cuesta nada y cubre los viejos. No hace falta noreferrer: te quitaría de las estadísticas de referencia sin ganar nada. Y si te preguntás por qué el botón usa wa.me y no api.whatsapp.com o whatsapp://: la comparación de los esquemas y cuál va en cada canal.

Cómo medir los clics (con tu analítica, no la nuestra)

El código no llama a ningún servidor y EveryChat no ve ni cuenta los clics de tu botón. Lo que sí trae es un gancho: la clase ec-wa-btn en el enlace. Con eso medís con lo que ya uses:

Checklist antes de dar por terminado

  1. El link empieza con https://wa.me/ + código de país + número, sin +, espacios ni el prefijo troncal (tabla por país).
  2. El mensaje aparece codificado (%20 en vez de espacios). El generador lo hace; no lo edites a mano.
  3. Pegado antes de </body> en una plantilla común, o en todas las páginas.
  4. Después de guardar, el código sigue entero: mirá que el <svg> no haya desaparecido (WordPress.com gratuito) y que la caché esté vaciada.
  5. Probado desde otro teléfono: abre el chat con tu nombre y el mensaje ya escrito. Y en escritorio abre WhatsApp Web en una pestaña nueva.
  6. No tapa el botón de carrito, el aviso de cookies ni el chat de otra app. Si tu plataforma ya tiene botón nativo (Tiendanube; WordPress.com en planes Premium o superiores), no dupliques: dos botones de WhatsApp confunden.

¿El botón está pero al tocarlo el chat no abre? Casi siempre es el número: «Mi link de WhatsApp no funciona» lo diagnostica por país.

Fuentes

Todos los caminos de menú de esta guía fueron leídos en la documentación oficial de cada plataforma el 10 de septiembre de 2026; los enlaces exactos están al pie de cada pestaña. En resumen: WordPress.org (bloque Custom HTML, Site Editor, editor de widgets por bloques), WordPress.com (Custom HTML block y «Code», última revisión 11–12 de agosto de 2026), shopify.dev (code editor, layouts, ajustes de tipo liquid, theme editor), Ayuda Tiendanube (botón de WhatsApp, actualizado 27/07/2026; códigos de conversión, 07/08/2026; FTP, 03/07/2026) y el Centro de ayuda de Wix (código personalizado, incrustar HTML, asignar dominio). El centro de ayuda de Shopify (help.shopify.com) bloqueó la consulta automática, así que los nombres de menú de Shopify se toman de shopify.dev y se redactan en condicional donde no estaban ahí. Los criterios de tamaño táctil son los de WCAG 2.2 (2.5.8 y 2.5.5).

Verificado el 10 de septiembre de 2026. Las plataformas cambian sus menús sin avisar: si algo no coincide, escribinos y lo corregimos. EveryChat no está afiliado a Meta, Automattic, Shopify, Tiendanube ni Wix.

Preguntas frecuentes

¿Dónde se pega el código del botón de WhatsApp?

Siempre en el mismo lugar lógico: antes de la etiqueta de cierre de todas las páginas. Lo que cambia es cómo llegás ahí: en WordPress con un bloque «HTML personalizado» en el pie (Apariencia → Editor o Apariencia → Widgets), en Shopify en layout/theme.liquid (Tienda online → Temas → ⋯ → Editar código) o con una sección «Liquid personalizado», en Wix en Ajustes → Código personalizado → Cuerpo - final, en Tiendanube vía FTP en Layout.tpl (o usás su botón nativo en Configuración → Botón de WhatsApp) y en HTML puro en el archivo o la plantilla.

¿El botón necesita JavaScript?

No. El código que genera EveryChat es HTML y CSS en línea: un enlace a wa.me con el ícono en SVG. Por eso pasa los filtros de la mayoría de las plataformas, que borran