Installation & intégrations

Widgets

Installer les widgets, étape par étape

Choisissez votre plateforme

Tout le guide s'adapte : étapes, extrait de code, liens de documentation et dépannage.

Étape 0 — recommandé

Vous n'êtes pas connecté

Connectez-vous à votre compte OpenReviews pour remplir automatiquement les extraits ci-dessous avec votre vraie clé widget et votre tenant ID. Sinon, remplacez simplement pk_live_VOTRE_CLE par la clé affichée dans votre tableau de bord.

Se connecter Ouvrir le tableau de bord

Suivez les étapes — Shopify

Cochez chaque étape quand c'est fait — votre progression s'affiche en haut, et on vous amène directement à la suivante.

0/5

Étape 1 sur 5
Installez l'app OpenReviews
Dans le Shopify App Store, cherchez « OpenReviews » et cliquez sur Installer. Autorisez l'accès à votre boutique quand Shopify le demande.
Étape 2 sur 5
Ouvrez l'éditeur de thème
Dans l'admin Shopify : Boutique en ligne → Thèmes → bouton « Personnaliser » sur votre thème actif.
Étape 3 sur 5
Ajoutez un bloc d'avis sur la fiche produit
En haut de l'éditeur, ouvrez le modèle « Produits → Produit par défaut ». Cliquez sur « Ajouter un bloc » dans la section souhaitée et choisissez le bloc OpenReviews voulu : Note étoilée, Avis, ou Synthèse.
Étape 4 sur 5
Enregistrez
Cliquez sur « Enregistrer » en haut à droite. C'est terminé : la clé est connectée automatiquement par l'app, vous n'avez aucun code à coller.

Étape 5 sur 5

Optionnel — méthode manuelle (code)

Si vous préférez éditer le thème à la main plutôt que d'utiliser les blocs, collez cet extrait dans votre template produit (Boutique en ligne → Thèmes → ⋯ → Modifier le code). La clé provient du metafield posé automatiquement par l'app.

<div id="or-reviews" style="display:block">
  <a href="https://openreviews.io/r/{{ product.id }}" data-or-attribution style="display:inline-block;font-size:12px;opacity:.7;text-decoration:none">Avis vérifiés par OpenReviews</a>
  <script src="https://api.openreviews.io/augur.js"
    data-tenant="{{ shop.metafields.openreviews.widget_key.value }}"
    data-gtin="{{ product.id }}"
    data-variant="grid"
    data-target="#or-reviews"
    defer></script>
</div>

Identifiant produit — L'app renseigne automatiquement {{ product.id }} : chaque fiche affiche ses propres avis, rien à configurer.

Documentation officielle

Shopify — Étendre votre thème avec des apps Shopify Dev — Theme app extensions

En 30 secondes

Comment fonctionne le widget

Une seule balise

Le widget s'installe avec un unique <script defer>. Aucune dépendance à charger, rien à compiler côté boutique.

Détection automatique du produit

Le widget lit tout seul l'identifiant produit de la page (Shopify, JSON-LD, OpenGraph, WooCommerce, PrestaShop). data-gtin est optionnel.

Rendu isolé, zéro conflit

Tout est affiché en Shadow DOM : le CSS de votre thème n'affecte pas le widget, et inversement. Balisage SEO (JSON-LD) injecté automatiquement.

Patience

Combien de temps avant que ça s'affiche ?

Certaines fonctionnalités sont asynchrones : il est normal qu'un widget fraîchement posé n'affiche pas tout immédiatement. Voici les délais à connaître pour ne pas vous inquiéter.

Synthèse

Minimum 5 avis

La synthèse (score, points forts / faibles) apparaît à partir de 5 avis OpenReviews (ou dès qu'un agrégat externe existe). En-dessous, le widget affiche « Avis en cours d'analyse ».

Synthèse

Re-calcul toutes les 6 h

La synthèse est recalculée au maximum une fois toutes les 6 heures (debounce). Un franchissement du seuil de 5 avis ou une forte croissance déclenche un recalcul anticipé.

Ingestion

Traitement asynchrone

L'import et le rapprochement produit prennent quelques minutes. Un produit sans aucun avis n'existe pas encore dans le catalogue : il est créé à l'arrivée de son premier avis (le widget se masque proprement en attendant).

Déploiement

Propagation du script

Après une mise à jour, la nouvelle version d'augur.js peut prendre quelques minutes à se propager sur le CDN. Un rechargement forcé (Ctrl/Cmd + Maj + R) permet de la voir tout de suite.

Référence

Variantes, attributs & options avancées

Les variantes de widget

Choisissez le rendu via l'attribut data-variant. Vous pouvez poser plusieurs widgets sur la même page (par ex. la note étoilée sous le titre + la grille d'avis plus bas), un script par bloc.

