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);
            // Compare the 2 dates
            if(keyA < keyB) return -1;
            if(keyA > keyB) return 1;
            return 0;
          });
          return ray;
        }

        var filter_minimum_rating = function(reviews){
          for (var i = reviews.length -1; i >= 0; i--) {
            if(reviews[i].rating < plugin.settings.min_rating){
              reviews.splice(i,1);
            }
          }
          return reviews;
        }

        var renderReviews = function(reviews){
          reviews = sort_by_date(reviews);
          reviews = filter_minimum_rating(reviews);
          var html = "";
          var row_count = (plugin.settings.max_rows > 0)? plugin.settings.max_rows - 1 : reviews.length - 1;
          // make sure the row_count is not greater than available records
          row_count = (row_count > reviews.length-1)? reviews.length -1 : row_count;
          for (var i = row_count; i >= 0; i--) {
            var stars = renderStars(reviews[i].rating);
            var date = convertTime(reviews[i].time);
            html = html+"<div class='review-item'><div class='review-meta'><span class='review-author'>"+reviews[i].author_name+"</span><span class='review-sep'>, </span><span class='review-date'>"+date+"</span></div>"+stars+"<p class='review-text'>"+reviews[i].text+"</p></div>"
          };
          $element.append(html);
        }
        
        var initRotation = function() {
            var $reviewEls = $element.children('.review-item');
            var currentIdx = $reviewEls.length > 0 ? 0 : false;
            $reviewEls.hide();
            if(currentIdx !== false) {
                $($reviewEls[currentIdx]).show();
                setInterval(function(){ 
                    if(++currentIdx >= $reviewEls.length) {
                        currentIdx = 0;
                    }
                    $reviewEls.hide();
                    $($reviewEls[currentIdx]).fadeIn('slow');
                }, plugin.settings.rotateTime);
            }
        }

        var renderStars = function(rating){
          var stars = "<div class='review-stars'><ul>";
                            
          // fill in gold stars
          for (var i = 0; i < rating; i++) {
            stars = stars+"<li><i class='star'></i></li>";
          };

          // fill in empty stars
          if(rating < 5){
            for (var i = 0; i < (5 - rating); i++) {
              stars = stars+"<li><i class='star inactive'></i></li>";
            };
          }
          stars = stars+"</ul></div>";
          return stars;
        }

        var convertTime = function(UNIX_timestamp){
          var a = new Date(UNIX_timestamp * 1000);
          var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
          var time = months[a.getMonth()] + ' ' + a.getDate() + ', ' + a.getFullYear();
          return time;
        }

        plugin.init();

    }

    $.fn.googlePlaces = function(options) {

        return this.each(function() {
            if (undefined == $(this).data('googlePlaces')) {
                var plugin = new $.googlePlaces(this, options);
                $(this).data('googlePlaces', plugin);
            }
        });

    }

})(jQuery);

In the HTML I’ve called the JS and CSS file. The live demo is here and the the website link is here

Google-Reviews

If have any questions or comment, please leave a comment below. Thanks for reading the article. Share the article on your social profiles.

- Advertisement -
Mofizulhttp://mofizul.com
Web Developer & Front-end Expert

Related Articles

41 COMMENTS

    • Hi Sietse,

      I’ve checked your website. It’s a WordPress based website. But the tutorial for only HTML/CSS/JavaScript based static website. For the WordPress, there have many essential plugins. Try with that.

      Thanks.

    • Hi,

      As of July 16, 2018, Google will require credit card information to use the Google Places API. So I’ll try to update the code – how to we can display google reviews without a premium member.

      Thanks.

  1. Hello,

    The demopage is a blank page for me (Google Chrome), though the source code is there.
    This method is no longer valid?

    Thank you

    • Hi,

      As of July 16, 2018, Google will require credit card information to use the Google Places API. So I’ll try to update the code – how to we can display google reviews without a premium member.

      Thanks.

  2. Hi there. i have customised the html code with my api and cid. what i dont understand, is how to use the java and css codes you provided. do i save them in txt files and then alter their ending to .java and .css? what should i name them if they are called?? any help in that? thank you so much

    • Hi John,

      Sorry to hear that.

      The code is now outdated. Now I’m on vacation. I’ll back ASAP and then I’ll update the code. I’ll not forget to send you a message that I’ve updated the code.

      Stay with us.

  3. Thank you for the code update. 2 questions:
    how do i create the css and javascript?
    do i copy the codes in 2 txt files, and change their ending to css and js ? and what should their name be? since you call them in the html code?
    Sorry for this question, but i am not an expert in coding….

    also, i checked the demo link and it isnt showing any results?

    Thank you again for all you efforts to help the community

  4. Hi,
    Great article…
    i have done all things and after adding Place id i can see our reviews but there is an problem that all the reviews are not shown just 5 reviews are show.
    plz help me regarding this issue.
    Thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

35,800FansLike
75,435FollowersFollow
6,048,675SubscribersSubscribe
- Advertisement -

Latest Articles