Getting Started
Currently if you search for terms like 'embed Google reviews' or 'display Google reviews on my Wix website', you probably won't find any complete tutorials on this. If you want to avoid linking to your search results page on Google then this is the tutorial article for you.
Step #1
Understanding Google's API
Per Google's API, you can only display up to 5 reviews at one time. Even if you copy and paste the code several times, the limit is still set to 5 reviews. You can add a button to your page and link it straight to your Google Business listings page if you would like for your website visitor to read the rest of your reviews.
Step #2
Obtaining your Google Places ID
The Google Places ID is needed in the code to identify your Business. To find your Google Places ID, you can visit: https://developers.google.com/places/place-id or you can also visit https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder When you find your business, your results will show your Business Name, Place ID XXXXXXXXXXXXXXXXXX, and your Address. Copy & Save the Google Places ID listed after the word Place ID. Make sure not to copy any spaces before or after the code. Also, make sure not to copy the word Place ID.Â
Step #3
Obtain a Google Maps API Key
You will need a Google Maps API key that is 'activated' in order to allow the script code to run on your website. Visit your Google API Console Dashboard:  https://console.developers.google.com/apis/dashboard
Click on Library from the left side menu.
Then click on or search for Maps JavaScript API from the list of available APIs and enable it.
After you have enabled the Maps JavaScript, click on Manage then Credentials to view a list of API keys.
If you already have an API key, you can Copy & Save this key for the code we will be using to embed your Google Reviews on your website. If you do not have an API key, click on Credentials in the API Manager link (as seen in the picture above) to create a new one. Then continue by clicking onCreate Credentials then select API key from the dropdown list of choices.
You will then see a new API key appear in a pop window. You can Copy & Save this API key or continue by setting up restrictions and other settings to your API key (optional).
Step #4
Prepare the Code
<div id="google-reviews"></div><link rel="stylesheet"type="text/css"href="https://http://abc.eznettools.net/heavensbesttemplate/js_css/google-places.css"></script><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scripttype="text/javascript"src="https://cdn.jsdelivr.net/gh/stevenmonson/googleReviews@6e8f0d794393ec657dab69eb1421f3a60add23ef/google-places.js"></script><scripttype="text/javascript"src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&signed_in=true&libraries=places"></script> <scripttype="text/javascript">$(document).ready(function () { $("#google-reviews").googlePlaces({ placeId: 'ZZZZZZZZZZZZZZZZZZZ'//Find placeID @: https://developers.google.com/places/place-id, render: ['reviews'] , min_rating: 5 , max_rows:5 }); }); </script>On line 6, replace the "XXXXXXXXXXXXXXXXXX" with your Maps API Key. And on line 10, replace the "ZZZZZZZZZZZZZZZZZ" with your Google Places ID.Â
Notice line 12 has the number 5 at the end. This means that only the reviews with a minimum of a 5 star rating will appear in your feed. You can change this number to whatever you'd like.
Step #5
Add iFrame element to your Wix Page
Inside of the Wix Editor, click on More from the left side menu. Then drag and drop an HTML iframe to the page.
Step #6
Add the Code
Click on the iFrame settings to paste the code you prepared in Step 4. Click Apply to save the code to the iFrame. Click Save & Publish on your site to make your changes live.
If you do not see your reviews right after publishing, refresh the editor or exit the editor and open the editor once again.
As time goes by, you will notice that the reviews automatically update according to the reviews you receive on Google. To keep them active and visible on your make sure to: never remove the 'physical address' of your business, never use 'zones' or 'service areas', you must always only have 1 location with 1 address. If you have multiple locations for your business, we recommend posting them separately on Google and verify each address individually.
CSS / Design & Display of reviews
In line 3 of our code, we use a simple design found on EZNet Tools. If you know CSS & HTML, then you can edit your code to design however you'd like.
Author
by Code Queen
Stuck on a project? Hire Code Queen, LLC!
Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.
Online Booking: Discovery Session
Contact Form: Send project details