Installation manuelle

Cette balise, c’est toute l’intégration. Remplacez la clé par la vôtre, collez-la une fois, et ne changez rien d’autre : aucun attribut sur vos produits, aucun bouton de votre côté, aucun identifiant produit.


<script
  src="https://www.cabina.io/widget.iife.js"
  crossorigin="anonymous"
  async
  data-api-key="cab_live_VOTRE_CLE">
</script>

N’ajoutez pas d’attribut integrity. L’adresse du bundle n’est pas versionnée : une empreinte figée ferait refuser le script par le navigateur dès notre prochaine mise en production — silencieusement, et sans que nous puissions vous prévenir.

Placez-la n’importe où dans <head>, ou juste avant </body>. Les deux fonctionnent : le script est async et attend la page tout seul.

Où la coller, plateforme par plateforme

Shopify

Thèmes

Dans votre administration Shopify, allez dans Boutique en ligne → Thèmes.

Modifier le code

Sur votre thème actif, ouvrez le menu ⋯ et choisissez Modifier le code.

theme.liquid

Ouvrez layout/theme.liquid.

Collez

Collez la balise juste avant la balise </head> de fermeture.

Enregistrez

Enregistrez. La modification est active immédiatement : aucun thème à publier.

Shopify émet une image Open Graph sur chaque fiche produit : le vêtement est donc trouvé sans rien de plus de votre part.

WooCommerce

Sur WooCommerce, il y a une extension : elle fait le travail de la balise à votre place, et survit aux changements de thème.

Téléchargez l’extension

Téléchargez cabina-woocommerce.zip . Il faut WordPress 6.5 ou plus récent, avec WooCommerce actif.

Téléversez

Dans WordPress, allez dans Extensions → Ajouter → Téléverser une extension, choisissez le fichier, cliquez sur Installer maintenant puis sur Activer.

Configurez

Allez dans Réglages → Cabina et collez votre clé cab_live_… : vous la trouvez dans le tableau de bord Cabina, sur la page Installation, onglet WooCommerce.

Terminé

Le bouton apparaît sur les fiches produit. Rien à coller dans le thème.

Sinon, la balise se colle dans le thème :

Une extension de snippets

Dans WordPress, installez une extension de snippets (WPCode, Code Snippets) — ou utilisez votre thème enfant.

Créez le snippet

Créez un snippet qui s’exécute dans l’en-tête du site et collez-y la balise.

Ou le thème enfant

Avec un thème enfant, ajoutez-la à functions.php sur le hook wp_head.

Vérifiez

Enregistrez et ouvrez une fiche produit.

WooCommerce n’émet pas og:image sans extension SEO. Cabina se rabat alors sur l’image de la galerie — voir L’image du vêtement.

Wix

Sur Wix, aucune balise à coller : l’application est sur le Wix App Market, et c’est la seule voie.

App Market

Dans votre tableau de bord Wix, ouvrez l’App Market et cherchez « Cabina ».

Ajoutez

Ajoutez l’application et autorisez le site : la clé API se configure toute seule, rien à copier.

Publiez

Publiez le site : sur Wix, rien n’est en ligne tant que vous n’avez pas publié. Le bouton apparaît sur les fiches produit de Wix Stores, placé par l’application.

PrestaShop

Sur PrestaShop il existe un module : il fait le travail de la balise à votre place, et survit à un changement de thème.

Téléchargez le module

Téléchargez cabina.zip . Il fonctionne sur PrestaShop 8 et 9.

Chargez-le

Dans le back-office, allez dans Modules, cliquez sur Installer un module et déposez le fichier.

Configurez

Cliquez sur Configurer et collez votre clé cab_live_… : vous la trouverez dans le tableau de bord Cabina, sur la page Installation, onglet PrestaShop.

Terminé

Le bouton apparaît sur vos fiches produit. Rien à coller dans le thème, aucun cache à vider.

Si vous préférez ne pas installer de module, la balise se colle dans le thème :

