Displaying customers comments on your website

Simple integration

Description of this method

To use this method, you will have to put a script tag in your html code where you want the comments to be displayed.

The script tag itself contains the html used to display the comments.

The configuration(what comments to display) is done with attributes on this script tag.

Parameters (attributes of the script tag)

Click on the HTML view on the JSFiddle and you'll see the following configuration options on the "script" tag

  • data-nocomment-hide="parent:parent"

    If present, this option will hide the container of the script element when there is no comment to show.

    Here are the available options :

    • parent : hide the immediate parent of the script element
    • parent:parent :hide the parent above
  • data-slug="hotel-serotel-lutece"

    The "slug" is the codename of the hotel, it will be given as part of the installation pack provided for each hotel

  • data-original_ln_first="1"

    By default, the comment are shown from the most recent to the least recent. Whether or not they were translated with google translation.

    This option, when set to "1" will change this behavior, and will favor the comments originally written in the requested language, and then sort by date.

    It is recommended to keep this setting to 1.

  • data-itemid="1"

    This parameters sets the specific room or hotel service to display comments about

    For example, there is a ID for each room, and there are ID for the Hotel, the staff, breakfast, wifi, and so on.

  • data-ln="en"

    Language of the comments, please refer to the "installation pack" for the available codes

Below, only used in example 2
  • data-itemid="7-13"

    7 is the item id (of the Hotel)
    13 is a specific aspect(Location) of this item id

    For example, when selecting the "itemid" of the Hotel, you can narrow the comments on different aspects :

    • Comfort
    • Location
    • etc...

    All the detail are provided in the "installation pack" for each hotel

  • data-limit="3"

    Maximum comments shown (defaults to 5)

  • data-moment_format="l"

    Can format the way the date is displayed using the library momentjs
    Reference : momentjs

More information

The special syntax you can see in the code :
{{#each this}} {{#if_eq rating 5}} etc.
is Handlebars standard syntax.

Handlebars is a templating language that allows you to easily play with the available comment informations.

In the example you see on the right, all the code between {{#each this}} and {{/each}} is repeated for each comment.

In this loop, you have access to the following "variables"

Variable Content
{{name}}The customer name
{{comment}}The customer comment
{{rating}}The rating from 1 to 5 (with .5 steps)
{{rating_class}}The rating usable as a classname suffix where 4.5 is written 4_5, for example, you can use it like that :
{{date8601}}The date using the format ISO8601.
This format, in conjonction with the "data-momentjs" attribute give you a human friendly date
You can customize the date display with the parameter data-moment_format
{{is_original_ln}} Contain 1 if the comment is originally in the language requested, and 0 if it's google translated