Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

googlereviewmultiple

// Add Shortcode
function custom_shortcode() {

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Google Review Embed in HTML website</title>
		<style>
		    #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";
	}
		</style>
	</head>
	
	<div id="google-reviews"></div>
	 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script> (function($) {
	 
	    $.googlePlaces = function(element, options) {
	 
	        var defaults = {
	              placeId: 'ChIJO4ekJf_uDzkRFQJlQ18nE3c' // 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);</script>
	
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBnQ0WlS-upkuh0SE9bjSIa6fQ7VvW_gZg&signed_in=true&libraries=places"></script>
	
	<script>
		jQuery(document).ready(function( $ ) {
		   $("#google-reviews").googlePlaces({
		        placeId: 'ChIJO3ABrv7uDzkR2cm0AOWzJms' //Find placeID @: https://developers.google.com/places/place-id
		      , render: ['reviews']
		      , min_rating: 3
		      , max_rows:4
		   });
		});
	</script>
	
	
	
	
	</body>
	</html>

}
add_shortcode( '', 'custom_shortcode' );