How To Embed Google Reviews In HTML Website

- Advertisement -
- Advertisement -

Update 1: As of July 16, 2018 Google will require credit card information to use the Google Places API. – Not usable for a simple user.
Update 2: But I’ve updated the code, so you can still display Google Reviews without money. Check the demo link beneath of the post.- Not usable for a simple user.
Update 3: I’ve found a website, which will generate a JavaScript code and you will be able to display Google Reviews on your HTML website. The website link and demo link beneath of the post

Review or feedback present you or your business differently. A new customer can know about your business from your past customer reviews. Reviews help the customer to take the decision he will buy the product or not.

Most of the company website has a different review system. But Google reviews are popular all over the world. Google is the worldwide biggest and trustful company, so people believe the Google. By the way, Google keeps the option for people to use their reviews system. You will create your business page in Google and if a customer is happy to buy a product from your company he can leave star rating with a comment. He can leave star between 1 to 5 and a comment. The comment and star rating consider as reviews.

If your 10 new customers leave a 5-star rating with a good comment, next customer will not feel hesitate to buy the product. So it was the importance of reviews, now we will discuss- how to you can add Google reviews to your HTML or static website.

Add the HTML code where you want to show the Google reviews:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Google Review Embed in HTML website</title>
	<link rel="stylesheet" href="css/google-places.css">
</head>
<body>

<div id="google-reviews"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/google-places.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBzmKmgtHFnvDsDdZtIF8xIqUJX9NS9EyY&signed_in=true&libraries=places"></script> <!-- it is your Google API key 'AIzaSyBzmKmgtHFnvDsDdZtIF8xIqUJX9NS9EyY' --> 
<script>
	jQuery(document).ready(function( $ ) {
	   $("#google-reviews").googlePlaces({
	        placeId: 'ChIJteNEX_76KocRbtnDLyPRTRE' //Find placeID @: https://developers.google.com/places/place-id
	      , render: ['reviews']
	      , min_rating: 4
	      , max_rows:4
	   });
	});
</script>

</body>
</html>

Here follow two things in the above code. In the line-

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBzmKmgtHFnvDsDdZtIF8xIqUJX9NS9EyY&signed_in=true&libraries=places"></script>

it’s the Google API key AIzaSyBzmKmgtHFnvDsDdZtIF8xIqUJX9NS9EyY. You need to collect your own API key. Another thing is placeId-

placeId: 'ChIJteNEX_76KocRbtnDLyPRTRE'

You can get the place ID from https://developers.google.com/places/place-id. Now need to write CSS for styling-

#map-plug {
	display:none;
}
#google-reviews {
	display:flex;
	flex-wrap:wrap;
	/*display: grid;
	grid-template-columns: repeat( auto-fit, minmax(320px, 1fr));
	*/
}
.review-item {
	border:solid 1px rgba(190,190,190,.35);
	margin:0 auto;
	padding:1em;
	flex: 1 1 20%;
}
@media ( max-width:1200px) {
	.review-item {
	flex: 1 1 40%;
	}
}
@media ( max-width:450px) {
	.review-item {
		flex: 1 1 90%;
	}
}
.review-meta, .review-stars {
	text-align:center;
	font-size:115%;
}
.review-author {
	text-transform: capitalize;
	font-weight:bold;
}
.review-date {
	opacity:.6;
	display:block;
}
.review-text {
	line-height:1.55;
	text-align:left;
	max-width:32em;
	margin:auto;
}
.review-stars ul {
	display: inline-block;
	list-style: none !important;
	margin:0;
	padding:0;
}
.review-stars ul li {
	float: left;
	list-style: none !important;
	margin-right: 1px;
	line-height:1;
}
.review-stars ul li i {
	color: #E4B248;
	font-size: 1.4em;
	font-style:normal;
}
.review-stars ul li i.inactive {
	color: #c6c6c6;
}
.star:after {
	content: "\2605";
}

and finally, need to write JavaScript

/* https://github.com/peledies/google-places */
(function($) {

    $.googlePlaces = function(element, options) {

        var defaults = {
              placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' // placeId provided by google api documentation
            , render: ['reviews']
            , min_rating: 0
            , max_rows: 0
            , rotateTime: false
        };

        var plugin = this;

        plugin.settings = {}

        var $element = $(element),
             element = element;

        plugin.init = function() {
          plugin.settings = $.extend({}, defaults, options);
          $element.html("<div id='map-plug'></div>"); // create a plug for google to load data into
          initialize_place(function(place){
            plugin.place_data = place;
            // render specified sections
            if(plugin.settings.render.indexOf('reviews') > -1){
              renderReviews(plugin.place_data.reviews);
              if(!!plugin.settings.rotateTime) {
                  initRotation();
              }
            }
          });
        }

        var initialize_place = function(c){
          var map = new google.maps.Map(document.getElementById('map-plug'));

          var request = {
            placeId: plugin.settings.placeId
          };

          var service = new google.maps.places.PlacesService(map);

          service.getDetails(request, function(place, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              c(place);
            }
          });
        }

        var sort_by_date = function(ray) {
          ray.sort(function(a, b){
            var keyA = new Date(a.time),
            keyB = new Date(b.time);
            // Compar