Google Reviews

The Google Reviews widget displays Google Business Reviews on your Without Code website. By leveraging Google's public API, your site can be kept in sync with the latest reviews and rating found in Google Search and Google Maps.

Google Reviews are some of the most trustworthy reviews on the web, and provide a great way to showcase credibility and increase your conversions. This widget is one of the most requested widgets all-time at Without Code, and is an essential for any business website.

Preview: https://demo.wocode.com/google-reviews

Tutorial Video


Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it in a row or column where you want the Google reviews to appear.

WIDGET OPTIONS

  • Open the widget option panel.
  • Google API Key: Enter the API Key of your Google cloud console. For detailed instructions on acquiring your API Key, see the Acquiring Your Google API Key section below.
  • Google Place ID: Enter the Place ID of your Google Place. For detailed instructions on acquiring your Google Place ID, see the Acquiring Your Google Place ID section below.
  • Show Loading Animation: This will enable or disable the 3 dot loading animation that is displayed as the widget is loading.
  • Number of Reviews to Fetch (1-5): This sets how many reviews are shown in the widget.

    Note: Due to restrictions in the Google API, it is not possible to specify which business reviews will be displayed. Instead, Google will automatically determine which reviews are most impactful and will display those reviews.
  • Display Layout: Sets whether the widget displays the reviews in a carousel or column layout.
  • Carousel Settings: When the "Carousel" display layout is selected, an additional menu is shown: Carousel Settings. The settings within this menu are self-explanatory as they are labeled with their exact function. However, we will go over one setting in greater detail:

    Loop Reviews: Enables the ability to cycle through the displayed reviews in an infinite loop.

    Note: When loop review is enabled, the truncation option (read more button) on the reviews is no longer available. This is done to avoid conflicts within the widget.

  • Place Details: This menu offers additional options specific to the place (ie: business detail)  column within the widget. The settings within this menu are self-explanatory as they are labeled with their exact function. However, we will go over one setting in greater detail:
     
    Show "Write a Review" Button: This enables or disables a button that will redirect site visitors to a new tab to google, where they can then fill out and submit a review for your business.
  • Review Details: This menu offers additional options specific to the reviews. The settings within this menu are self-explanatory as they are labeled with their exact function. However, we will go over one setting in greater detail:

    Truncate Review Content: This enables or disables the truncate functionality (ie: read more button) on the reviews.

DESIGN SETTINGS

The Design tab of the widget contains extensive options. Almost every element of the widget can be customized. The majority of these settings are labeled with their exact function and are self-explanatory, and will not be discussed individually here. However, there are a few unique settings we will mention.

  • Place Details Styling > Show Place Details: This setting enables or disables the business info planel. If your site already contains all of the business information (such as telephone number and address), you may want to disable the business info panel.
  • Place Details Styling > Place Card Placement (Desktop & Tablet): This changes which side of the widget the place card is displayed.

    Note: To change this specifically for the mobile layout, first open the mobile layout in the builder, and then change this setting.
  • Reviews Styling > Reviews Card Gap: This adjusts the space between the review cards.
  • Navigation Styling > Arrow Offset Direction: This sets whether the navigation arrows display within the widget counter, or outside the container.
  • Google Affiliation Logo Variant: This changes the “powered by Google” logo on the bottom of the widget to either be white ("Light" setting) or black text with a multi-colored Google logo ("Dark" setting).

ACQUIRING YOUR GOOGLE API KEY

The steps below describe how to acquire your Google API key. For a video walkthrough, see the second video in our Google Reviews playlist.

To acquire your Google API Key you will first need to visit the Google Cloud Console you’ll want to follow these steps:

  1. Go to this site: https://console.cloud.google.com/
  2. After logging into your account, use the hamburger menu on the top left of the page and navigate to APIs & Services > Enabled APIs & services.

  3. Click Create Project on the right-hand side of the page.

  4. After naming your project and clicking Create, on the new screen click the + ENABLE APIS AND SERVICES button on the top of the page.

  5. From the API Library page, enable both Maps JavaScript API and Places API. If these are not immediately visible in the API library, you can use the search bar on this page to locate them.

    Note: If you have not yet set up billing with Google, you will do that now.

  6. Using the hamburger menu on the top left of the page, navigate to APIs & Services > Credentials.
  7. Click +CREATE CREDENTIALS> API Key on the top of the page.

  8. You will then be given with your API key. This is the key you will copy/paste into the Google API Key field within the widget.

    Note: Keep your API key secure. To prevent others from using your key, restrict usage to your domain(s) (see step 10)

  9. Using the 3-dot menu button, select Edit API Key.
  10. From the Edit API Key page, change the Application Restriction to HTTP referrers (web sites).

  11. Click ADD AN ITEM and enter your site's URL using this format: *.website.com/* (example: *.wocode.com/* ) for the sites you wish to allow access to the API.

    To add sitemodify.com, which will allow you to preview the widget on the site and in the preview URL before publishing, you will add that as: *.sitemodify.com/site/SITEID* (example: *.sitemodify.com/site/bc0ab66e* ). Take note that for sitemodify.com specifically, you will not add a forward slash before the second asterisk.

  12. Set the API Restrictions to Restrict Key, then using the dropdown menu select both the Maps JavaScript API and Places API options.

  13. Click SAVE and your API key is setup and ready to be used in your Google Reviews widget.

GOOGLE API COST

Recent pricing structure changes on many Google services has resulted in fee changes for use of their API services. Using the Google API required for this widget is NOT free. However, Google provides a credit of $200 every month. Because of the credit, we expect that use of the Google Reviews widget will not incur a cost for the majority of users.

Google offers a credit of $200 toward API usage every month, free of charge. It is only when the $200 credit is used in the span of a month that any charge will be applied. The $200 credit results in about 12,000 requests.

We expect that most users will not exceed 12,000 requests on a monthly basis. But high volume sites and businesses will incur charges if they regularly exceed the $200 credit. 

You can learn more about the monthly $200 Google Maps Platform credit here.

To find out more information on the Google Maps Platform Billing, you can see the Google doc here.

If you believe you may exceed the $200 monthly credit, you can estimate your monthly bill by using the Pricing and Usage Calculator that google provides here. When using the calculator, use the Places tab, and focus on the Places Detail API slider.

Note: The calculator provides an estimated cost, results from the calculator should not be used as a precise measurement.

API KEY SECURITY

It is always important to keep API keys secure. And considering that API requests come at a cost when exceeding the monthly credit, it is especially important that you keep your API key secret and restrict your key to only be usable on the sites that you own. Unauthorized users that gain access to your API key could use the key themselves if there are no restrictions in place, and you would be charged for that use.

ACQUIRING YOUR GOOGLE PLACE ID

Note: if your business does not use a physical address in your Google Business listing, see this documentation.

Start by going to https://developers.google.com/maps/documentation/places/web-service/place-id#find-id

From this page scroll down to locate the Find the ID of a particular place section and enter the name of your business. Select your business from the drop-down options that appear.

Within the map, you will see a white text box appear, in that text box you will find the Place ID. Copy that ID.

Paste that into your widget's Google Place ID field.

If your place ID is not working, it may need to be refreshed. See this documentation for information on refreshing your Place ID.