Default Example

By default, the styling of the widget is kept very simple to allow for maximum opportunity to customize the styling to match the site on which it is placed.  By default the Search Bar widget includes a date selection calendar, occupancy selectors, special codes section, and submit button.

<sabre-shs-widgets-search-bar
  api="MDAwMTV+dFBKa01ReUIrVzVqdWNaL21XNkRZSTJnWktGdUpIMFZBaWI4amx0ddxhMXJ0Z2xUcEVGRUg3TUVVSkRVeHcyTjgyaDRONCtzU1VGaVF2NmNKOXgrVFE9PQ=="
  chain="12011"
  hotel="10155"
  currency="USD"
  locale="en-US"
></sabre-shs-widgets-search-bar>

Hotel List Example

An example including a Hotel Select list.

<sabre-shs-widgets-search-bar
  api="MDEwMDV+NmNYcm10bmJKeW1zZktJMzBhblJPalcrWlNZdzViWUdLakZTRHYvekJrUVZiQ0Fta08yL05yUXZWcGdsSU9JRVddOVlPV0xlNE80RXBIQnJBYmFicFE9PQ=="
  chain="12011"
  hotel="10155"
  currency="USD"
  locale="en-US"
  hotel-list='[
    {
        "name": "Barcelona Hotel", 
        "value": "10287"
    },
    {
        "name": "Sabre Hospitality Resort &amp; Spa", 
        "value": "10155"
    },
    {
        "name": "Phyllis Hotel", 
        "value": "80005"
    }
]'
  sections='["hotels", "dates", "occupancy", "submit"]'
></sabre-shs-widgets-best-price>

Special Codes, Rate List, Expanded Calendar, and Preselected Values

This example includes a pre-expanded calendar, preselected dates and occupancy, all supported Special Codes, and Rate List.  The use of calendar-props and label overrides are also demonstrated.

Please note the special escaping of quotes needed when representing a JSON string within another JSON object (e.g. see the calendar-config object within the calendar-props object).

<sabre-shs-widgets-search-bar
  api="MDEwMDV+NmNYcm10bmJKeddzZktJMzBhblJPalcrWlNZdzViWUdLakZTRHYvekJrUVZiQ0Fta08yL05yUXZWcGdsSU9JRVV3OVlPV0xlNE80RXBIQnJBYmFicFE9PQ=="
  chain="12011"
  hotel="10155"
  currency="USD"
  locale="en-US"
  adults="2"
  child="1"
  start-date="2020-12-15"
  end-date="2020-12-18"
  date-format="MMM DD, YYYY"
  special-codes='[
    {
        "code": "promo",
        "name": "Promotion"
    },
    {
        "code": "group",
        "name": "Group"
    },
    {
        "code": "agency",
        "name": "Travel Agency/IATA"
    }
  ]'
  selected-rate="AAA"
  rates='[
    {
        "name": "Best Available Rate", 
        "value": "BAR"
    },
    {
        "name": "AAA Rate", 
        "value": "AAA"
    },
    {
        "name": "Government Rate",
        "value": "GOV"
   }
  ]'
  sections='["dates", "occupancy", "codes", "rates", "submit"]'
  calendar-visible="true"
  calendar-props='{
     "adult": "2",
     "child": "1",
     "length-of-stay": "2",
     "calendar-config": "{\"numberOfMonths\":\"2\",\"firstDayOfWeek\": \"2\"}"
  }'
  labels='{
    "shs.widgets.searchbar.checkIn": "Arrival",
    "shs.widgets.searchbar.checkOut": "Departure"
  }'
></sabre-shs-widgets-search-bar>