Reemplazá tu botón actual por una versión personalizada compatible con el seguimiento de Chatty.
Limpieza previa
Antes de tocar código, evitá conflictos visuales o de funcionalidad:
Andá a Configuración → Aplicaciones y canales de ventas.
Buscá cualquier app de WhatsApp Button o Floating Chat que estés usando.
Desinstalala.
💡 Si usás esa app para otras funciones, alcanza con desactivar solo el botón flotante dentro de sus ajustes.
Crear el componente del botón
Andá a Tienda online → Temas, en tu tema actual hacé clic en … → Editar código. En la columna izquierda bajá hasta Snippets y hacé clic en Agregar un nuevo snippet.
Nombralo exactamente whatsapp-button para que coincida con el código del paso siguiente, y pegá adentro de whatsapp-button.liquid:
<style>
#whatsapp-button {
position: fixed;
bottom: 25px;
right: 25px;
width: 60px;
height: 60px;
background-color: #25D366;
color: #FFF;
border-radius: 50%;
border: none;
outline: none;
cursor: pointer;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
padding: 0;
-webkit-appearance: none;
}
#whatsapp-button:hover { background-color: #20BA5A; transform: scale(1.1); }
#whatsapp-button svg { width: 35px; height: 35px; fill: white; pointer-events: none; }
</style>
<button id="whatsapp-button" type="button" aria-label="Contactar por WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 …"/>
</svg>
</button>
El path del SVG es el ícono oficial de WhatsApp de Font Awesome; copialo completo desde la documentación.
Renderizar el botón e instalar el pixel
En el editor de código, abrí Layout → theme.liquid, bajá hasta la etiqueta de cierre </body> y pegá justo antes:
{% render 'whatsapp-button' %}
<script>
var chattyPixelConfig = {
displayPhoneNumber: '{{tu numero}}',
buttons: [
{
id: '#whatsapp-button',
name: '{{general web}}',
topicId: '{{topicId}}'
}
]
}
</script>
<script src="https://chatty-analytics-pixel.s3.us-east-1.amazonaws.com/chatty_pixel_v6.1.1.js"></script>
⚠️ Reemplazá los textos entre llaves {{…}} por tus datos reales antes de guardar. Si los dejás como están, el pixel no va a poder identificar nada.
Guardar y probar
Hacé clic en Guardar arriba a la derecha.
Visitá tu tienda: vas a ver el botón verde flotando a la derecha.
Al hacer clic debería abrir WhatsApp con el smart message cargado, y el pixel registra el evento automáticamente.
Verificá en Chatty que el chat entrante llegue con la fuente correcta. Si entra sin fuente, revisá el topicId.
Podés repetir el bloque de buttons con varios objetos para trackear distintos botones del sitio por separado: uno en el home, otro en la ficha de producto, otro en el footer. Cada uno con su id, su name y su topicId.
Instalar el pixel en Shopify no requiere la integración de catálogo —son cosas distintas—, así que este paso a paso funciona hoy aunque la sincronización de productos con Shopify todavía no esté disponible.
← Fuentes y Smart MessagesSiguiente: API de Conversiones →
Integraciones