Yelp Reviews Widget Tutorial

Intro

In this tutorial, we will discuss Yelp Reviews Widget for Elementor. By using Yelp Reviews Widget you would be able 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

Content

  • Access Credentials
  • Display Options
  • Advanced Settings

1. Access Credentials

In the Access Credentials tab, you can add your Yelp Reviews API Key and Business ID in order to get Elementor Yelp Reviews Widget to work properly.

API Key: This is a unique identifier used to authenticate requests, so enter your API Key in the text box. For further reading about how to get Yelp Reviews API key, please check How to Get Yelp API Key article.

Business ID: This is a key you add to show Yelp Reviews on your site using Yelp Reviews Widget for Elementor. For further reading about how to get Yelp Reviews Business ID, please check How can I Get Yelp Business ID article.

Screenshot Displays The Yelp Reviews Access Credentials for Elementor Yelp Reviews Widget, Including API Key, and Business ID
Add Access Credentials: API Key, Business ID for Yelp Reviews Widget

2. Display Options

In the Display Options tab, you can set how to display the content of Elementor Yelp Reviews Widget on your site.

Place
  • Replace Place Image: This option will allow you to enable/disable replacing the original image that comes from your page on Yelp.com with another one of your choice.
    • Upload Image: Upload a different image for the place.
    • Image Size: Set image size for the uploaded image.
Arrow points at Image Size options for Yelp Place, Replace Place Image in Elementor Yelp Reviews Widget
Display Options – Replace Place Image – Image Sizes Elementor Yelp Reviews Widget
  • Display: Set Place to Display Block or Inline.
  • Place Alignment: Align Place content to display Left, Center, Right.
  • Display: Choose from Block or Inline. This option will be applied to the place image, place name, and the review stars.
  • Place Alignment: Align place content to display Left, Center, or Right.
Elementor Yelp Reviews Widget, Screenshot of Place's Display Options
Display Options [Place] Settings in Elementor Yelp Reviews Widget
Screenshot Shows an Example for Place's Display Options in Elementor Yelp Reviews Widget
Display Options: [Replace Place Image, Image Size, Display, Place Alignment] – Elementor Yelp Reviews Widget
Reviews
  • Reviews/Row: Select the number of review columns per row in Yelp Reviews Widget, the maximum number of reviews in a row is 3 Yelp Reviews.
  • Display: Set Yelp customers’ reviews to display to Block or Inline in Yelp Reviews Widget.
  • Layout: Set customers reviews’ layout to display Even or Masonry in Elementor Yelp Reviews Widget.
  • Content Alignment: Align Yelp customers’ reviews to display Left, Center, Right or Justify.
  • Carousel: Enable/Disable carousel for Yelp customers reviews.
    • Auto Play: Enable/disable autoplay for the carousel.
    • Autoplay Speed: Set the speed for customers’ reviews Carousel Autoplay, which means at which time the next slide should come. Set a value in milliseconds (ms), [1 second = 1000 milliseconds].
    • Arrows Position: Set navigation arrows position on Yelp customers’ reviews Carousel in Yelp Reviews Widget for Elementor.
    • RTL Mode: Enable/ Disable RTL Mode (Right to Left), it is recommended for right to left Sites.

Note: Carousel Option for Yelp Reviews Widget only Works with Even Layout.

Elementor Yelp Reviews Widget, Screenshot of Reviews Display Options
Display Options, [Reviews] for Yelp Reviews Widget
A Screenshot Shows Elementor Yelp Reviews Customization Options With an Example.
Display Options [Reviews] tab, Elementor Yelp Reviews Widget (Carousel)

3. Advanced Settings

