Ratings and Reviews

Introduction

To provide users with even more opportunities to engage, Viafoura’s Ratings and Reviews tool allows users to react to experiences, places and products they encounter. Common use cases include food reviews, product reviews, restaurant/experience ratings, etc. The simplified UX allows you to display an average rating using a five-star system. Not only will you own 100% of the reviews, but you can also use our intelligent automated moderation system to moderate ratings according to your community guidelines to ensure brand safety.

Step 1: Install the Viafoura base javascript

The Viafoura reviews tool requires the Viafoura base javascript to be installed on the page where the reviews are to appear.

Step 2: Install Reviews Tool

The main reviewing widget. Renders with a user info header (login/logout), comment form, and review list. You need to copy this code everywhere you want the comment to appear:

<div class="viafoura">
  <div class="vf-comments vf-widget" data-widget="reviews" ></div>
</div>

🚧

Note

Please Ensure that a doctype is present at the top of the page in order for the reviews tool to load correctly

Settings

NameType(s)DefaultNotes
data-limitint10Accepts: 1-100.
data-sortstringnewestAccepts: newest, oldest, likes, activity, replies, editor-picks.
data-pathstringOptional. Define a page path for the comment widget. Ignores browser URL.
data-urlstringOptional. Define a fully-qualified url for the comment widget. Ignores browser URL. Should be mutually exclusive to data-path.
data-titlestringOptional. The title of the page. Must be a non-blank string.
data-unique_idstringOptional. Allows multiple URLS to be linked to the same page. data-path or data-url must be defined.
data-has-notification-bellstringfalseOptional. Forces a notification bell attached to the commenting tool. Accepts: true or false.

Step 3: Refresh browser

You should see a widget appear on the page that is similar to this

921

Step 4: Average rating widget

You can display the average rating our of 5 stars and the number of reviews, with a breakdown of the number of reach rating within the page. The widget can be loaded onto the same page as the reviews widget, or loaded onto another page on your site such as on an index page.

<div class="viafoura">
        <div class="vf-rating-widget vf-widget" data-widget="rating-avg"></div>
</div>

Installation settings

NameTypeDescriptionDefaultNotes
data-pathstringThe path of the page for which to fetch the rating.Current Pagee.g. /path/to/article.html
data-urlstringThe fully-qualified url of the page for which to fetch the rating.e.g. https://foo.com/path/to/article.html

Rendered example

464