Set up for the below examples:

Import the cp.min.js script
Set up the hotel config (see below)
Call TTRender.initeComponents(ttwebHotel)

IP Address detection and CSS loading is handled by the script

        var ttwebHotel = new TTWebHotel(TTWebHotel.Rreztrip, {
          hotelId: 'NYCSTW', //'NYCREF',
          portalId: 'stewarthotelnyc',
          defaultTimezone: 'America/New_York',
          defaultCurrency: 'USD',
          defaultLocale: 'en',
          defaultNumAdults: 2,
          defaultNumChildren: 1,
          // rootPath: 'https://rt3api-prd-ase.ttaws.com', // OPTIONAL set the rt3api root - change to this value for asia servers.
          // localeFileRoot: 'http://localhost:8333/locales/', // OPTIONAL set the root for locale loading
          // cssFileRoot: 'http://localhost:8333/css/', // OPTION sel the root for CSS loading
          // Optional override locales with specific content: TBD specific structure is in flux!
          // localeOverrides: {
          //   'conversion-plus': {
          //       guaranteed_price: 'Web-Exclusive Special Offer',
          //       sample_rate_selected: "Best Price for {{- arrivalDate}} through {{- departureDate}}"
          //   }
          // }
       })

       TTRender.initComponents(ttwebHotel);

TODO: document all options for all components

Booking Widget & Activation button

First, Set up the booking widget (or other booking calendar tool as it becomes available) and add a button to activate the widget

CrossOutRateContainer

Show's rate and optionally rate-errors for the global search. Can supply specific error text.

Booking Button

Booking button for the current search (opens reztrip link), with optional overrides e.g. room selection

Room

{% if room.ada_room %}{% t 'rooms.accessible' %}{% endif %}

{{ amenity.name }}

Book Room

{% include components/image image=featured_image max_width=600 %}

{% include components/slider id=sliderId %}

Conversion Plus

With Offer

BRG Banner

BRG and Conversion Plus are similar, except BRG is limited to "tonight" only and doesn't update when a user searches. It also doesn't have a CTA button.

Offer

When setting up an offer component, the main functionality is just marking the first-child component root with class names reflecting availability. However, within an offer component you can specify sub-components that are tied to the root offer component without needing to providate data-tt-rate-code on each item. This also performs faster than specifying a separate component e.g. ttweb-component="BookingButton"

[some image]

An assortment of pastries, yogurt, and fruit on a counter along the right wall of the lounge.

Advanced Purchase Offer11

Dynamic Offer Title

Cross-Out

Try other dates?

Buy in advance and get a better rate

Terms and conditions

Book Now