Advanced Settings, in this tab you can customize Yelp Reviews Elementor Widget’s options to display to your liking.

  • Place Info: Enable/Disable Place Info on Yelp Reviews widget which allows you to display main information about the place and its overall Yelp Rating (reputation).
  • Place Rate: Enable/Disable the place rate allows you to show or hide your overall place rating that comes from Yelp.com.
  • Show Review Text: Enable/Disable Show Review Text option allows you to display or hide customers’ reviews on your Yelp Reviews Elementor Widget.
  • Show Stars: Enable/Disable “Show Stars” option allows you to display or hide customers’ rating stars.
  • Show Date: Enable/Disable “Show Date” option allows you to show or hide the date of each review posted on Yelp.com.
    • Date Position: You can select where to show the date, Above Stars, or Below Stars (Customer Rating Stars).
    • Date Format: You can select how to display the review date, either (DD/MM/YYYY), or (MM/DD/YYYY).
  • Filter by Rate: Enable/Disable “Filter By Rate” option, will allow you to display Yelp 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.com.
    • Max Stars: (If “Filter by Rate” option is Enabled) you can set the maximum Star rating for reviews from Yelp.com.
  • Reviews Limit: Set the Number of Reviews Limit to be displayed on your site (Maximum number of Yelp Reviews that can be displayed is 3).
    • Number of Reviews: (If “Reviews Limit” option is Enabled) you can set the number of Yelp reviews to display.
  • Review Words Length: Set Yelp Reviews Words Length, to be displayed on Elementor Yelp Reviews Widget. “Read More” button will appear under the long reviews when you click on it, you will be redirected to read the full review on Yelp.com.
  • 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 engines results.
    • Schema Type: Select the type of schema for your rating:
      • Place
      • Organization
      • Service
Screenshot Displays An Arrow Points at Schema Rating on Google Search Result in Elementor Yelp Reviews Widget
Rating Schema for Search Engines, [Rating Schema] on Search Results, Yelp Reviews Widget
  • Reload Reviews Once Every: you can set how often reload Yelp 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]
A Screenshot Shows The  Available Advanced Settings in Yelp Reviews Widget for Elementor Page Builder
The Advanced Settings in Yelp Reviews Widget for Elementor
Two Screenshots, [Left] Shows Elementor Yelp Reviews Widget Advanced Settings, [Right] Displays a demo for Advanced Settings
Advanced Settings Demo, Elementor Yelp Reviews Widget

Style

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

1. Images

From here, you will be able to customize and style the place image and the reviewer image.

Place
  • Size: Set the size of the place image or you can keep the default value as it is.
  • Border Type: Set a border type for the place image. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width: Set border width.
  • Color: Choose a color for your border.
  • Border Radius: Set Border Radius using pixels, percentage, or em. Higher border-radius means more circular border.
  • Shadow: Set a shadow for the place’s image.
  • Margin: Creates space around the place image, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).
Available Styling Options for Place's Image in Yelp Reviews Elementor Widget
Place’s Image Styling Options Available in Elementor Yelp Reviews Widget
Review
  • Size
  • Border Type
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Width
  • Color
  • Border Radius
  • Shadow
  • Margin
The Available Styling Options for Reviewers' Images in Elementor Yelp Reviews Widget
Reviewers’ Images Styling Options in Yelp Reviews Elementor Widget

2. Place Info

In this tab, you can style the Place Info elements such as (Container, Name, and Rate).

Container
Screenshot Displays The Available Styling Options for The Place Info Container for Elementor Yelp Reviews Widget
Place Info [Container] tab Settings, Elementor Yelp Reviews Widget
  • Background Type: Set background for the place info container.
    • Classic Background: Color, or Image Background.
    • Gradient Background: Set background using gradient colors.
  • Border Type: Set Border Type for Place Info Container.
    • Width: Set border width.
    • Color: Set color for Border Type.
  • Border Radius
  • Box Shadow: Set Box Shadow Styling for Place Info Container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin
  • Padding: Creates space around Container’s content, inside of any defined margins and/or borders. You can set Place Info Container Padding in Pixel (px), Em (em), or Percentage(%) Note* Padding does not accept negative values.
