this will get the 5 reviews, google offers you. if you need more, let me direct you a bit: https://developers.google.com/my-business/content/review-data#list_all_reviews - but this will be a different project all by its own

The NPM Package is here - Frontend Devs will know how to webpack :) or simply extract the code and adapt it to your needs, dropping jQuery as a dependency.

Inspired by Steven Monson's magnificent article here: https://www.launch2success.com/guide/display-google-reviews-website-2017/ or check out Steven's github. Steven's code is based on peledies jquery plugin repo. So, I simply remixed their work into this repo. Thank you guys!

For those of you, who are new in programming or can only copy-paste, please make sure, that jQuery, the Google Maps API and the .js-file of this plugin are successfully loaded, before you call this script in your html page.

./demo/index.html is a working demo, the comments will guide you 😉

• You must have jQuery in your project: jQuery

• add the .js and .css of this repo to your project (see ./demo/index.html for inspiration 😉)

• if you do not have a working Google Maps API key already: create a Google API Key: https://console.developers.google.com/apis/ make sure to set a limit to your payments

• add the following line with your Google Maps API key with the key param:

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YourApiKeyHere"></script>

• add an empty div element in your html template with an unique ID, where the reviews should show up. In this case:

  <div id="google-reviews"></div>

Please see the official Documents for this topic:
https://developers.google.com/my-business/content/review-data#list_all_reviews

• Step 1. Open a browser, but don’t use Chrome. You can use Firefox, or Edge, or even Internet Explorer but not Google Chrome because it alters the URL and your link will not work correctly.

• Step 2. Go to Google.com and search for your company’s name.

• Step 3. Find the card on the right and click “View All Google Reviews” or "Write a review"

• Step 4. Copy the URL in the address bar.

• Step 5. Now paste the URL as a link on more_reviews_button_url or write_review_button_url param.

Grab your place's ID (https://developers.google.com/places/place-id) and call it as placeId parameter, when calling the plugin.

<script>
  jQuery(document).ready(function ($) {
    if ($("#google-reviews").length == 0) {
      return;
    }
    // Find a placeID via https://developers.google.com/places/place-id
    $("#google-reviews").googlePlaceReviews({
      placeId: "ChIJZa6ezJa8j4AR1p1nTSaRtuQ",
      // the following params are optional (default values)
      header: "<h3>Google Reviews</h3>", // html/text over Reviews
      footer: "", // html/text under Reviews block
      maxRows: 5, // max 5 rows of reviews to be displayed
      minRating: 4, // minimum rating of reviews to be displayed
      months: [
        "Jan",
        "Feb",
        "Mär",
        "Apr",
        "Mai",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Okt",
        "Nov",
        "Dez",
      ],
      renderAverage: false, // render average reviews and stars
      renderReviews: true, // render reviews
      textBreakLength: "90", // length before a review box is set to max width
      shortenNames: true, // example: "Max Mustermann" -> "Max M."",
      moreReviewsButtonUrl: "", // url to Google Place reviews popup
      moreReviewsButtonLabel: "Show More Reviews",
      writeReviewButtonUrl: "", // url to Google Place write review popup
      writeReviewButtonLabel: "Write New Review",
      showProfilePicture: true,
    });
  });
</script>

Yes, of course

You do not need to update the demo folder! I will do this, when your code was merged.