Back to Example List

Set up for the below examples:

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

IP Address detection and CSS loading is handled by the script

        var ttwebHotel = new TTWebHotel(TTWebHotel.Rvng, {
          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

    <div ttweb-component="BookingWidget" data-tt-show-rates="true"></div>
    <div ttweb-component="BookingWidgetButton">Generic Open-Calendar Button</div>
Generic Open-Calendar Button


CrossOutRateContainer

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

Rate Unavailable (Default Text)

Can also set specific search attributes, e.g. a cross-out rate for room BX1:



Booking Button

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

Execute Search Booking Button for room 1-BR Suite BX1


Room

Enhanced Room Data

My Room Name Carriage room

Book Now

Some CMS-generated content

My Room Name "850 Suite"

Book Now

Some CMS-generated content

Full Room ("Petite Duplex")

{{ room.name }}
{{ room.size }}
{{ room.guest_size_max}}
{% if room.ada_room %}{% t 'rooms.accessible' %}{% endif %}
{{ room.bed_arrangement }}
{{ room.room_category }}
{{ room.view }}
{{ room.short_description }}
{{ room.description }}
  • {{ amenity.name }}
Book Room
{% include components/image image=featured_image max_width=600 %}
{% include components/slider id=sliderId %}


Conversion Plus

Fallback Content
can include html

With Offer

Special offer for direct booking


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 Banner Example

Special Rate for Advanced Purchase

Book Now
Offer List

Dynamic Offer List

Offer List