Elementor (the pro version) already has a widget — the Post Comments widget — that you can use to add a comment section to a custom template to allow your visitors to share their thoughts over your content. But if you want to take the user engagement to the next level, comments are not enough. You need more feedback types like reviews, star ratings, and likes. JetReviews is an Elementor add-on that makes it possible for your visitors to leave feedback in four different forms: reviews, star ratings, comments, and likes/dislikes. It is part of the JetPlugins family but can act as a standalone plugin. Meaning that you don’t need to install other JetPlugins members in case you don’t need them.
JetReviews: The Overview
We have said it. JetReviews is an Elementor add-on that you can use to increase the user engagement on your website whereby you can allow visitors to add a review, comment, rating, and like/dislike. In order to be able to leave a review or rating, your visitors need to login to your website. It can also help to increase the user base on your website, which is great for your business. You can set who can add the feedback based on the user role (administrator, editor, author, contributor, subscriber). You can also set how the reviews appear on the page. Whether you want them to appear right away (without moderation) or with your approval first. The moderation itself is done via the JetReviews dashboard within your WordPress dashboard.
After installing and activating JetReviews on your WordPress site, you will see a new menu item on WordPress dashboard called JetReviews. The menu consists of 5 sub-items:
JetReviews offers an analytics feature which you can access by going to JetReviews -> JetReviews. The provided stats are the number of accepted comments, the number of unaccepted comments, the number of approved reviews, and the number of unapproved comments. You can see the review stats stats of pages, posts, and custom post types.
- All Reviews
The All Reviews page allows you to manage the reviews submitted by your visitors. You can accept the unapproved reviews, unapprove the approved reviews, edit the reviews, and delete the reviews.
- Review Types
JetReviews comes with a default review type. You can add new review types according to your needs. For instance, if you want to use JetReviews on a hospitality website, you might want to add a review type that consists of the following review items (fields):
When adding a new review type, you can add as many review items (fields) as you want. On each field, you can set the number of steps and maximum value of the review item.
In addition to reviews, JetReviews also allows your visitors to leave comments.
What is the difference between a review and a comment?
Review is the main feedback type a user can leave. Only registered users will be able to leave a review. While comment is an additional thought a user can leave on an existing review. When adding a review, a user can add a review title, review body, and star rating.
You can manage the comments on the Comments page.
As we stated above, you add new review types according to your needs. You can then assign the review types you have created to a certain post type. Be it page, default post type (blog post), or custom post type. To assign a review type to a certain post type, you can go to the Settings page of JetReviews (JetReviews -> Settings). On this page, you will see all of the existing post types on your WordPress site. You simply click the tab of a post type and slide the toggle to enable a review type. You can then select the review type you want to use on the Review type option.
How to Use JetReviews
You can use JetReviews whether to add dynamic reviews or a static review. After installing and activating the JetReviews plugin, you will see two widgets on Elementor:
- Reviews Listing
- Static Review
The Reviews Listing widget is used to add dynamic reviews and dynamic star ratings while the Static Review widget is used to add a static review.
How to Add Dynamic Reviews Using the Reviews Listing Widget
Dynamic reviews mean that the reviews are submitted by your users instead of you. The concept of dynamic review is great to be implemented on websites types like hospitality, e-commerce, studio rental, and other website types that need users’ reviews.
To use the Reviews Listing widget to add dynamic reviews, first, you need to create a review type. To do so, go to JetReviews -> Review Types. Add a new review type by clicking the Add New button.
On the appearing window, give your review type a name and click the Add New Field to add a field (review item). As mentioned, you can set the number of steps as well as the maximum value when adding a new field (review item). Once you are done adding the fields, you can click the Add Type button.
Next, go to JetReviews -> Settings. Select a post type you want to assign the review type you have just created to and slide the toggle (you can read this post to learn how to create a new custom post type in WordPress). Select the newly created review type on the Review type option.
You can also set who can leave the review by selecting the user roles on the Allowed roles option. Below this option, you can also set how the reviews appear. Whether you want to approve them first or not.
Creating a Custom Template
Once done adding a new review type, the next step is to create a custom template for the post type you assigned the review type to. For instance, if you assigned the review type to a Movie custom post type then you need to create a custom template for the Movie custom post type. To create a custom template in Elementor you can either use Elementor Pro or JetThemeCore. In this article, we use Elementor Pro.
Go to Templates -> Theme Builder and click the Add New button to add a new template.
On the appearing window, set the template type to Single Post. Give your template a name and click the CREATE TEMPLATE button to start creating the template.
You can either create the template from a premade template or from scratch instead. If you prefer to create the template from scratch (as we do in this example), you can simply close the template library to open the Elementor editor.
On the Elementor editor, you can add any element (widget) you need. Once done adding the necessary widgets, add the Reviews Listing widget.
Chances are, you will find an empty review after adding the Reviews Listing widget to the canvas area of the Elementor editor. The reason is that the review type has just been created and no one submits a review yet. If this is the case, you can submit a review to an existing post first. Once done, change preview settings on the custom template you are working on. To so do, click the gear icon on the bottom-left corner of the Elementor settings panel. Click the Preview Settings block. Select the post type you assigned the review type to and select the post you have just added the review to. Click the APPLY & PREVIEW button.
Reactivate the Reviews Listing widget (by clicking it) to customize it. On the Settings block under the Content tab, you can select the rating layout.
To change the icons, you can open the Icons block. You can either use your own icons (SVG files) or use icons from the Elementor icon library.
To customize labels, you can open the Labels block, also under the Content tab. You can simply replace the default labels with your own labels.
To style up the reviews block, you can go to the Style tab on the Elementor settings panel. There are 7 blocks you can open here:
Rating: To change the color of the star icons, the size, and the gap between stars.
Controls: To change the size of the control icons (thumbs, show comment, and leave comment), the colors, and the typography.
Forms: To style up the forms (review form and comment form). You can change the text color, typography (font size, font style, and so on).
Header: To set the typography of the review block header. You can also set the text color here.
Reviews: To set the avatar size of the reviewers, the text color of the reviewer’s name, text color of the review title, text color of the review content, the typography, and the gap between reviews.
Reviews Misc: To set the text color of the verify label, typography and the icon size.
Comments: To set the typography as well as the text colors of the components of the comments (author’s name and content). You can also set the gaps between comments from here.
Once you are done editing the templates, you can click the PUBLISH button on the bottom side of the Elementor settings panel. On the appearing window, you will be asked to add a display condition. Simply click the ADD CONDITION button to add one and select the post type according to the post type you assigned the review type to. End by clicking the SAVE & CLOSE button.
How to Add a Static Review Using the Static Review Widget
Unlike the Reviews Listing widget in which the reviews are submitted by your visitors, the Static Review widget requires you to add the review yourself. If you hire a designer to work on a page, you should ask your designer to add the review.
Another difference, you can use the Static Review on any design, be it a page or template (you can only use the Reviews Listing widget on a template).
To start adding a static review using the Static Review widget, simply drag the Static Review widget to the canvas area.
Once the widget is added, go to the left panel to customize the review. First, select the review source by selecting one from the Content Source dropdown under the Content block.
As you can see, there are two options to add the review:
1. Manually Input
If you want to add the review manually, you can simply select the Manually Input option. The Static Review widget comes with a default review item. To add a new review item, you can simply click the ADD ITEM button. On each review item, you can add the label, field value, and field maximum value.
You can also add the review title, review content, and review legend on the available fields.
2. Post Meta
If you select this option, JetReviews will pull the review from a post meta. That being said, you need to add the review on the post want the review to be pulled from. To do so, edit a post (or create a new one). On the JetReviews block beneath the WordPress editor, click the ADD NEW FIELD button to add a review item then add the label, value, and maximum value.
Once done adding the review, copy the post ID of the post. To get the post ID, you can go to the address bar of your web browser. Post ID is the number right after the “post=” text.
Update the post and switch back to the Elementor editor. With the Post Meta option selected, paste the post ID you have just copied to the Get Data From Post field.
Next, you can open other setting blocks under the Content tab to customize the review:
Structured Data: You can open this block to add structured data to the review box.
Header Settings: You can open this block to set the header title, the average review layout (stars, percentage, or points).
Fields Settings: You can open this block to set layout of the review item (stars, percentage, or points), the position of the values, and alignment of the values.
Summary Settings: You can open this block to set the position of the summary results, the width of the results block, and the layout of the summary average.
Styling up the Review Block
Same as the Reviews Listing widget, you can also go to the Style tab to style up the static review you create with the Static Review widget. There are 8 blocks you can open here:
Review: You can open this block to set the review block gap, the review block padding, the review block border, and the review block box shadow.
Header: You can open this block to set the review header background, the review header padding and margin, the review header border radius, the text color of the review header, and the typography (font family, font size, font style, and so on) of the review header.
Total average: You can open this block to style up the total average section of the review block. You can set the value color and typography and the star icons’ size and color.
Review Form: You can open this block to style up the review form section of review block. You can set things like the gap between fields, the text color as well as the typography of the review title, review label, and review input.
Author: If you enable the review author, you can open this block to set the author’s ava size, background, padding, margin, text color as well as typography of the author’s name.
Fields: You can open this block to style up the review items section. You can set border style as well as border size of the review items box, text color as well as the typography of the review items label and value, the color as well as the size of the star icons.
Summary: You can open this block to style up the summary section. You can set text color as well as the typography of the summary title and summary content.
Summary Average: You can open this block to style up the summary average section. You can set text color as well as the typography of the summary average legend and value. You can also set the color as well as the size of the star icons.
The Verdict: JetReviews Review
Some website types need users’ reviews to build trust. In Elementor itself there are at least two options to add dynamic reviews and star ratings. First, you can use the ACF plugin (or the similar plugin). This option only allows you to add the reviews from the WordPress editor. Meaning that there is no opportunity for your visitors to leave their thoughts. Alternatively, you can use JetReviews, which can be used to accept reviews from visitors. JetReviews is great for the following website types:
- Listing Website.
- Rental Website.
You can use JetReviews to replace the default commenting feature of WordPress, which is limited to adding comments only. In addition to adding dynamic reviews and star ratings, you can also use JetReviews to add a static review to a page. As a review system tool, the features offered by JetReviews are complete enough. It comes with a moderation feature to allow you to manage the submitted reviews and comments. More importantly, it doesn’t require other plugins to work.