Skip to main content

Modules / Webapps

You can embed a single RateParity module (Price comparison, Reviews, Offers, etc.) into a specific element of your page instead of rendering the widget.

Setup​

  1. Create a container element where you want the module to render:
<div id="example-container"></div>
  1. Add or update the installer script with data-parent-id and data-widget attributes:
<script
  type="text/javascript"
  src="https://code.rateparity.com/versions/installer.min.js"
  data-parent-id="example-container"
  data-widget="reviews"
  defer
></script>

The script will mount the selected module inside the #example-container element.

Compatible modules​

NameDescription
price-comparisonSuper fast Integrated Booking Engine
reviewsReview scores and details on your site to inspire user trust
offersSpecial Offers messaging feature
quoteTake control of your hotel’s offline bookings
vouchersVoucher tools to offer discounted room rates or extra services, like spa treatments, dining, and more.
giftcardsPrepaid codes that can be used as an alternative form of payment
meetingsMICE Booking Engine

Example (Reviews module)​

<html>
  <head>
    <script
      type="text/javascript"
      src="https://code.rateparity.com/versions/installer.min.js"
      data-parent-id="example-container"
      data-widget="reviews"
      defer
    ></script>
  </head>
  <body>
    <div id="example-container"></div>
  </body>
</html>

Notes: ensure the data-parent-id matches the container's id. If the parent element isn't found, the module will fail to mount.

Themes (optional)​

Some modules support different visual themes that you can choose with the data-webapp-theme attribute on the installer script.

  • If no theme is specified, the default theme is used.
  • If an unsupported theme is provided, the module will fall back to the default.

Supported modules & themes​

ModuleThemeDescription
price-comparisondefaultStandard layout with full details, side panel, header, and search inputs
minimalNo side panel or header, no search inputs (dates, guests, discount code). Requires full control via Client API.

Example (Price Comparison with Minimal theme)​

<html>
  <head>
    <script
      type="text/javascript"
      src="https://code.rateparity.com/versions/installer.min.js"
      data-parent-id="example-container"
      data-widget="price-comparison"
      data-webapp-theme="minimal"
      defer
    ></script>
  </head>
  <body>
    <div id="example-container"></div>
  </body>
</html>