Comment afficher les avis Google sur son Site Internet avec Webstudio ?

TUTORIEL :
Temps : 20 minutes
Difficultés : Moyenne

Objectif du tutoriel :

Dans ce guide pas à pas, nous allons vous montrer comment intégrer et afficher les précieux avis Google de votre fiche d'établissement Google Business Profile directement sur votre site internet créé avec Webstudio. En suivant ces étapes, vous pourrez :

• Mettre en avant la satisfaction de vos clients : Affichez les témoignages positifs pour renforcer la confiance des visiteurs de votre site.
• Améliorer votre référencement local : Les avis Google sont un facteur important pour le SEO local.
• Fournir une preuve sociale : Montrez aux prospects que d'autres clients ont eu une expérience positive avec votre entreprise.
• Centraliser vos informations : Intégrez vos avis là où vos clients potentiels vous trouvent.

Ce tutoriel vous guidera à travers les étapes nécessaires pour récupérer les données de l'API Google Places et les afficher élégamment sur votre site Webstudio, en vous donnant un contrôle total sur la présentation.

1/ Création de la clé API sur Google Console

Création d'un projet Google Cloud Console

La première étape et d'aller sur Google Cloud Console : https://console.cloud.google.com/ et de créer un compte si ce n'est pas déjà le cas.

Ensuite, vous devez créer un projet :

Comme le montre la capture, vous devez cliquer en haut à gauche sur le carré représentant tous vos projets, puis cliquer sur nouveau projet.

Vous devrez lui donner un nom et remplir quelques informations.

Ajout de la bibliothèque Google Places API

Vous devez maintenant cliquer en haut à gauche sur le menu puis sélectionner : API et Services/Bibliothèque

Une fois sur la bonne page, vous devez rechercher dans la barre de recherche places.
Il existe aujourd'hui deux versions de l'API Places (Google Places API et Google Places API News). Dans ce tutoriel, nous utilisons la plus ancienne.

Cliquer sur Places API, puis activer l'API.

Création de la clé API Google Place

Nous venons d'activer la bibliothèque pour venir récupérer les avis Google de votre fiche business. Maintenant, nous devons créer des identifiants uniques (à ne pas partager).
Dans le même menu que précédemment, rendez-vous dans l'onglet : API et Services/Identifiants

Cliquer sur le bouton crée une clé API.

Dans cette page, vous pouvez :

• Donner un nom à votre clé API
• Malheureusement, nous ne pouvons pas restreindre la clé API à des sites Internet bien que proposés (car l'API Google Place n'est pas compatible)
• Vous pouvez cependant restreindre la clé dans le menu : "Restrictions relatives aux API" :
  Puis dans le menu déroulant, sélectionner : "Places API"
• Afficher votre clé API, copiez-la.
• Enregistrer vos modifications

Pour plus d'informations sur l'utilisation de l'API Google Place de Google, nous vous invitons à suivre sa documentation : Documentation Google sur l'API - Section détail d'entreprise

Récupération des avis Google depuis Webstudio

Dans Webstudio, aller dans votre Body puis sur le menu de droite, dans Setting puis Data Variables, cliquer sur le + :

Comme vous pouvez le voir sur l'image :

• Donner un nom à votre variable
• Type : Ressource
• URL : "https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJV856Smp1thIRkw6CAGYBC_4&fields=name,rating,user_ratings_total,reviews&language=fr&key=VOTRE-CLE-API"
  Vous pouvez utiliser cette url qui vient récupérer les avis Google de la Place ID "ChIJV856Smp1thIRkw6CAGYBC_4" ainsi que les champs "name, rating" etc.... dans la langue française

ATTENTION :
Ici, vous devez changer la Place ID par l'ID de votre entreprise. Vous pouvez trouver facilement sur Google l'ID de votre entreprise. Il vous faut cependant une fiche Google Business. Utilisez ce site pour trouver votre Place ID: https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder

Ensuite, vous devez aussi coller votre clé API dans "key="

Vérifier ensuite en inspectant depuis Webstudio si cela a fonctionné. Vous devez avoir quelque chose comme :

{ "ok": true,

"data": {

"html_attributions": [],

"result": {

"name": "Wamimy",

"rating": 5,

"reviews": [

{

"author_name": "Marchetti Rachat véhicule",

"author_url": "https://www.google.com/maps/contrib/110557264686524275775/reviews",

"language": "fr",

"original_language": "fr",

"profile_photo_url": "https://lh3.googleusercontent.com/a/ACg8ocKeiym-meK2WKr3NNDSamw03oH4ml5z4RI3_x1pvzFi-51J-w=s128-c0x00000000-cc-rp-mo",

"rating": 5,

"relative_time_description": "il y a 5 mois",

"text": "Très professionnel je suis passé part plusieurs boîte mais jamais autant satisfait je recommande à 100%",

"time": 1732034778,

"translated": false

}

]

}

}

}

Depuis le 08/09/2025 Webstudio rajoute une option de mise en cache. Ce qui est parfait pour éviter de recharger l'API à chaque utilisation ! De mon côté j'ai choisi de créer un workflow avec n8n chaque semaine afin de push les avis sur une base de données Supabase. Ensuite, je fais un appel de mon site vers ma base de données et je mets en cache pour une durée de 24h soit 86400 secondes.

⚠️ Attention : L'utilisation de Google API peut engendrer des frais. Gardez votre clef API secrète (faites attention quand vous partagez votre projet Webstudio, par exemple). Pour ma part, j'utilise N8N afin de vérifier les avis Google de ma Fiche d'établissement toutes les semaines, et je fais une requête API sur mon N8N webhook. De cette façon, j'ai un contrôle total sur le nombre d'utilisations de la clé API.

Facultatif : Récupération des Avis Google avec L'API Google Places (New)

Attention, cette API peut devenir payante si vous dépassez un total de 5000 requêtes. (Il est possible que Google change ce quota dans le temps, à vous de vérifier).

L'API Google Place (New) permet de récupérer plus d'informations que l'ancienne API.
Voici sa documentation : Voir la documentation officielle de l'API Google Place New

Cela reste les mêmes étapes que précédemment, mais cette fois-ci, vous utiliserez une URL de type :

"https://places.googleapis.com/v1/places/ChIJV856Smp1thIRkw6CAGYBC_4?languageCode=fr&fields=reviews&key=VOTRE-CLE-API"
De la même façon ici, on récupère les "reviews" de la place "ChIJV856Smp1thIRkw6CAGYBC_4" et on filtre le langage en "fr". N'oubliez pas de remplacer par votre propre clé API.

C'était Rémy, votre créateur de site internet. Si vous rencontrez des difficultés ou avez besoin d'une expertise spéciale, fait appel à notre agence web pour la création de votre application Web