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

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

Code personnalisé

Dans votre tableau de bord Wix, allez dans Paramètres → Code personnalisé.

Ajoutez

Cliquez sur Ajouter du code personnalisé, collez la balise et nommez-la « Cabina ».

Où

Sous « Ajouter du code aux pages », choisissez Toutes les pages, et placez-la dans le Head.

Publiez

Appliquez, puis publiez le site : sur Wix, rien n’est en ligne tant que vous n’avez pas publié.

Wix génère les fiches produit avec son propre gabarit : si le bouton se retrouve en bas de page, utilisez data-cabina-target (ci-dessous).

PrestaShop

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 .