The Metric Display Widget is a great way to show your Hellopeter aggregate review ratings. The widget is small enough to fit anywhere on your website, and serves as powerful reassurance to potential customers that your business can be trusted.
Accessing the Metric Display Widget from the Hellopeter Portal
To access the Metric Display Widget :
Click on the Widget Library.
Click on the Metric Display Widget.
Metric Display Widget Dimensions
The Metric Display Widget is available in two sizes:
Desktop - 190 x 105px
Mobile 165 x 85px
The widget will automatically adjust based on the desktop or mobile display.
Metrics
The Widget displays the following aggregate Hellopeter metrics:
Average Star Rating based on the total number of reviews on your profile.
Total number of reviews.
Industry ranking (optional).
Customising the Metric Display Widget
The Metric Display Widget has two display options:
Original (default).
Transparent.
If you select the Original option, you'll only be able to customise the star rating colour. All other elements (the font/border colours and Hellopeter logo) will display the default settings.
If you select the Transparent option, you will be able to customise the following elements:
The widget background colour.
The widget font and border colour.
A logo that matches the widget and background.
The star rating colour.
Selecting your widget background colour
The right-hand side of your screen is a preview panel that dynamically reflects the changes you make. The preview panel allows you to see how the badge will display on your website. You're also able to switch between desktop and mobile previews.
When selecting the transparent widget option, a circle will appear next to the desktop icon in the header of the preview panel.
Click on the circle and select a background colour to match the look and feel of your website. This will allow you to see how the widget will display on a background that matches your brand and website.
The colour of the preview panel and Metric Display Widget will change to your selected colour.
Choose your font and border colours
Click on the font and border colour to select a colour that matches your website's look and feel.
Choose your star rating colour
Click on the star rating colour to select a colour that matches your website's look and feel.
Important:
When selecting a colour, you have two options:
Select the desired colour scheme from the colour swatch.
You can opt to manually input or paste the RGB code of the colour.
HTML Code
The HTML code dynamically changes based on your customisation selections. Once you’re satisfied with the look and feel of the widget, click the “Copy Code” button and insert this code onto your website.
The Metric Display Widget will appear on every page that contains the code snippet.
Please note - all settings will be lost if you navigate away from this page. Please ensure that you copy the code before closing from this page.