Documentation

Prérequis

• Avoir souscrit un plan Tissova (voir nos tarifs)
• Avoir uploadé au moins un modèle 3D dans le dashboard marque
• Récupérer sa clé API depuis le dashboard → onglet Intégration

Installation

Le script s'intègre en une seule balise, à placer une fois dans le template de fiche produit de votre CMS — pas manuellement sur chaque page. Le widget se charge automatiquement partout où ce template est utilisé.

<script
  src="https://widget.tissova.fr/tissova.js"
  data-api-key="VOTRE_CLE_API"
  data-produit-id="{{ product.id }}"
></script>

<script
  src="https://widget.tissova.fr/tissova.js"
  data-api-key="VOTRE_CLE_API"
  data-produit-id="<?php echo get_the_ID(); ?>"
></script>

<script
  src="https://widget.tissova.fr/tissova.js"
  data-api-key="VOTRE_CLE_API"
  data-produit-id="{$product.id}"
></script>

<script
  src="https://widget.tissova.fr/tissova.js"
  data-api-key="VOTRE_CLE_API"
  data-produit-id="VOTRE_ID_PRODUIT"
></script>

Détection automatique du produit

Si vous ne renseignez pas data-produit-id, le widget détecte automatiquement l'identifiant produit depuis la balise meta suivante, déjà présente sur la majorité des sites utilisant le Pixel Facebook ou Google Shopping :

<meta property="product:retailer_item_id" content="VOTRE_ID_PRODUIT">

Cet identifiant doit correspondre exactement à celui renseigné pour le modèle 3D dans votre dashboard Tissova — c'est ce lien qui permet au widget de trouver le bon modèle.

Événements JavaScript

Le widget émet des événements personnalisés sur window que vous pouvez écouter pour réagir aux actions de vos visiteurs :

window.addEventListener("tissova:ready", (event) => {
  console.log(event.detail);
});

window.addEventListener("tissova:opened", () => {
  console.log("Popup ouverte");
});

window.addEventListener("tissova:addToCart", (event) => {
  const { produitId, taille, coloris, quantite } = event.detail;
  // Ajoutez l'article à votre panier
});

window.addEventListener("tissova:productNotFound", (event) => {
  console.log(event.detail.produitId);
});

Personnalisation du bouton

Le widget détecte automatiquement le bouton « Ajouter au panier » de votre site (Shopify, WooCommerce, PrestaShop reconnus sans configuration) et insère le bouton Tissova juste avant. Pour contrôler précisément l'emplacement, ajoutez l'attribut data-tissova-anchor sur n'importe quel élément : le bouton Tissova s'insérera juste avant cet élément, en priorité sur toute détection automatique.

<!-- Le bouton Tissova apparaîtra ici -->
<button data-tissova-anchor class="btn-add-to-cart">
  Ajouter au panier
</button>

Si aucune ancre n'est trouvée (ni data-tissova-anchor, ni sélecteur reconnu automatiquement), le bouton apparaît en position fixe, en bas à gauche de l'écran.

Tester l'intégration

1. 1.Vérifiez que la clé API est correcte dans le dashboard.
2. 2.Vérifiez que la balise meta product:retailer_item_id est présente.
3. 3.Vérifiez que l'ID produit correspond à un modèle 3D uploadé dans le dashboard.
4. 4.Ouvrez la console du navigateur et vérifiez l'événement tissova:ready.
5. 5.Testez sur la page /demo de Tissova pour confirmer que le widget fonctionne.

FAQ technique