Box Shadow Group Controls Available in Place Info Container Tab in Elementor Yelp Reviews Widget
Place Info Container Tab, [Box Shadow] Styling Settings in Yelp Reviews Widget for Elementor
Name
Screenshot Displays Styling Options Available for Elementor Yelp Reviews Widget Place's Info Name
Place Info [Name] Tab, Yelp Reviews Widget in Yelp Reviews widget for Elementor
  • Text Color: Select Text Color for Place info Name.
  • Hover Color: Select Hover Color for Place info Name.
  • Typography: Set font styling for Place’s Name.
    • Family: Select Font Family for the Title.
    • Size: Set Font Size for the Title.
    • Weight: Select Font Weight for the Title.
    • Transform: Select Font Transform for the Title.
    • Style: Select Font Styling: Normal, Italic, Oblique.
    • Decoration: Select Font Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set Font Line-Height.
    • Letter-Spacing: Set Font Letter-Spacing.
  • Text Shadow: Set Place Info Text Shadow Styling.
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Margin
Screenshot Shows Typography Group Controls Available in Place Info Name Tab in Elementor Yelp Reviews Widget
Place Info Name’s Typography Group Control in Elementor Yelp Reviews Widget
Elementor Yelp Reviews Widget Text Shadow Group Controls to Style Place Info Name
Place Info Name Text Shadow Styling Options in Elementor Yelp Reviews Widget
Shows Place Info Name Typography Group Controls, Right Display a Demo for Styling Place's Info Name in Yelp Reviews Widget for Elementor
Place Info Name’s Styling Typography Example in Yelp Reviews Widget for Elementor
Rate
  • Star Size: Set the size of the Overall Star Rating in Place Info Rating.
  • Star Color: Set the Filled (rated) Star Color.
  • Empty Star Color: Set the Empty Star Color.
  • Text Color
  • Typography
    • Family
    • Size
    • Weight
    • Transform
    • Style
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height
    • Letter-Spacing
  • Text Shadow
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Margin
The Screenshot Shows Available Styling Options in Place Info Rate Tab in Yelp Reviews Widget for Elementor
Place Info Rate [Overall Rating] Styling Options Elementor Yelp Reviews Widget
Screenshot of Place Info Rate Tab Styling Settings, Shows Arrow Points at Place's Info Rate in Yelp Reviews Widget for Elementor
Elementor Yelp Reviews Widget – Place Info Rate Styling Example

Review

In this tab, you can style the star ratings which come from the reviewers.

  • Star Size
  • Star Color
  • Empty Star Color
  • Background Type
    • Classic Background
    • Gradient Background
  • Border Type
  • Border Radius
  • Box Shadow:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin
  • Padding
Elementor Yelp Reviews Widget Screenshot Displays Reviews Available Styling Options
Review Rating Styling Yelp Reviews Widget for Elementor
The Screenshot Displays Reviews Styling Settings, and An Example Styling for Elementor Yelp Reviews Widget
Review Styling Settings, Elementor Yelp Reviews Widget example

Reviewer Name

In this tab, you can style Yelp Reviewer’s name.

  • Color: Set color for Yelp Reviewer Name.
  • Hover Color: Set Hover color for Yelp Reviewer Name, so when the mouse hovers over Yelp Reviewer Name, the color will change to the Hover Color you have selected.
  • Typography
  • Margin
The Screenshot Shows Reviewer Name Styling Options in Yelp Reviews Widget For Elementor
Reviewer Name Styling Options, Yelp Reviews Widget for Elementor

Date

In this tab, you can style the Date of Yelp Reviews.

  • Color
  • Hover color
  • Typography
  • Margin
The Screenshot Shows Reviewer Name Styling Options in Yelp Reviews Widget for Elementor
Date Settings, Elementor Yelp Reviews Widget

Review Text

In this tab, you can style Yelp reviewers’ text.

  • Color
  • Typography
  • Margin
Reviewer Text Styling Options in Yelp Reviews Widget For Elementor
Review Text Styling Options, Yelp Reviews Elementor Widget

Readmore Text

In this tab, you can style Readmore text.

  • Color
  • Hover Color
  • Typography
  • Margin
Readmore Text Styling Settings, Elementor Yelp Reviews Widget
Readmore Text Styling Settings, Elementor Yelp Reviews Widget

Container

In this tab, style Reviews Container of Yelp Reviews Widget.

  • Max Width: Set the max-width for Yelp Reviews Widget Container.
  • Alignment: Align Reviews in Yelp Reviews Container to Right, Center, or Left.
  • Background Type
  • Border Type
  • Border Radius
  • Margin
  • Padding
Reviews Container Available Styling Options in Elementor Yelp Reviews Widget
Reviews Container’s Styling Options, Elementor Yelp Reviews Widget

Carousel

Carousel, in this tab you can style the navigation arrows of Yelp Reviews Widget for Elementor.

  • Color
  • Background Color: Set Background-Color for Yelp Reviews Elementor Widget Carousel Navigation icons.
  • Border Radius
Carousel's Navigation Arrows Available Styling Options in Yelp Reviews Widget for Elementor
Reviews Carousel’s Navigation Styling Options, Yelp Reviews Elementor Widget

Download Now it's free!

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