Variante	Rendu
`main`	Synthèse (score, points forts / points faibles) + bouton de chat.
`grid`	Synthèse + chat, puis avis textuels en grille (photos / vidéos cliquables).
`rows`	Synthèse + chat, puis avis textuels en liste pleine largeur.
`carousel`	Bandeau score + carrousel horizontal d'avis (flèches, points, swipe, autoplay doux).
`stars`	Note étoilée compacte (étoiles + note + nombre d'avis), idéale sous le titre produit.

Référence des attributs data-*

Attribut	Requis	Description
data-tenant	✓	Clé publique widget (pk_live_…).
data-variant	—	main, grid, rows, carousel ou stars. Défaut : main.
data-gtin	—	Identifiant produit. Absent → détection automatique ; présent → prioritaire.
data-target	—	Sélecteur CSS du conteneur de montage. Sinon, insertion juste après le script.
data-locale	—	Locale d'affichage (formats de date / nombre). Défaut : fr.
data-product-name	—	Nom produit pour le balisage SEO (JSON-LD). Défaut : titre de la page.
data-seo	—	Mettre off pour désactiver l'injection JSON-LD.
data-size	—	Variante stars : taille des étoiles — sm, md ou lg. Défaut : md.
data-clickable	—	Variante stars : mettre off pour retirer le clic vers les avis (rendu non-interactif).
data-count	—	Variante stars : mettre off pour masquer le nombre d'avis.
data-rating	—	Variante stars : mettre off pour masquer la note chiffrée.

Forcer un identifiant produit (data-gtin) — avancé

data-gtin est optionnel. Ajoutez-le uniquement pour forcer une valeur précise (page sans données structurées, ou identifiant spécifique). Il devient alors prioritaire sur la détection automatique. Mettez l'ID produit de votre plateforme (le plus fiable), ou le code-barres GTIN/EAN, ou le SKU.

<script src="https://api.openreviews.io/augur.js"
  data-tenant="pk_live_VOTRE_CLE"
  data-variant="carousel"
  data-gtin="IDENTIFIANT_DU_PRODUIT"
  defer></script>

Dépannage

Ça ne s'affiche pas ?

Spécifique Shopify

Symptôme	Cause probable / solution
Le bloc OpenReviews n'apparaît pas dans l'éditeur	Vérifiez que l'app est bien installée, puis dans l'éditeur de thème ouvrez Réglages du thème → Intégrations d'apps (App embeds) et activez OpenReviews.
Le widget reste invisible sur la boutique	Vérifiez que le bloc est posé dans le modèle Produit (et pas seulement prévisualisé), enregistrez, puis rechargez la fiche avec Ctrl/Cmd + Maj + R.

Toutes plateformes

Symptôme	Cause probable / solution
Rien ne s'affiche	data-tenant est vide (la console affiche « [Augur] data-tenant est requis »), ou aucun identifiant produit n'a été détecté. Ajoutez alors un data-gtin explicite.
Widget vide / « produit introuvable »	La valeur de data-gtin ne correspond à aucun identifiant connu du produit dans OpenReviews. Essayez l'ID produit de votre plateforme, ou vérifiez que le code-barres / SKU est bien synchronisé.
Le bloc d'avis n'apparaît pas (grid / rows)	Le produit n'a pas encore d'avis textuels — comportement normal : la synthèse et les étoiles restent visibles.
Clé widget introuvable	Connectez-vous ci-dessus, ou récupérez-la dans le tableau de bord OpenReviews → Widgets → Installer.

Une fois vos widgets posés, tout tourne en autonomie. Suivez vos avis et la syndication depuis votre tableau de bord.

Ouvrir mon tableau de bord

Installez OpenReviews en quelques minutes