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 monte la capture vous devez cliquer en haut à gauche sur le carrer représentant tout vos projets, puis clicker sur nouveau projet.

Vous devrez lui donner un nom et remplir quelques informations.

Ajout de la bibliothèque Google Places API

Vous devez maitenant clicker 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 2 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 activée 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 identifiant unique (à ne pas partager).
Dans le même menu que précédemment rendez-vous dans l'onglet : API et Services/Identifiants

Clicker sur le bouton créer 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'ai 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 là
• Enregistrer vos modifications

Pour plus d'information 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, clicker 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 viens 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.

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

Vérifier ensuite en inspectant depuis Webstudio si cela à fonctionner. 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

}, etc.....

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

Attention cette API peut devenir payante si vous dépasser 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'information 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.