Ajouter un assistant shopping IA sur Shopify ou WooCommerce

Vous pouvez installer un assistant shopping IA sur une boutique Shopify ou WooCommerce en un après-midi. L’essentiel du travail consiste à copier-coller. La seule étape qui demande un peu de code (relier le bouton « Ajouter au panier » du chat à votre vrai panier) tient en quelques lignes que vous pouvez copier depuis ce guide. Ce pas-à-pas suit la documentation d’AskMerra et s’applique aussi à Magento 2 et aux boutiques développées sur mesure.

Avant de commencer

Il vous faut quatre choses :

• Un compte AskMerra et une boutique. Vous indiquez le domaine de votre site en créant la boutique, car le widget ne fonctionne que là.
• Vos données produits, sous forme de fichier d’export ou d’URL de flux.
• Un accès aux fichiers de votre thème, à une extension d’en-tête et de pied de page ou à Google Tag Manager.
• Votre clé de site publique (elle commence par pk_live_), affichée dans Tableau de bord → Installation.

Étape 1 : importez votre catalogue

AskMerra ne recommande que des produits présents dans votre catalogue : un catalogue complet et à jour est donc l’élément le plus important. Il existe aujourd’hui trois façons d’importer vos produits :

• Import de fichier (CSV, JSON ou XML) : le moyen le plus rapide de démarrer. Les fichiers peuvent peser jusqu’à 25 Mo, et les séparateurs et encodages CSV sont détectés automatiquement.
• URL de flux : si vous publiez déjà un flux produits, par exemple pour Google Shopping, AskMerra le resynchronise automatiquement toutes les 1 à 6 heures selon votre formule. Un flux XML Google Merchant Center fonctionne tel quel.
• Push API : pour les plateformes sur mesure et les ERP qui ont besoin du stock et des prix en temps réel.

D’où viennent les données selon la plateforme

Sur Shopify, installez une application de flux Google Shopping et ajoutez l’URL de son flux, ou importez un export CSV. Sur WooCommerce, utilisez une extension de flux produits ou un export CSV. Sur Magento 2, utilisez une extension de flux ou la Push API. Des applications natives Shopify et Magento avec synchronisation automatique sont prévues. En attendant leur sortie, le flux et les API couvrent les mêmes besoins.

Association des colonnes et enrichissement

Après l’import, AskMerra propose une correspondance entre vos colonnes et ses champs (identifiant, nom, prix, prix promotionnel, disponibilité, catégories, marque, etc.). Vérifiez cette correspondance avant d’importer. Les colonnes que vous associez à attribute:<name>, comme attribute:skin_type, deviennent des attributs produits utilisables dans la recherche.

Chaque produit est ensuite enrichi : l’IA extrait les usages, les types de peau ou de cheveux, les préoccupations, les ingrédients clés ou les caractéristiques techniques et les étapes de routine, puis indexe le résultat pour la recherche sémantique. Les changements ultérieurs de prix et de stock s’appliquent immédiatement et ne relancent pas l’enrichissement. Les produits absents d’une nouvelle synchronisation complète sont désactivés, jamais supprimés.

Envoyer les produits depuis votre backend

Si vous synchronisez depuis votre propre système, envoyez des lots de 500 produits maximum, authentifiés avec votre clé secrète :

curl -X POST "https://api.askmerra.com/v1/catalog/products:batchUpsert" \
  -H "Authorization: Bearer $ASKMERRA_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{"products":[{"external_id":"LUM-SE-01","name":"Hydra Glow Serum 30 ml","price":39,"in_stock":true}]}'

Envoyez toujours le produit complet : un upsert remplace ce qui est stocké, donc les champs omis sont effacés.

Étape 2 : ajoutez une balise script

Copiez votre code d’intégration depuis Tableau de bord → Installation et collez-le juste avant la balise de fermeture </body> sur chaque page où l’assistant doit apparaître :

<script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" async></script>

Le script pèse environ 27 Ko compressé avec gzip. Il attend que votre page soit chargée et que le navigateur soit inactif, puis n’affiche que le bouton du widget. Le chat s’affiche dans un Shadow DOM : le CSS de votre thème ne peut pas le casser, et son propre CSS ne peut pas déborder sur votre thème.

Shopify

Allez dans Boutique en ligne → Thèmes → Modifier le code, ouvrez layout/theme.liquid et collez le code avant </body>.

WooCommerce et WordPress

Ajoutez le code avec une extension d’en-tête et de pied de page comme WPCode, dans la section pied de page. Si vous préférez passer par le code, placez-le dans le fichier footer.php de votre thème enfant, avant wp_footer().

Google Tag Manager

Créez une balise HTML personnalisé qui se déclenche sur toutes les pages. Certaines configurations GTM suppriment les attributs data-* : utilisez plutôt l’objet de réglages.

