Rates Plugin Technical Guide

Modified on Wed, 30 Jul at 10:58 AM

Rates Plugin

The Rates Plugin is a responsive widget for displaying property rates (nightly, weekly, monthly) using the iPro API. Ideal for vacation rentals or hotels, it displays data in a clean, mobile-friendly table format.

Features

Fully responsive layout
Shows rates by date range
Supports USD, EUR, GBP
Customizable brand colors
Toggle visibility of rate columns
Supports multiple property notes
Optional "Show More" button for long lists

Installation

1. Include the Script

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

2. Add the container

<div id="rates-container"
     data-property-id="12345"
     data-currency="USD"
     data-title="Property Rates & Availability"
     data-column-visibility='{
       "monthly": false,
       "weekendly": false
     }'
     data-show-more="true">
</div>

Configuration

Container Attributes

Attribute	Type	Description	Default
data-property-id	String	ID of the property	Required
data-currency	String	USD, EUR, or GBP	GBP
data-title	String	Title above the table	Property Rates
data-column-visibility	JSON String	Toggle visibility of specific columns	All visible
data-show-more	Boolean	Show "Show More" button after 20 rows	false

Column Visibility Example

{
  "startDate": true,
  "endDate": true,
  "nightly": true,
  "weekly": true,
  "monthly": false,
  "weekendly": false,
  "minStay": true,
  "arrivalDeparture": true,
  "occupancy": false
}

Script Attributes

Attribute	Type	Description	Default
data-container-id	String	ID of the target container div	Required
data-tenant-config	JSON String	API endpoint and brand colors	Required

Examples

Basic

<div id="rates-container" data-property-id="12345"></div>

<script src="https://your-cdn-path/rates.iife.js"
        data-container-id="rates-container"
        data-tenant-config='{"apiUrl": "https://your-api-endpoint.com"}'>
</script>

Custom Columns & Branding

<div id="rates-container"
     data-property-id="12345"
     data-currency="EUR"
     data-title="Villa Rates"
     data-column-visibility='{
       "monthly": false,
       "weekendly": false,
       "occupancy": false
     }'>
</div>

<script src="https://your-cdn-path/rates.iife.js"
        data-container-id="rates-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com",
          "brand": {
            "primary": "#9C27B0",
            "secondary": "#4CAF50"
          }
        }'>
</script>