How to Embed Google Reviews using HTML iFrame on Wix

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.

Lets Begin:

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 on Create 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.

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.