<script>
  window.AskMerraSettings = { siteKey: 'pk_live_…' };
</script>
<script src="https://cdn.askmerra.com/v1/widget.js" async></script>

Sur Magento 2, ajoutez le code dans Content → Design → Configuration → HTML Head → Scripts and Style Sheets. Les applications monopages (React, Vue, Next.js) le chargent une seule fois dans le layout racine, et la conversation reste ouverte pendant la navigation côté client.

Étape 3 : définissez vos domaines autorisés

Votre clé de site ne fonctionne que sur les domaines listés dans Paramètres → Domaines autorisés. shop.com couvre aussi www.shop.com, et *.shop.com couvre tous les sous-domaines. Ajoutez aussi votre domaine de préproduction, sinon le widget refusera de s’y lancer.

Un avertissement : le code doit contenir votre clé de site pk_live_. Ne collez jamais une clé secrète sk_live_ dans une page web. Les points d’accès du widget la rejettent de toute façon.

Étape 4 : donnez à l’assistant le contexte de la page produit

Sur une page produit, AskMerra peut savoir quel produit le client regarde : « Est-ce que ça convient aux peaux grasses ? » fonctionne donc directement. Il lit le produit dans le JSON-LD schema.org de la page (Product.sku, puis productID, puis mpn). Sur WooCommerce, c’est le JSON-LD de votre extension SEO qui est utilisé. Si votre thème n’en génère pas, indiquez le produit vous-même :

<script>
  window.AskMerraSettings = { productId: 'LUM-SE-01' };
</script>

La valeur doit correspondre à l’external_id ou au sku du produit dans votre catalogue AskMerra.

Étape 5 : connectez « Ajouter au panier »

Les fiches produits du chat peuvent afficher un bouton « Ajouter au panier ». Activez-le dans les réglages de comportement du widget, puis gérez l’événement add_to_cart avec l’API panier de votre plateforme. Sans gestionnaire, le bouton ouvre simplement la page produit.

Sur Shopify, externalId est l’identifiant de variante lorsque votre catalogue provient de Shopify :

AskMerra.on('add_to_cart', async ({ externalId }) => {
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: Number(externalId), quantity: 1 }] }),
  });
});

Sur WooCommerce, externalId est l’identifiant produit WooCommerce :

AskMerra.on('add_to_cart', async ({ externalId }) => {
  const body = new URLSearchParams({ product_id: externalId, quantity: '1' });
  await fetch('/?wc-ajax=add_to_cart', { method: 'POST', body });
  document.body.dispatchEvent(new Event('wc_fragment_refresh'));
});

Le script du widget se charge de façon asynchrone : l’endroit le plus sûr pour enregistrer vos gestionnaires est donc le callback onReady de window.AskMerraSettings. La même API JavaScript vous permet d’ouvrir le chat depuis votre propre bouton « Demander à un expert » avec AskMerra.sendMessage(), de suivre le sélecteur de langue de votre site avec AskMerra.setLocale(), et de transmettre les événements open, product_click et add_to_cart à votre outil d’analyse.

Étape 6 : vérifiez l’installation

Ouvrez votre boutique dans un navigateur, puis allez dans Tableau de bord → Installation. La page indique quand et où le widget a été détecté pour la dernière fois, ce qui couvre aussi les installations via un gestionnaire de balises. Le bouton Vérifier charge vos domaines et indique si le code a été trouvé, si une autre clé de site est installée ou si le site était inaccessible.

Si le bouton du widget n’apparaît pas, ouvrez la console du navigateur. Le widget y affiche un avertissement clair : clé de site inconnue, domaine non autorisé ou boutique en pause. Si votre site envoie un en-tête Content Security Policy, autorisez https://cdn.askmerra.com dans script-src et https://api.askmerra.com dans connect-src.

Quelques finitions :

• Masquez le bouton du widget sur le tunnel de commande avec une règle de chemin comme /checkout*, pour préserver le parcours d’achat de toute distraction.
• Posez de vraies questions de clients dans le Playground avant la mise en ligne. Son panneau de débogage montre quels produits ont été récupérés et quelle route a répondu.
• Les modifications de design que vous publiez depuis le tableau de bord arrivent sur votre site en une minute environ, sans toucher au code d’intégration.

Lancez-vous

Pour suivre ces étapes sur votre boutique, créez votre compte. Vous préférez une démonstration ? Réservez une démo. La référence complète se trouve dans la documentation d’installation et dans la documentation de l’API JavaScript. Si vous hésitez encore, commencez par ce qu’est un assistant shopping IA, puis voyez en quoi il diffère d’une barre de recherche classique dans recherche produit conversationnelle vs recherche par mots-clés.