Thème et logo

Allez dans Apparence → Thème et logo, puis ouvrez les fichiers du thème (ou utilisez le FTP).

head.tpl

Ouvrez templates/_partials/head.tpl dans votre thème actif.

Collez

Collez la balise avant le {/block} de fermeture du bloc head.

Videz le cache

Enregistrez, puis videz le cache dans Paramètres avancés → Performances.

N’importe quel autre thème

Trouvez le gabarit

Trouvez le gabarit qui produit le <head> de chaque page — le nom du fichier change selon la plateforme.

Collez

Collez la balise n’importe où dans <head>, ou juste avant </body>.

Une seule fois

Collez-la une seule fois. Une deuxième copie s’arrête d’elle-même et prévient dans la console, mais mieux vaut la retirer.

Rechargez

Rechargez une fiche produit.

Cabina n’a besoin d’aucune variable de gabarit, d’aucun identifiant produit et d’aucun balisage supplémentaire. Une balise <script>, c’est toute l’intégration.

Comment savoir que ça a marché

Ouvrez une fiche produit. Cabina trouve votre bloc d’achat et place son bouton juste en dessous — vous n’écrivez aucun balisage pour cela.

Une fiche produit : le bouton Cabina se trouve juste sous le bouton d’ajout au panier.

Le bouton prend son texte et sa couleur dans les réglages de votre tableau de bord, et hérite de la police de votre thème.

Pas de bouton ? Ouvrez la console du navigateur : Cabina dit pourquoi, en une ligne. Rendez-vous au Dépannage.

Déplacer le bouton

Cabina cherche le bloc d’achat avec la liste ci-dessous, dans l’ordre, et insère son bouton juste après la première correspondance.

Point d’ancrage	Plateforme typique
`.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

Sur un thème sur mesure, aucun ne correspond en général. Le bouton est alors ajouté à la fin de la page — sous le pied de page, hors de vue. Rien n’est cassé : il est simplement au mauvais endroit.

Un thème que Cabina ne reconnaît pas : le bouton s’est retrouvé tout en bas de la page, sous le pied de page.

Le remède tient en un élément vide dans votre gabarit produit, là où vous voulez le bouton :


<div data-cabina-target></div>

Cet attribut l’emporte sur tous les points d’ancrage ci-dessus, et le bouton est placé à l’intérieur de l’élément, pas à côté.

Le même thème après l’ajout de data-cabina-target : le bouton est revenu sous le bouton d’ajout au panier.

L’image du vêtement

Cabina lit le vêtement directement sur votre fiche produit. Il essaie, dans l’ordre : og:image, puis twitter:image, puis la première image correspondant à l’un de ces sélecteurs :

Sélecteur de galerie	Plateforme typique
`.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 aucun des trois ne trouve d’image, le bouton apparaît quand même et l’essayage échoue en cours de route. C’est la seule panne que vos clients remarquent avant vous.

Le remède général, valable sur toute plateforme, est d’émettre une image Open Graph dans votre gabarit produit :


<meta property="og:image" content="https://votre-boutique.com/images/produit.jpg">

Cela vaut la peine de toute façon : c’est la même balise que Facebook, WhatsApp et Slack utilisent pour l’aperçu des liens vers vos produits.

Ce que voit votre client

La cabine ouverte au-dessus d’une fiche produit : elle demande une photo ou un mannequin prêt à l’emploi.

Rien ne quitte son appareil tant qu’il n’a pas coché la case de consentement, et les mannequins prêts à l’emploi ne demandent aucune photo.

Le texte du bouton, c’est vous qui le choisissez dans le tableau de bord : ce n’est pas une traduction de Cabina. L’interface de la cabine, elle, suit bien la langue de la page.

Pour les agents IA

Le même contrat, écrit pour une machine et servi en markdown brut — sans captures d’écran, avec en plus un arbre de décision et les commandes pour vérifier une installation depuis un terminal : cabina.io/en/docs/agent.md .