How to Embed Google Reviews in Webflow?

by

Embedding Google Reviews in Webflow can be a powerful way to showcase social proof and build trust with your website visitors. With just a few simple steps, you can seamlessly integrate your Google reviews into your Webflow site. In this tutorial, we will walk you through the process of embedding Google Reviews using HTML.

Step 1: Create a Google API Key

If you haven’t already, the first step is to create a Google API key. This key will allow your website to interact with the Google Places API and fetch the reviews for your business. To create an API key, follow these steps:

  1. Go to the Google Cloud Platform Console.
  2. Click on the project drop-down and select or create the project you want to use for the API key.
  3. In the sidebar menu, click on “APIs & Services” and then “Credentials”.
  4. Click on “Create Credentials” and select “API Key”.
  5. Your API key will be generated. Make sure to copy it as we will need it later.

Step 2: Get your Place ID

Next, we need to find the Place ID for your business. The Place ID is a unique identifier for a specific place on Google Maps. To find your Place ID, follow these steps:

  1. Go to Google Maps.
  2. Type in your business name in the search bar.
  3. Once you find your business on the map, right-click on it and select “What’s here? “.
  4. A small window will pop up at the bottom of the screen with information about the place.

    The Place ID will be displayed in this window. Copy it for later use.

Step 3: Embed Google Reviews in Webflow

Now that you have your API key and Place ID, it’s time to embed the Google Reviews into your Webflow site. Follow these steps:

  1. Create a new HTML embed element in Webflow.
  2. Paste the following code into the embed element:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
function initMap() {
  var request = {
    placeId: 'YOUR_PLACE_ID',
    fields: ['reviews']
  };

  var service = new google.maps.places.PlacesService(document.createElement('div'));

  service.getDetails(request, function(place, status) {
    if (status == google.PlacesServiceStatus.OK) {
      place.reviews.forEach(function(review) {
        var reviewElement = document.createElement('div');
        var ratingElement = document.createElement('span');
        var authorElement = document.createElement('span');
        
        ratingElement.innerHTML = review.rating + ' stars';
        authorElement.author_name;
        
        reviewElement.appendChild(ratingElement);
        reviewElement.appendChild(authorElement);
        
        document.body.appendChild(reviewElement);
      });
    }
  });
}
</script>

Make sure to replace “YOUR_API_KEY” with your actual API key and “YOUR_PLACE_ID” with your actual Place ID.

Conclusion

Congratulations! You have successfully embedded Google Reviews into your Webflow site using HTML.

By incorporating social proof through customer reviews, you can enhance the credibility of your business and attract more potential customers. Remember to regularly update your Google Reviews widget to keep your website content fresh and relevant.

With the power of HTML and the integration capabilities of Webflow, you can easily leverage the benefits of Google Reviews and boost your online presence. Start implementing this feature on your website today!