Reviews are a great way to show potential customers that your business is awesome and that people love what you’re doing. Let’s say you have a bunch of them on Google and you want to show those on your website. Well, using the Google Maps API and Google Places, you can and it’s really simple to do!
**One thing of note is that currently, Google will only allow you to show a maximum of five.
There’s a Few Things You Will Need
Before diving into the code, there are several things that you will need:
- An API key in order to use Google Maps. You can get one here.
- A Places ID for your business (or your client’s business). You can get that here.
- Google Places script that will help pull in the Google Reviews. You can get that here.
Once you have these things, you can start implementing the code to display the reviews. First, you need to queue up the scripts files that will be needed. Put the following code in the <head> section of your website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/google-places.js "></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=[API_KEY]"></script>
Where it says, [API_KEY], replace with the API key you generated from above.
The Code
Now, you are ready for the javascript function that will pull the reviews in and render them in the specified <div> Add this script to your main scripts file or to the <head> section of your website:
<script>
jQuery(document).ready(function() {
$("#google-reviews").googlePlaces({
placeId: '[PLACES_ID]',
render: ['reviews'],
min_rating: 5,
max_rows: 0
});
});
</script>
Let’s talk about a few things here. First, replace [PLACES_ID] with the Places ID you got from above. The min_rating is the minimum rating that you want shown on your website. For example, if you want to show only 3 star and above reviews, then you would set min_rating to 3. The max_rows parameter allows you choose how many reviews you want to show (up to 5). Setting it to 0 will default to showing as many as it can.
Lastly, you need a <div> to which these reviews will be rendered. Add this <div> where you would like your reviews to display:
<div id="google-reviews"></div>
You will most likely want to include some CSS to pretty them up (like I did above). Here is a quick CSS file that will help with that, or you can style from scratch.