How to Display Google Reviews on Your Website: A Step-by-Step Tutorial – IT Solver Support

Learn how to easily showcase Google reviews on your website with this detailed guide, inspired by Double Marvellous's original script and enriched with insights from the community.

Introduction

Integrating Google reviews on your website can significantly enhance your online presence and credibility. This guide simplifies the process, addressing common challenges and offering practical solutions.

Why Display Google Reviews?

Showcasing Google reviews directly on your site can boost user trust, improve SEO, and increase engagement by highlighting positive customer experiences.

Getting Started

Before adding Google reviews to your site, ensure you have access to Google Maps Platform and can insert HTML into your website.

Step 1: Obtain a Google Maps API Key

Step 2: Enable APIs

Ensure both the Places API and Google Maps JavaScript API are enabled for your project. Acquire your API key via Google Developers.

Step 3: Find Your Place ID

Locate your Place ID using one of the following methods based on your business type:

Physical locations: Use the Place ID Finder provided by Google.
Service-area businesses: Navigate to Google Maps, search for and select your business listing. Right-click to view the page source, and find the "placeid" within the URL. It will start with "ChIJ"

Step 4: Implement the Script

Using the below script provided by Double Marvellous, replacing placeholders with your specific API key and Place ID, to display up to 5 Google reviews on your site. If you have billing setup with Google Cloud Console, you should get more than 5 reviews.

<style> .reviews-section{background: #f7f6f6;}.reviewcard{} .reviewcard .reviewtext{font-size: .85em; } .reviewcard .reviewauthor{border-top: 1px solid #d8c9d8; padding-top: 1em; margin-top: 1em; } .reviewcard .reviewauthor .authortitle{font-size: 1.1em; font-weight: 600; width: 100%; } .reviewcard .reviewauthor .authortitle a{font-size: .85em; font-weight: 300; color: #d8c9d8; float: right; } .stars span{color: #ffc633; font-size: 1.5em; } </style>


<!-- ////////reviews////////// -->
<section class="reviews-section doublemarvellous">
  <div class="container">

<div id="reviews" class="columns is-marginless is-multiline"></div>
<!-- /////////we're hiding this map///////// -->
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&libraries=places&callback=initReviews">
</script>
<script>
//doublemarvellous get google reviews show stars
function initReviews() {

const stargetter = function(starso){
if(starso === 5){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 4){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 3){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 2){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 1){
return '&#9734'
} else if (starso === 0){
return '&nbsp;'
} else {
return
}
};
const reviewbox = document.getElementById('reviews');
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.866, lng: 151.196},
zoom: 15
});
//
const request = {
placeId: 'YOURPLACEIDHERE',
fields: ['name', 'formatted_address', 'place_id', 'geometry', 'reviews']
};
//
var service = new google.maps.places.PlacesService(map);
//
service.getDetails(request, function(place, status) {
console.log(place.reviews);
//
let i;
for (i = 0; i < place.reviews.length; i++) {
reviewbox.innerHTML += '<div class="column is-one-third reviewcard"><div class="reviewtext matchy">'+place.reviews[i].text + '</div><div class="stars">'+
stargetter(place.reviews[i].rating)
+'</div><div class="reviewauthor"><p class="authortitle">'+place.reviews[i].author_name + ' <a class="tag" href="'+place.reviews[i].author_url + '"><span>Read Review</span></a></p></div></div>';
}
});
}
</script>

  </div>
</section>
<!-- /////////end reviews///////// -->

Expert Tips & Community Insights

Confirm the integration's functionality as of the latest update and ensure correct Place ID and API key usage.
Explore dynamic display options, like using Swiper JS for a review slideshow.
Address potential issues by checking for console errors and verifying Google Maps billing is enabled.
Note that displaying more than 5 reviews may require verification or a paid API plan.
Avoid automatic translation of reviews by specifying a language parameter in the API URL.

Need More Help?

For further assistance or questions, IT Solver is ready to support you. Visit our support plans for personalized help tailored to your needs.