Yelp Reviews Widget Tutorial

Intro

In this tutorial, we will discuss Yelp Reviews Widget for Elementor. Premium Yelp Reviews Widget helps you to display customers reviews from Yelp.com which is one of the most popular business directory services, furthermore, it depends on crowdsourced reviews, so using Elementor Yelp Reviews Widget will allow you to display some reviews of your customers, which can help your business to attract even more customers.

Elementor Yelp Reviews Widget will provide more legitimacy to your business, which can be helpful for Restaurants, Home Services, Auto Services, Dry Cleaning, Gyms, Beauty Salons and many other kinds of businesses that depends on making customers happy within their business model.

Elementor Yelp Reviews Widget Video 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.

Click here to check Premium Yelp Reviews Widget demo.

Arrow Points at Premium Yelp Reviews Elementor Widget
Yelp Reviews Widget for Elementor

Key Features

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 Yelp Reviews Widget.
Access Credentials Settings for Yelp Reviews Widget for Elementor Page Builder
Access Credentials Settings for Yelp 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.
  • Yelp Icon: Show/hide Yelp icon in with each review.
    • Horizontal Position (%): Set horizontal position for Yelp icon in percentage.
    • Vertical Position (%): Set vertical position for Yelp icon in percentage.
Classic Skin for Yelp Reviews Widget for Elementor
Classic Skin for Yelp Reviews Widget for Elementor
Cards Skin for Yelp Reviews Widget for Elementor
Cards Skin for Yelp Reviews Widget for Elementor
Bubble Skin for Yelp Reviews Widget for Elementor
Bubble Skin for Yelp 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 Yelp Reviews Widget Place Display Options
Elementor Yelp Reviews Widget Place Display Options [Place Info Next to Reviews]

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 Yelp 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 Display Settings for Yelp Reviews Widget for Elementor Page Builder
Reviews Display Settings for Yelp Reviews Widget for Elementor Page Builder [Carousel Enabled ]

3. Place Settings

  • Place Info: Show/hide all place info elements.
  • Place Image: Show/hide place image.
  • Place Name: Show/hide place name.
  • Place Rate: Show/hide place rate.
  • Number of Reviews: Show/hide the number of reviews that have been submitted to this place on Yelp.
  • Rating Stars: Show/hide place rating stars.
Elementor Yelp Reviews Widget Place Settings
Elementor Yelp Reviews Widget Place Settings [ Hide Place Rate & Number of Reviews ]

4. Reviews Settings

Reviews Settings, in this tab you can show or hide Yelp 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.
  • Filter by Rate: Enable/Disable “Filter By Rate” option, which will allow you to display Yelp 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 Yelp Place.
    • Max Stars: (If “Filter by Rate” option is Enabled) you can set the maximum Star rating for reviews from Yelp Place.
  • Reviews Limit: Set how many reviews to show per widget. You can only pull 5 reviews from Yelp.
  • 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 Yelp 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]
Reviews Settings for Yelp Reviews Widget for Elementor Page Builder
Reviews Settings for Yelp Reviews Widget for Elementor Page Builder

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 Yelp Reviews Widget Images Style
Elementor Yelp 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 Yelp Reviews Widget
Place Info Style for Elementor Yelp 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 Yelp Reviews widget review container. Get the radius value from here.
  • Border Radius: Insert border radius values.
Elementor Yelp Reviews Widget Review Style
Elementor Yelp 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 Yelp Reviews Widget Reviewer Name Style
Elementor Yelp 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 Yelp Reviews Widget
Date Style for Elementor Yelp 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 Yelp Reviews Widget
Review Container for Elementor Yelp Reviews Widget

7. Review Text

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

Elementor Yelp Reviews Widget Review Text Style
Elementor Yelp 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 Yelp Reviews Widget for Elementor
Read More Button Style in Yelp Reviews Widget for Elementor

9. Container

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

Elementor Yelp Reviews Widget Container Style
Elementor Yelp 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 Yelp Reviews Widget Carousel Arrows Style
Elementor Yelp 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 Yelp Reviews Widget Carousel Dots Style
Elementor Yelp Reviews Widget Carousel Dots Style

Related Docs:

Download Now it's free!

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

×