Google Reviews Widget Tutorial

Intro

Build a trustworthy relationship with your customers by showing off real customers reviews/testimonials using Google Reviews Widget for Elementor.

Elementor Google Reviews Widget contains numerous customization options that will allow you to make it stand out.

Click here to check Elementor Google Reviews Widget demo.

Elementor Google Reviews Widget Tutorial

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

  • Access Credentials
  • Display Options
  • Place Settings
  • Review Settings

1. Access Credentials

  • API Key: The API key is a unique identifier that is used to authenticate requests linked with your project for usage and billing purposes. Enter the API key in the text box. For further reading about how to get your API key, please check this article.
  • Place ID: A place ID is a textual identifier that uniquely identifies a place. Enter your Place ID in the text box.
  • Clear Cached Data: Clear cached reviews in Premium Google Reviews Widget.
Access Credentials for Google Reviews Widget for Elementor Page Builder
Access Credentials for Google Reviews Widget for Elementor Page Builder

2. Display Options

There are two tabs under the display options, Place and Reviews.

  • Skin: There are three 3 skins available to show your reviews.
    • Classic: Show reviewer image, name, date of review, rating then reviewer text.
    • Cards: Show reviewer text, reviewer image, rating, name then date of review.
    • Bubble: Show your reviews in a kind of bubble view.
  • Google Icon: Show/hide Google icons in with each review.
    • Horizontal Position (%): Set horizontal position for Google icon in percentage.
    • Vertical Position (%): Set vertical position for Google icon in percentage.
Classic Skin for Google Reviews Widget for Elementor
Classic Skin for Google Reviews Widget for Elementor
Cards Skin for Google Reviews Widget for Elementor
Cards Skin for Google Reviews Widget for Elementor
Bubble Skin for Google Reviews Widget for Elementor
Bubble Skin for Google Reviews Widget for Elementor

Place

  • Place Info Next to Reviews: Enable this option to place info (image, name, rating and rating stars) beside reviews.
    • Reviews Width (%): Set reviews column width in percentage.
    • Vertical Alignment: Align place info to top, center and bottom.
  • Replace Place Image: Enable or disable replace image option. This option will allow you to set a custom image for the place/business instead of showing the original one.
    • Upload Image: Upload the image or choose from the media library. This option is available when you enable the “Replace Place Image” option.
    • Image Size: Set image size for the uploaded image.
  • Display: Adjust the display, choose from block or inline.
  • Image Alignment: Align image to top, center and bottom. (available with inline display)
  • Text Horizontal Alignment: Align place name to left, center or right. (available with inline display)
  • Text Vertical Alignment: Align place name to top, center and bottom. (available with inline display)
  • Direction: Set the direction for your place LTR or RTL which is very helpful for Right to Left websites. (available with inline display)
  • Place Alignment: Set the alignment to left, right or center.
Elementor Google Reviews Widget Place Display Options
Elementor Google Reviews Widget Place Display Options

Reviews

  • Reviews/Row: Make the reviews appear on just one column, 2 columns, or you can make it appear on the maximum number of columns which is 6 columns.
  • Image Position: Set reviewer image position: above name (reviewer), left of name (reviewer) and left of all content.
    • Text Alignment: Align review text to top, center and bottom. (available with left of name).
    • Image Alignment: Algin image to top, center and bottom. (available with left of all content).
  • Content Alignment: Set the content alignment to left, right, justify or center.
  • Direction: Set direction of Review image, text and stars RTL or LTR.
  • Carousel: Enable/disable carousel for Elementor Google reviews.
    • Infinite Autoplay: Enable/disable infinite liner carousel autoplay.
      • Rows/Column: Set how many rows to show per column.
      • Autoplay Speed: Set the autoplay speed for the infinite autoplay carousel in ms.
    • Auto Play: Enable or disable autoplay.
      • Autoplay Speed: Set the autoplay speed for the carousel in ms.
    • Navigation: Select navigation type for carousel none, arrows, dots and dots & arrows.
    • Arrows Position: Set the arrows’ position in pixels or em.
    • Dots Position: Set the dots’ position in pixels or em.
    • RTL Mode: Enable or disable RTL mode. This option is recommended for the right to left languages.
Reviews Carousel for Elementor Google Reviews Widget
Reviews Carousel for Elementor Google Reviews Widget

3. Place Settings

  • Place Info: Show/hide all place info elements.
  • Place Image: Show/hide place image.
  • Place Name: Show/hide placename.
  • Place Rate: Show/hide place rate.
  • Number of Reviews: Show/hide the number of reviews that have been submitted to this place on Google.
  • Rating Stars: Show/hide place rating stars.
Place Settings for Google Reviews Widget for Elementor Page Builder
Place Settings for Google Reviews Widget for Elementor Page Builder

4. Reviews Settings

