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>

Puoi metterlo ovunque dentro <head>, oppure subito prima di </body>. Funzionano entrambi: lo script è async e aspetta da solo che la pagina sia pronta.

Prima di tutto: il dominio

Prima di incollare qualsiasi cosa, autorizza il dominio del tuo negozio nel pannello di Cabina: pagina Widget , sezione Domini autorizzati. Finché l’elenco è vuoto il widget non compare su nessun sito, anche con il tag o il plugin installati correttamente — e non dice perché.

Scrivi l’origine esatta: https://negozio.it e https://www.negozio.it sono due origini diverse; se il negozio risponde su entrambe, aggiungile entrambe. Shopify e Wix non ne hanno bisogno: l’app registra il dominio da sola all’installazione.

Dove si incolla, piattaforma per piattaforma

Shopify

Shopify emette un’immagine Open Graph su ogni pagina prodotto, quindi il capo viene trovato senza che tu debba fare altro.

WooCommerce

Su WooCommerce c’è un plugin: fa lui il lavoro del tag, e sopravvive ai cambi di tema.

In alternativa, il tag si incolla nel tema:

WooCommerce non emette og:image senza un plugin SEO. Cabina ripiega sull’immagine della galleria — vedi L’immagine del capo.

Wix

Su Wix non si incolla nessun tag: c’è l’app sul Wix App Market, ed è l’unico percorso.

PrestaShop

Su PrestaShop c’è un modulo: fa lui il lavoro del tag, e sopravvive ai cambi di tema.

Se preferisci non installare moduli, il tag si incolla nel tema:

Qualunque altro tema

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.

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:

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. Sui capi da bambino (tabella taglie con Per chi è = bambini) la cabina mostra solo le 18 modelle preset sotto i 16 anni e la foto non viene chiesta.

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 .