Documentation

How to create a widget


In this article, you’ll learn how to create a rating widget for your WordPress-powered website using TotalRating.

Glossary#

This glossary helps you grasp the creation process of a rating widget and reduce the ambiguity.

Keyword Meaning
Rating A rating is an evaluation or assessment of an entity, in terms of quality, quantity, or some combination of both.
Attribute A quality of an entity that has an assessed value within a scale. For example, a 5-stars scale of product quality.
Entity An entity is an object that receives a rating. For instance, a post is an entity.
Widget The widget refers to a “box” where users can cast their ratings and see results.
Preset A premade set of attributes that serves a general-purpose such 5-stars, thumbs up/down, etc…

Instructions#

First, we need to launch the wizard, from the bottom navigation panel, navigate to widgets:

TotalRating menu
TotalRating menu
Keyboard shortcut
You can also launch the wizard by pressing F2 on your keyboard.

Then from the “let’s get started” box, choose a preset or start with an empty widget. For the sake of simplicity, 5 Stars preset will be used in this article.

TotalRating wizard launcher

The wizard window will appear right away. The wizard consists of 3 steps that cover main widget functionality, you can configure it further after creating the widget.


Basics#

Rating widget basics settings
  • Widget name: Mainly for administrators to label and recognize widgets easily.
  • Preset: It’s based on your previous selection, but if you want to change that, you can easily switch to another preset.
  • Entities: You can choose what entities are linked to the rating widget, it could be a post type or unspecified if you want to integrate the widget manually later on.

Look & feel#

Rating widget appearance settings
  • Color palette: Depending on your website design, you can either use a light palette or a dark one.
  • Spacing: You can adjust the spacing and choose what suits your website design.
  • Emplacement: Control the emplacement of the widget, whether underneath the content or above it.

Behaviours#

Rating widget behaviours
  • Results visibility: Control who can see results.
  • Confirmation: You can use this behaviour to prevent accidental ratings.

Once you finish the configuration, click on finish, you’ll be redirected to widget editor for further configuration.

Rating widget editor

 

🎉 Voila! You’ve created your rating widget successfully.