Instalación manual
Esta etiqueta es toda la integración. Sustituye la clave por la tuya, pégala una vez y no cambies nada más: ningún atributo en tus productos, ningún botón escrito por ti, ningún ID de producto.
<script
src="https://www.cabina.io/widget.iife.js"
crossorigin="anonymous"
async
data-api-key="cab_live_TU_CLAVE">
</script>No añadas el atributo integrity. La dirección del bundle no está versionada,
así que un hash fijado haría que el navegador rechazara el script en nuestra
siguiente publicación — en silencio, y sin que podamos avisarte.
Ponla en cualquier punto dentro de <head>, o justo antes de </body>. Las dos
opciones funcionan: el script es async y espera a la página por su cuenta.
Dónde pegarla, plataforma por plataforma
Shopify
Temas
En tu administración de Shopify ve a Tienda online → Temas.
Editar código
En tu tema activo abre el menú ⋯ y elige Editar código.
theme.liquid
Abre layout/theme.liquid.
Pega
Pega la etiqueta justo antes de la etiqueta </head> de cierre.
Guarda
Guarda. El cambio está activo de inmediato: no hay ningún tema que publicar.
Shopify emite una imagen Open Graph en cada página de producto, así que la prenda se encuentra sin que hagas nada más.
WooCommerce
En WooCommerce hay un plugin: hace él el trabajo de la etiqueta y sobrevive a los cambios de tema.
Descarga el plugin
Descarga cabina-woocommerce.zip . Necesita WordPress 6.5 o más reciente, con WooCommerce activo.
Sube
En WordPress ve a Plugins → Añadir nuevo → Subir plugin, elige el archivo, haz clic en Instalar ahora y luego en Activar.
Configura
Ve a Ajustes → Cabina y pega tu clave cab_live_…: la encuentras en el panel
de Cabina, en la página Instalación, pestaña WooCommerce.
Listo
El botón aparece en las páginas de producto. Nada que pegar en el tema.
Como alternativa, la etiqueta se pega en el tema:
Un plugin de snippets
En WordPress instala un plugin de snippets de código (WPCode, Code Snippets) — o usa tu tema hijo.
Crea el snippet
Crea un snippet que se ejecute en la cabecera del sitio y pega ahí la etiqueta.
O el tema hijo
Con un tema hijo, añádela a functions.php en el hook wp_head.
Comprueba
Guarda y abre una página de producto.
WooCommerce no emite og:image sin un plugin SEO. Cabina recurre entonces a
la imagen de la galería — mira La imagen de la prenda.
Wix
En Wix no se pega ninguna etiqueta: la app está en el Wix App Market, y es el único camino.
App Market
En tu panel de Wix abre el App Market y busca «Cabina».
Añade
Añade la app y autoriza el sitio: la clave API se configura sola, no copias nada.
Publica
Publica el sitio: en Wix nada está activo hasta que publicas. El botón aparece en las páginas de producto de Wix Stores, colocado por la app.
PrestaShop
En PrestaShop hay un módulo: hace el trabajo de la etiqueta por ti y sobrevive a un cambio de tema.
Descarga el módulo
Descarga cabina.zip . Funciona en PrestaShop 8 y 9.
Súbelo
En el back office ve a Módulos, haz clic en Subir un módulo y suelta el archivo.
Configura
Haz clic en Configurar y pega tu clave cab_live_…: la encontrarás en el
panel de Cabina, en la página Instalación, pestaña PrestaShop.
Listo
El botón aparece en tus páginas de producto. Nada que pegar en el tema, ninguna caché que vaciar.
Si prefieres no instalar módulos, la etiqueta se pega en el tema:
Tema y logotipo
Ve a Diseño → Tema y logotipo, y abre los archivos del tema (o usa FTP).
head.tpl
Abre templates/_partials/head.tpl en tu tema activo.
Pega
Pega la etiqueta antes del {/block} de cierre del bloque head.
Vacía la caché
Guarda y vacía la caché en Parámetros avanzados → Rendimiento.
Cualquier otro tema
Encuentra la plantilla
Encuentra la plantilla que produce el <head> de todas las páginas — el nombre
del archivo cambia según la plataforma.
Pega
Pega la etiqueta en cualquier punto dentro de <head>, o justo antes de
</body>.
Una sola vez
Pégala una sola vez. Una segunda copia se detiene sola y avisa en la consola, pero conviene quitarla igualmente.
Recarga
Recarga una página de producto.
Cabina no necesita ninguna variable de plantilla, ningún ID de producto y ningún
marcado adicional. Una etiqueta <script> es toda la integración.
Cómo saber que ha funcionado
Abre una página de producto. Cabina encuentra tu bloque de compra y coloca su botón justo debajo — tú no escribes ningún marcado para esto.
El botón toma su texto y su color de los ajustes de tu panel, y hereda la tipografía de tu tema.
¿Ningún botón? Abre la consola del navegador: Cabina dice por qué, en una línea. Ve a Solución de problemas.
Mover el botón
Cabina busca el bloque de compra con la lista de abajo, en orden, e inserta su botón justo después de la primera coincidencia.
| Punto de anclaje | Plataforma típica |
|---|---|
.product-form__buttons | Shopify |
form[action*="/cart/add"] .product-form__submit | Shopify |
form[action*="/cart/add"] | Shopify |
form.cart | WooCommerce |
.single_add_to_cart_button | WooCommerce |
.product-add-to-cart | PrestaShop |
#add-to-cart-or-refresh | PrestaShop |
En un tema a medida normalmente no coincide ninguno. Entonces el botón se añade al final de la página — bajo el pie de página, fuera de la vista. No hay nada roto: simplemente está en el sitio equivocado.
El remedio es un elemento vacío en tu plantilla de producto, donde quieras el botón:
<div data-cabina-target></div>Ese atributo gana a todos los puntos de anclaje de arriba, y el botón se coloca dentro del elemento, no al lado.
La imagen de la prenda
Cabina lee la prenda directamente de tu página de producto. Prueba, en este
orden: og:image, luego twitter:image, y luego la primera imagen que coincida
con uno de estos selectores:
| Selector de galería | Plataforma típica |
|---|---|
.woocommerce-product-gallery__image img | WooCommerce |
img.wp-post-image | WooCommerce |
.wp-block-woocommerce-product-image img | WooCommerce |
.product__image img | Shopify |
.product-image img | Shopify |
.product-photo img | Shopify |
.product-single__photo img | Shopify |
[data-product-image] img | Shopify |
.product-featured-image img | Shopify |
.product-gallery img | Shopify |
.product-img img | Shopify |
.product__media img | Shopify |
.main-product-image img | Shopify |
Si ninguno de los tres encuentra una imagen, el botón aparece igualmente y la prueba falla a medias. Es el único fallo que tus clientes notan antes que tú.
El remedio general, válido en cualquier plataforma, es emitir una imagen Open Graph en tu plantilla de producto:
<meta property="og:image" content="https://tu-tienda.com/imagenes/producto.jpg">Merece la pena de todos modos: es la misma etiqueta que Facebook, WhatsApp y Slack usan para previsualizar los enlaces a tus productos.
Lo que ve tu cliente
Nada sale de su dispositivo hasta que marca la casilla de consentimiento, y los modelos ya preparados no necesitan ninguna foto.
El texto del botón lo eliges tú en el panel: no es una traducción de Cabina. La interfaz del probador, en cambio, sí sigue el idioma de la página.
Para agentes de IA
El mismo contrato, escrito para una máquina y servido como markdown puro — sin capturas, y además con un árbol de decisión y los comandos para verificar una instalación desde el terminal: cabina.io/en/docs/agent.md .