Olery provides a set of widgets that can be embedded into a website. These widgets can be used to display various review ratings, or just the overall review rating. Widgets are available in Dutch, English, French and German.
Widgets require an API authentication token (see Authentication for more information). Please contact Olery (email@example.com) if you’d like to have access to the Review Widgets.
Widgets are made up out of 3 parts:
- A CSS file containing the styles for the widgets
- A block of HTML that has to be embedded into a web page
This can either be added in the
<head> element of a page, or just before the
</body> tag. For example:
Next, add the CSS file:
<link rel="stylesheet" href="http://widgets.olery.com/hotel.css"/>
This must be added in the
<head> element of a page.
Last you’ll need to add some HTML used to display the widget. Each widget has the following structure:
<div class="olery-hotel-widget" data-hotel="HOTEL_ID" data-type="bar" data-locale="en"> </div>
When using the block widgets (see below) the following HTML should be used instead:
<div class="olery-hotel-widget olery-box-widget" data-hotel="HOTEL_ID" data-type="box" data-locale="en"> </div>
HOTEL_ID should be replaced with the ID of a hotel for which you’d like
to use a widget. An example of such an ID is
g81i9FXsj which is the ID of
“Hotel Olery” (a test hotel we typically use for examples). If you’re using
Olery Reputation you can find these IDs in the various page URLs. Alternatively
you can request your hotel IDs by sending an Email to firstname.lastname@example.org.
You can also customize the following attributes:
||bar, block||The widget type to use,|
||See below||The language of the widget|
||true, false||Wherher or not to enable the tooltip|
By default the
data-tooltip attribute’s value is set to “true”, meaning
tooltips are visible. Simply add
data-tooltip="false" to the
class="olery-hotel-widget"> element to disable the tooltip.
The widgets can be displayed in various languages besides just English. The
supported languages and their language codes (to be used in the
attribute) are as following:
Some of these languages might not have translations for all available ratings. If this is the case, please contact us at email@example.com.
Widgets come in two different layouts: bar and block. The bar layout is a simple, narrow bar that only shows an overall rating. An example:
Optionally a user can view more details by hovering over the rating values. This displays a tooltip showing the ratings that make up the overall rating:
The block layout instead shows different rating statistics directly:
Hovering over the amount of reviews will show the overall rating for various sources:
Google Search Rich Snippets
The widgets contains Structured Data so that Google can extract them and show the overall review rating inside the Google Search results. So pages with the Olery Widget should appear on Google Search like this:
async is enabled on the
hotel.js script tag, so it is not recommended to use it.
The URL http://widgets.olery.com does not support HTTPS directly due to the underlying CDN using a certificate that’s not valid for this domain. Users who’d like to use the widgets in an HTTPS environment will need to use https://d3s6rktw1x6kdc.cloudfront.net instead of http://widgets.olery.com.
If you feel there’s a need to host these assets yourself, please contact Olery at firstname.lastname@example.org and we will see what we can do to help.