Amenities Plugin Technical Guide

Modified on Wed, 30 Jul at 1:00 PM

Amenities Plugin

A simple, consistent widget for displaying property amenities/categories. Fetches data from the property API and renders the Name and Options for each category.

Features

Fetches amenities/categories from the property API
Renders each category Name and its Options
Responsive and minimal
Consistent with other plugins
Configurable title, button, and brand color
Generator file for easy setup: AmenitiesGen.html

Installation

1. Include the Script

<script src="./dist/0.0.1/amenities.iife.js"

        data-container-id="amenities-container"

        data-tenant-config='{

          "apiUrl": "https://your-api-endpoint.com",

          "propertyId": "8464",

          "showTitle": true,

          "showButton": true,

          "brand": { "primary": "#1976d2" }

        }'></script>

2. Add the Container

<div id="amenities-container"

     data-property-id="8464">

</div>

Configuration

Option    Type    Description    Default

apiUrl    String    API endpoint URL    Required

propertyId    String    Property ID    Required

showTitle    Boolean    Show the main group title    true

showButton    Boolean    Show the "Show All" button    true

brand.primary    String    Primary brand color (hex, affects icons/buttons)    #1976d2

Example

<div id="amenities-container"

     data-property-id="8464"></div>



<script src="./dist/0.0.1/amenities.iife.js"

        data-container-id="amenities-container"

        data-tenant-config='{

          "apiUrl": "https://your-api-endpoint.com",

          "showTitle": false,

          "showButton": true,

          "brand": { "primary": "#e91e63" }

        }'></script>

Generator

For a quick and error-free setup, use the AmenitiesGen.html generator file. It provides a form to configure your widget, preview the result, and copy-paste the generated code for your site.

Notes

The plugin fetches amenities from Property.Details.PropertyAttributes.Categories in the API response.
Only category Name and Options are rendered for now.
Brand color affects icon and button color.
Title and button can be toggled via config.