Installazione manuale
Tutta l’integrazione è questo tag. Sostituisci la chiave con la tua, incollalo una volta, e non cambiare nient’altro: nessun attributo sui prodotti, nessun pulsante scritto da te, nessun ID prodotto.
<script
src="https://www.cabina.io/widget.iife.js"
crossorigin="anonymous"
async
data-api-key="cab_live_LA_TUA_CHIAVE">
</script>Non aggiungere l’attributo integrity. L’indirizzo del bundle non è versionato,
quindi un hash fissato farebbe rifiutare lo script dal browser al nostro rilascio
successivo — in silenzio, e senza nessun modo per noi di avvisarti.
Puoi metterlo ovunque dentro <head>, oppure subito prima di </body>.
Funzionano entrambi: lo script è async e aspetta da solo che la pagina sia
pronta.
Dove si incolla, piattaforma per piattaforma
Shopify
Temi
Nell’amministrazione Shopify vai su Negozio online → Temi.
Modifica codice
Sul tema attivo apri il menu ⋯ e scegli Modifica codice.
theme.liquid
Apri layout/theme.liquid.
Incolla
Incolla il tag subito prima del tag </head> di chiusura.
Salva
Salva. La modifica è attiva subito: non c’è nessun tema da pubblicare.
Shopify emette un’immagine Open Graph su ogni pagina prodotto, quindi il capo viene trovato senza che tu debba fare altro.
WooCommerce
Un plugin per gli snippet
In WordPress installa un plugin per snippet di codice (WPCode, Code Snippets) — oppure usa il tuo tema figlio.
Crea lo snippet
Crea uno snippet che gira nell’intestazione del sito e incolla lì il tag.
Oppure il tema figlio
Con un tema figlio, aggiungilo a functions.php sull’hook wp_head.
Prova
Salva e apri una pagina prodotto.
WooCommerce non emette og:image senza un plugin SEO. Cabina ripiega
sull’immagine della galleria — vedi L’immagine del capo.
Wix
Codice personalizzato
Nella dashboard Wix vai su Impostazioni → Codice personalizzato.
Aggiungi
Clicca Aggiungi codice personalizzato, incolla il tag e chiamalo «Cabina».
Dove
Sotto «Aggiungi codice alle pagine» scegli Tutte le pagine, e mettilo nell’Head.
Pubblica
Applica, poi pubblica il sito: su Wix niente è attivo finché non pubblichi.
Wix costruisce le pagine prodotto con un suo template: se il pulsante finisce in
fondo alla pagina, usa data-cabina-target (vedi sotto).
PrestaShop
Tema e logo
Vai su Design → Tema e logo, poi apri i file del tema (o usa FTP).
head.tpl
Apri templates/_partials/head.tpl nel tema attivo.
Incolla
Incolla il tag prima del {/block} di chiusura del blocco head.
Svuota la cache
Salva, poi svuota la cache in Parametri avanzati → Prestazioni.
Qualunque altro tema
Trova il template
Trova il template che produce l’<head> di ogni pagina — il nome del file
cambia con la piattaforma.
Incolla
Incolla il tag dentro <head>, o subito prima di </body>.
Una volta sola
Incollalo una volta sola. Una seconda copia si ferma da sé e avvisa nella console, ma vale comunque la pena toglierla.
Ricarica
Ricarica una pagina prodotto.
Cabina non ha bisogno di nessuna variabile del template, nessun ID prodotto e
nessun markup aggiuntivo. Un tag <script> è tutta l’integrazione.
Come si vede che ha funzionato
Apri una pagina prodotto. Cabina trova il tuo blocco d’acquisto e mette il suo pulsante subito sotto — non scrivi nessun markup per questo.
Il pulsante prende testo e colore dalle impostazioni del tuo pannello ed eredita il carattere del tuo tema.
Nessun pulsante? Apri la console del browser: Cabina dice perché, in una riga. Vai a Risoluzione dei problemi.
Spostare il pulsante
Cabina cerca il blocco d’acquisto con l’elenco qui sotto, nell’ordine, e inserisce il suo pulsante subito dopo la prima corrispondenza.
| Punto d'aggancio | Piattaforma tipica |
|---|---|
.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 |
Su un tema personalizzato di solito non ne combacia nessuno. Allora il pulsante viene appeso in fondo alla pagina — sotto il piè di pagina, fuori dalla vista. Non è rotto niente: è solo nel posto sbagliato.
Il rimedio è un elemento vuoto nel template del prodotto, dove vuoi il pulsante:
<div data-cabina-target></div>Quell’attributo batte ogni punto d’aggancio dell’elenco, e il pulsante viene messo dentro l’elemento, non accanto.
L’immagine del capo
Cabina legge il capo direttamente dalla tua pagina prodotto. Prova, nell’ordine:
og:image, poi twitter:image, poi la prima immagine che corrisponde a uno di
questi selettori:
| Selettore della galleria | Piattaforma tipica |
|---|---|
.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 nessuno dei tre trova un’immagine, il pulsante compare lo stesso e la prova fallisce a metà. È l’unico guasto che i tuoi clienti notano prima di te.
Il rimedio generale, valido su qualunque piattaforma, è emettere un’immagine Open Graph nel template del prodotto:
<meta property="og:image" content="https://il-tuo-negozio.com/immagini/prodotto.jpg">Vale la pena farlo comunque: è lo stesso tag che Facebook, WhatsApp e Slack usano per l’anteprima dei link ai tuoi prodotti.
Cosa vede il tuo cliente
Niente lascia il suo dispositivo finché non spunta la casella del consenso, e le modelle già pronte non richiedono nessuna foto.
Il testo del pulsante lo scegli tu nel pannello: non è una traduzione di Cabina. L’interfaccia della cabina, quella sì, segue la lingua della pagina.
Per gli agenti AI
Lo stesso contratto, scritto per una macchina e servito come markdown puro — senza screenshot, e in più con un albero decisionale e i comandi per verificare un’installazione da terminale: cabina.io/en/docs/agent.md .