A simple and easy Google reviews widget that works via api. Let’s start:
1. You need to get your google api key. To do this, go to https://console.cloud.google.com/apis/, register, add your payment details and copy your api key.
You will not have to pay any money for using the api if you do not exceed the limit of $200, for small projects it is almost impossible to do.
2. On the page where the widget will be placed, before the tag </body> add a script in which to specify your google api key
<script async defer src='https://maps.googleapis.com/maps/api/js?key=yourapikey&libraries=places&callback=initReviews'></script>
instead of yourapikey, insert your key obtained in point 1
3. Add code below to the place where the widget will be displayed:
<section class="reviews-section">
<div id="about-company"></div>
<div id="reviews" class="reviews-box"></div>
<div id="map"></div>
<div id="viev-more"></div>
</section>
4. Get your place id (your company) by specifying its name on the page – https://developers.google.com/maps/documentation/places/web-service/place-id
5. Create a file script.js and place it in a folder with your site.
6. Add in script.js code below:
function initReviews() {
const stargetter = function (starso) {
if (starso === 5) {
return '<span>★</span> <span>★</span> <span>★</span> <span>★</span> <span>★</span>'
} else if (starso === 4) {
return '<span>★</span> <span>★</span> <span>★</span> <span>★</span>'
} else if (starso === 3) {
return '<span>★</span> <span>★</span> <span>★</span>'
} else if (starso === 2) {
return '<span>★</span> <span>★</span>'
} else if (starso === 1) {
return '☆'
} else if (starso === 0) {
return ' '
} else {
return
}
};
const aboutCompany = document.getElementById('about-company');
const reviewbox = document.getElementById('reviews');
const viewMore = document.getElementById('viev-more');
const request = {
placeId: 'ChIJaXQRs6lZwokRY6EFpJnhNNE', // yours company id, get on - https://developers.google.com/maps/documentation/places/web-service/place-id
};
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function (place, status) {
console.log(place);
aboutCompany.innerHTML = '<div class="company-icon"><img src="' + place.icon + '" /></div>';
aboutCompany.innerHTML += '<div class="company-name">' + place.name + '</div>';
aboutCompany.innerHTML += '<div class="company-rating">★ ' + place.rating + '</div>';
let i;
for (i = 0; i < place.reviews.length; i++) {
reviewbox.innerHTML += '<div class="reviewcard">'
+ '<div class="reviewauthor"><img src="' + place.reviews[i].profile_photo_url + '" width="70px" title="'
+ place.reviews[i].author_name + ' rewiew' + '" alt="' + place.reviews[i].author_name + ' review' + '" /><p class="authortitle">' + place.reviews[i].author_name
+ '<div class="stars">' + stargetter(place.reviews[i].rating) + '</div>'
+ '<div class="reviewtext matchy">' + place.reviews[i].text + '</div>'
+ ' <a class="tag" href="' + place.reviews[i].author_url + '"><span>View review</span></a></p></div></div>'
;
};
viewMore.innerHTML = '<a href="' + place.url + '" class="view-more-link" rel="nofollow" target="_blank">Show more</a>';
});
}
7. Connect this script to your page. Add before the </body>
<script src="script.js"></script>
If you did not upload the script.js file to the root directory of your site, adjust the path to the file
8. Add CSS
.reviews-section {
margin: 30px 0;
}
.reviews-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -5px;
position: relative;
}
.reviewcard {
flex: 0 0 200px;
max-height: 100%;
background: #fbfbfb;
margin: 0 5px;
margin-bottom: 10px;
box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;
}
.reviewcard .reviewtext {
font-size: .85em;
}
.reviewcard .reviewauthor {
color: #505050;
display: flex;
height: 100%;
flex-direction: column;
padding: 10px;
justify-content: space-between;
align-items: center;
}
.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;
}
.view-more-link {
display: block;
max-width: 200px;
text-align: center;
color: white;
text-decoration: none;
background-color: #252729;
padding: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 15px;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: inherit;
}
.view-more-link:hover {
background-color: #070808;
}
#about-company {
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: stretch;
justify-content: flex-start;
padding: 10px 0;
margin-bottom: 20px;
box-shadow: rgb(33 35 38 / 10%) 0px 10px 10px -10px;
}
.company-name {
margin: 10px;
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
}
.company-rating {
background: #15bb6c;
color: white;
padding: 10px;
font-style: italic;
font-size: 1.1rem;
border-radius: 5px;
text-shadow: 2px 2px 0px #000000;
}
.tag {
color: #80aa07 !important;
margin: 10px 0;
}
@media (max-width: 1000px) {
.reviews-box {
justify-content: center;
}
#about-company {
justify-content: center;
}
}
Enjoy the result!