Reviews Plugin Technical Guide

Modified on Wed, 30 Jul at 11:35 AM

Reviews Plugin

A responsive widget for displaying property reviews in different layouts. Allows users to view guest reviews with ratings, comments, and management responses.

Features

Multiple display modes: list, slider, or grid
Sorting options for newest or oldest reviews first
Optional display of management responses
Customizable appearance with brand colors
Responsive design for all devices

Installation

1. Include the Script

<script src="./dist/0.0.1/reviews.iife.js" 
        data-container-id="reviews-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com", 
          "displayMode": "list",  
          "brand": {
            "primary": "#000000", 
            "secondary": "#0066cc"
          }, 
          "title": "Guest Reviews"
        }'>
</script>

2. Add the container

<div id="reviews-container" 
     data-property-id="12345" 
     data-display-mode="list"
     data-show-management-comments="true"
     data-title="What Our Guests Say">
</div>

Configuration

Container Attributes

Attribute	Type	Description	Default
data-property-id	String	ID of the property to display reviews for	Required
data-display-mode	String	Display style: 'list', 'slider', or 'grid'	list
data-show-management-comments	Boolean	Whether to show owner responses	true
data-title	String	Custom heading for the reviews section	guest reviews

Script Configuration Options

The data-tenant-config attribute accepts a JSON string with the following options:

{
  "apiUrl": "https://your-api-endpoint.com",
  "displayMode": "list",
  "showManagementComments": true,
  "brand": {
    "primary": "#000000",
    "secondary": "#0066cc"
  },
  "title": "Guest Reviews"
}

Attribute	Type	Description	Default
apiUrl	String	ID of the property	Required
displayMode	String	'list', 'slider', or 'grid'	list
showManagementComments	Boolean	Show or hide management responses	true
brand.primary	String	Primary brand color (hex)	#1976d2
brand.secondary	String	Secondary brand color (hex)	#dc004e
title	String	Heading text for the reviews section	Guest Reviews

Display Modes

List Mode

Displays reviews in a vertical list with full content and optional management responses.

Slider Mode

Presents reviews in a carousel format with navigation controls. Each review is shown in a card with full content.

Grid Mode

Shows reviews in a responsive grid layout with truncated content for a more compact display.

Example

<div id="reviews-container" 
     data-property-id="12345" 
     data-display-mode="slider"
     data-title="Guest Experiences"></div>

<script src="./dist/0.0.1/reviews.iife.js" 
        data-container-id="reviews-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com",
          "brand": {
            "primary": "#4CAF50",
            "secondary": "#FF9800"
          }
        }'>
</script>

Notes

The plugin handles various edge cases like empty titles, missing reviewer names, and HTML formatting in descriptions.
Reviews are sorted by publication date, with options to show newest or oldest first.
Reviews without description content are automatically filtered out.