Reviews Settings, in this tab you can show or hide Google reviews elements.

  • Show Reviewer Image: Show/hide reviewer image.
  • Show Stars: Show/hide review stars rating.
  • Show Date: Show/hide review date.
    • Date Position: Set date position above rating stars or below them. (available with Show Stars)
    • Date Format: Set review date format: DD/MM/YYYY, MM/DD/YYYY or Full Date.
  • Show Review Text: Show/hide review text.
    • Hide Reviews With Empty Text: Show/hide empty text reviews.
    • Review Words Length: Set how many words to show per review.
    • Read More Text: Change read more button link text.
  • Get Reviews By Language: Enter language prefix, eg. en for English, ja for Japanese, if you don’t know your language prefix, please check here
  • Filter by Rate: Enable/Disable “Filter By Rate” option, which will allow you to display Google Place Reviews based on specified customers’ rating stars.
    • Min Stars: (If “Filter by Rate” option is Enabled) you can set the minimum Star rating for reviews from Google Place Place.
    • Max Stars: (If “Filter by Rate” option is Enabled) you can set the maximum Star rating for reviews from Google Place Place.
  • Reviews Limit: Set how many reviews to show per widget. You can only pull 5 reviews from Google
  • Rating Schema: Enable/disable “Rating Schema”. This option improves SEO as it helps search engines to understand your website better, in addition, it improves website chance for ranking position within search engine results.
    • Schema Type: Select the type of schema for your rating:
      • Place
      • Organization
      • Service
  • Reload Reviews Once Every: Set how often to reload Google Place Reviews (to get latest reviews), so you can set it to Reload once every: Hour, Day, Week, Month or Year. [Week or Month is recommended]
Elementor Google Reviews Widget Reviews Settings
Elementor Google Reviews Widget Reviews Settings

Style

  • Images
  • Place Info
  • Review
  • Reviewer Name
  • Date
  • Review Text
  • Review Container
  • Readmore Text
  • Container
  • Carousel Arrows
  • Carousel Dots

1. Images

There are two tabs under the image style options i.e. place and review. There are different style options, you can resize the image as you want, there are several options related to the border of the images, it includes border-radius and border type. There are different box-shadow customization options and you can also set the margin according to your choice.

Elementor Google Reviews Widget Images Style
Elementor Google Reviews Widget Images Style

2. Place Info

There are three tabs under the place info style options i.e. Container, Name, and Rate.

  • Container: In container tab, you have different options such as background type, you can choose from gradient or classic style. Other options include choosing the color, uploading the image, border options, margin and padding options.
  • Name: Under this tab, there are options related to name text, color, typography, and text-shadow, etc.
  • Rate: This tab contains option related to ratings, it includes the star size, star color, text size, text-shadow, etc.
Place Info Style for Elementor Google Reviews Widget
Place Info Style for Elementor Google Reviews Widget

3. Review

This tab includes the option related to review display style. You can set the star color, star size, and background. There are different options related to the review box border styles, box-shadow, margins, and padding.

  • Advanced Border Radius: Apply custom radius values for Elementor Google Reviews widget review. Get the radius value from here.
  • Border Radius: Insert border radius values.
Elementor Google Reviews Widget Review Style
Elementor Google Reviews Widget Review Style

4. Reviewer Name

Under this tab, there are several options related to the reviewer name style options. You can adjust the text color, hover color, typography, and margins.

Elementor Google Reviews Widget Reviewer Name Style
Elementor Google Reviews Widget Reviewer Name Style

5. Date

This tab contains style settings for the date. Options such as color, hover color, typography, and margins.

Date Style for Elementor Google Reviews Widget
Date Style for Elementor Google Reviews Widget

6. Review Container

Under this tab, there are several options related to the review container for Bubble skin style options. You can adjust set background, border, margin and padding.

Review Container for Elementor Google Reviews Widget
Review Container for Elementor Google Reviews Widget

7. Review Text

This tab contains style settings related to the review text. Options include color, typography, and margins.

Elementor Google Reviews Widget Review Text Style
Elementor Google Reviews Widget Review Text Style

8. Read More Text

This tab contains style settings related to the Read more link text. Options include color, hover color, typography, and margins.

Read More Button Style in Google Reviews Widget for Elementor
Read More Button Style in Google Reviews Widget for Elementor

9. Container

Adjust the styling of the container of google reviews from here. It contains different options such as max-width, alignment, background-type, border type and radius, box-shadow, margin, and padding.

Elementor Google Reviews Widget Container Style
Elementor Google Reviews Widget Container Style

10. Carousel Arrows

This tab includes numerous style settings related to the carousel in the Elementor widget. You can set the color, size, background color, border properties, and padding for carousel navigation arrows.

Elementor Google Reviews Widget Carousel Arrows Style
Elementor Google Reviews Widget Carousel Arrows Style

10. Carousel Dots

This tab includes numerous style settings related to the carousel in the Elementor widget. You can set the color and background color carousel navigation arrows.

Elementor Google Reviews Widget Carousel Dots Style
Elementor Google Reviews Widget Carousel Dots Style

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.