Instalação manual
Esta tag é toda a integração. Substitua a chave pela sua, cole-a uma vez e não mude mais nada: nenhum atributo extra nos seus produtos, nenhum botão seu, nenhum ID de produto.
<script
src="https://www.cabina.io/widget.iife.js"
crossorigin="anonymous"
async
data-api-key="cab_live_SUA_CHAVE">
</script>Não adicione o atributo integrity. A URL do bundle não é versionada, então um
hash fixo faria o navegador recusar o script no nosso próximo lançamento — em
silêncio, e sem nenhuma forma de avisarmos você.
Coloque-a em qualquer lugar dentro de <head>, ou imediatamente antes de
</body>. As duas opções funcionam: o script é async e espera a página
sozinho.
Antes de tudo: o seu domínio
Antes de colar qualquer coisa, autorize o domínio da sua loja no painel da Cabina: página Widget , seção Domínios autorizados. Enquanto essa lista estiver vazia, o widget não aparece em site nenhum, mesmo com a tag ou o plugin instalados corretamente — e não diz por quê.
Informe a origem exata: https://loja.com.br e https://www.loja.com.br são
duas origens diferentes; se a loja responde nas duas, adicione as duas. Shopify
e Wix não precisam deste passo: o app registra o domínio sozinho na instalação.
Onde colar, plataforma por plataforma
Shopify
Temas
No admin da Shopify, vá em Loja virtual → Temas.
Editar código
No seu tema ativo, abra o menu ⋯ e escolha Editar código.
theme.liquid
Abra layout/theme.liquid.
Cole
Cole a tag logo antes da tag de fechamento </head>.
Salve
Salve. A alteração entra no ar imediatamente — não há nenhum tema para publicar.
A Shopify emite uma imagem Open Graph em toda página de produto, então a peça é encontrada sem que você precise fazer mais nada.
WooCommerce
No WooCommerce há um plugin: ele faz o trabalho da tag por você e sobrevive às trocas de tema.
Instale o plugin
No WordPress, vá em Plugins → Adicionar novo, pesquise Cabina e clique em Instalar agora, depois em Ativar. É o plugin do WordPress.org , e as atualizações chegam de lá como para qualquer outro plugin. Ele exige WordPress 6.5 ou mais recente, com o WooCommerce ativo.
Se o seu site não consegue instalar a partir do diretório, baixe cabina-woocommerce.zip e envie-o por Plugins → Adicionar novo → Enviar plugin.
Configure
Vá em Configurações → Cabina e cole a sua chave cab_live_…: você a encontra
no painel da Cabina, na página Instalação, aba WooCommerce.
Pronto
O botão aparece nas páginas de produto. Nada para colar no tema. Se ele não aparecer, quase sempre o que falta é o domínio: veja o início desta página.
Como alternativa, a tag vai no tema:
Um plugin de snippets
No WordPress, instale um plugin de snippets de código (WPCode, Code Snippets) — ou use o seu tema filho.
Crie o snippet
Crie um snippet que rode no cabeçalho do site e cole a tag ali.
Ou o tema filho
Com um tema filho, adicione-a ao functions.php no hook wp_head.
Confira
Salve e abra uma página de produto.
O WooCommerce não emite og:image sem um plugin de SEO. A Cabina recorre
então à imagem da galeria — veja A imagem da peça.
Wix
No Wix não há tag para colar: o app está no Wix App Market, e esse é o único caminho.
App Market
No painel do Wix, abra o App Market e pesquise “Cabina”.
Adicione
Adicione o app e autorize o site: a chave de API é configurada para você, nada para copiar.
Publique
Publique o site — no Wix, nada entra no ar até você publicar. O botão aparece nas páginas de produto do Wix Stores, colocado ali pelo app.
PrestaShop
No PrestaShop há um módulo: ele faz o trabalho da tag por você e sobrevive a uma troca de tema.
Baixe o módulo
Baixe cabina.zip . Ele funciona no PrestaShop 8 e 9.
Envie
No back office, vá em Módulos, clique em Enviar um módulo e solte o arquivo.
Configure
Clique em Configurar e cole a sua chave cab_live_…: você a encontra no
painel da Cabina, na página Instalação, aba PrestaShop.
Pronto
O botão aparece nas suas páginas de produto. Nada para colar no tema, nenhum cache para limpar. Se ele não aparecer, quase sempre o que falta é o domínio: veja o início desta página.
Se você prefere não instalar módulos, a tag vai no tema:
Tema e logotipo
Vá em Design → Tema e logotipo, depois abra os arquivos do seu tema (ou use FTP).
head.tpl
Abra templates/_partials/head.tpl no seu tema ativo.
Cole
Cole a tag antes do {/block} de fechamento do bloco head.
Limpe o cache
Salve, depois limpe o cache em Parâmetros avançados → Desempenho.
Qualquer outro tema
Encontre o template
Encontre o template que produz o <head> de todas as páginas — o nome do arquivo
muda conforme a plataforma.
Cole
Cole a tag em qualquer lugar dentro de <head>, ou imediatamente antes de
</body>.
Uma única vez
Cole-a uma única vez. Uma segunda cópia para sozinha e avisa no console, mas ainda assim vale a pena removê-la.
Recarregue
Recarregue uma página de produto.
A Cabina não precisa de nenhuma variável de template, nenhum ID de produto e nenhuma marcação extra. Uma tag script é toda a integração.
Como saber que funcionou
Abra uma página de produto. A Cabina encontra o seu bloco de compra e coloca o botão dela logo abaixo — você não escreve nenhuma marcação para isso.
O botão pega o texto e a cor das configurações do seu painel, e herda a fonte do seu tema.
Nenhum botão? Abra o console do navegador — a Cabina diz por quê, em uma linha. Vá para Solução de problemas.
Mover o botão
A Cabina procura o bloco de compra usando a lista abaixo, em ordem, e insere o botão dela logo depois da primeira correspondência.
| Ponto de ancoragem | 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 |
Em um tema personalizado, normalmente nenhum deles corresponde. Então o botão é anexado ao fim da página — abaixo do rodapé, fora de vista. Nada está quebrado; ele só está no lugar errado.
A solução é um elemento vazio no seu template de produto, onde você quiser o botão:
<div data-cabina-target></div>Esse atributo vence todos os pontos de ancoragem acima, e o botão é colocado dentro do elemento, não ao lado.
A imagem da peça
A Cabina lê a peça direto da sua página de produto. Ela tenta, em ordem:
og:image, depois twitter:image, depois a primeira imagem que corresponda a um
destes seletores:
| Seletor da galeria | 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 |
Se nenhum dos três encontra uma imagem, o botão aparece mesmo assim e a prova falha no meio do caminho. É a única falha que os seus compradores notam antes de você.
A solução geral, válida em qualquer plataforma, é emitir uma imagem Open Graph no seu template de produto:
<meta property="og:image" content="https://sua-loja.com.br/imagens/produto.jpg">Vale a pena fazer isso de qualquer forma: é a mesma tag que Facebook, WhatsApp e Slack usam para a prévia dos links dos seus produtos.
O que o seu comprador vê
Nada sai do dispositivo dele até que marque a caixa de consentimento, e as modelos predefinidas não exigem foto nenhuma.
O texto do botão é seu, escolhido no painel: não é uma tradução da Cabina. A interface do provador, por outro lado, segue sim o idioma da página.
Para agentes de IA
O mesmo contrato, escrito para uma máquina e servido como markdown puro — sem capturas de tela, mais uma árvore de decisão e os comandos para verificar uma instalação a partir de um terminal: cabina.io/en/docs/agent.md .