Displaying Essential Hotel Details

Welcome to the liteAPI guide on retrieving essential hotel details. This guide is intended for developers who have already completed simple bookings and now want to provide detailed information about hotels to their customers. By the end of this guide, you'll be able to display key information such as hotel photos, facilities, ratings, and room details.

Prerequisites

Before we begin, ensure that you have:

  1. Created an account and obtained your API key.
  2. Familiarized yourself with the "Preparing a List of Hotel IDs" guide to get the hotelId required for querying hotel details.

Overview

To retrieve hotel details, you'll need to use the /data/hotel endpoint with a specific hotelId. This will return comprehensive information about the hotel, including its name, address, facilities, room details, and images.

Example JSON Output

The following is a snippet of the JSON response you'll receive when querying the /data/hotel endpoint:

{
  "data": {
    "id": "lp3803c",
    "name": "Palette Resort Myrtle Beach by OYO",
    "hotelDescription": "Oceanfront Property with Luxurious Amenities...",
    "hotelImportantInformation": "Guests are required to show a photo identification...",
    "checkinCheckoutTimes": {
      "checkin": "04:00 PM",
      "checkinStart": "04:00 PM"
    },
    "hotelImages": [...],
    "country": "us",
    "city": "Myrtle Beach",
    "starRating": 2,
    "location": {
      "latitude": 33.67902,
      "longitude": -78.89426
    },
    "address": "703 South Ocean Boulevard",
    "hotelFacilities": [...],
    "rooms": [...]
  }
}

All of the hotel's details are inside the data object.

var hotelId = "lp3803c";
const targetUrl = 'https://api.liteapi.travel/v3.0/data/hotel?hotelId=' + hotelId;

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    'X-API-Key': 'sand_c0155ab8-c683-4f26-8f94-b5e92c5797b9'
  }
};

fetch(targetUrl, options)
  .then(response => response.json())
  .then(response => 
  {
    var data = response.data;
    console.log(data)
  	//access the hotel data via calls here. 
  	// For example create HTML elements to display the JSON data
 	 	// const nameElement = document.createElement("h1");
  	// nameElement.textContent = "" + data.name;
  })
  .catch(err => console.error(err)); 

Displaying Hotel Basics

Hotel Name, Description, and Images

To display the hotel name and a brief description, use the following fields from the JSON response:

  • name
  • hotelDescription

To display hotel images, iterate over the hotelImages array and use the url and caption fields.

Example:

"data": {
  ...
  "name": "Palette Resort Myrtle Beach by OYO",
  "hotelDescription": "<p><strong>Oceanfront Property with Luxurious Amenities</strong>..."
  "hotelImages": [
    {
      "url": "https://snaphotelapi.com/hotels/322367676.jpg",
      "caption": "hotel building",
      "order": 1,
      "defaultImage": false
    },
    {
      "url": "https://snaphotelapi.com/hotels/399360240.jpg",
      "caption": "swimming pool",
      "order": 7,
      "defaultImage": false
    },
    ...
  ],
  ...
}
<h1>Palette Resort Myrtle Beach by OYO</h1>
<img width="350px" src="https://snaphotelapi.com/hotels/322367676.jpg" alt="hotel building" />
<img width="350px" src="https://snaphotelapi.com/hotels/399360240.jpg" alt="swimming pool" />
<p><strong>Oceanfront Property with Luxurious Amenities</strong>...</p>

Address and Location

To display the hotel's address and geographical location, use:

  • address
  • city
  • country
  • location.latitude
  • location.longitude

Example:

"data": {
  ...
  "address": "703 South Ocean Boulevard",
  "city": "Myrtle Beach",
  "country": "us",
  ...
}
<p>Address: 703 South Ocean Boulevard, Myrtle Beach, US</p>
<p><a href="https://maps.google.com/?q=33.67902,-78.89426">View Map</a></p>

Hotel Rating

To display the hotel's star rating and review count:

  • starRating
  • rating
  • reviewCount

Example:

"data": {
  ...
  "starRating": 2,
  "rating": 4.9,
  "reviewCount": 1599,
  ...
}
<p>Stars: 2 stars</p>
<p>Rating: 4.9</p>
<p>Reviews: 1599 reviews</p>

⭐️ Note: Stars or starRating refer to the amenities and facilities of the hotel, while rating refers to its reviews from guests. Don't confuse the two. This example, for instance, is a two star hotel, so while it may not have a giant pool or indoor gym, the rating of 4.9 shows the guests find the beach front stay to be an incredible experience.

Hotel Policies

To display important policies such as check-in/check-out times and special notes:

  • checkinCheckoutTimes.checkin
  • checkinCheckoutTimes.checkout
  • hotelImportantInformation

Example:

"data": {
  ...
    "hotelImportantInformation": "Guests are required to show a photo identification and credit card upon check-in...",
 		"checkinCheckoutTimes": {
      "checkin": "04:00 PM",
      "checkinStart": "04:00 PM"
    },
  ...
}
<p>Check-in: 04:00 PM</p>
<p>Check-out: 04:00 PM</p>
<p>Important Information: Guests are required to show a photo identification and credit card upon check-in...</p>

Displaying Cancellation Policies

To display the hotel’s cancellation policies, use the cancellationPolicies object. If there is an amount listed for a cancellation policy, that’s how much will be charged if the user cancels after that policy date. Some have multiple policies, in which case the policy with the cancelTime most recently passed will be used.

"cancellationPolicies": {
  "cancelPolicyInfos": [
    {
      "cancelTime": "2024-11-11 08:00:00",
      "amount": 712.39,
      "currency": "USD",
      "type": "amount",
      "timezone": "GMT"
    }
  ],
  "hotelRemarks": [],
  "refundableTag": "RFN"
}

Explanation:

  • The refundableTag has the value RFN, meaning it can be refunded.
  • This policy tells us that after November 11th at 8 am GMT, users will be charged the full room amount $712.39 if they cancel.
  • Since there is no policy in place before November 11th, and the room is marked RFN, any cancellation before then will refund the full amount.
  • For more information on cancelation policies and handling 0 amount policies, refer to the Canceling a Booking Guide.

Example

<h2>Cancellation Policies</h2>
<div>
  <h3>Policy</h3>
  <p>Cancel Time: November 11th, 2024, 08:00 AM GMT</p>
  <p>Amount Charged: $712.39 USD</p>
  <p>Refundable: Yes</p>
</div>

Displaying Hotel Facilities

There are two options for listing hotel facilities. hotelFacilities is an array of the facilities as strings, use it when needing to list out all the facilities in a list. The second option facilities is an array of objects, containing the name and facilityId. This option works best if you are looking to filter by facilities, or implement custom code or icons for specific facilities.

To list the facilities available at the hotel, iterate over either facility array.

Example:

"data": {
  ...
   "hotelFacilities": [
     "WiFi available",
     "Free WiFi",
     "Parking",
     "Free Parking",
     ...
  ],
  "facilities": [
    {
      "facilityId": 47,
      "name": "WiFi available"
    },
    {
      "facilityId": 107,
      "name": "Free WiFi"
    },
    ...
  ],
  ...
}
<h2>Facilities</h2>
<ul>
  <li>WiFi available</li>
  <li>Free WiFi</li>
  <li>Parking</li>
  <!-- Add more facilities as needed -->
</ul>

Summary

This guide covered the most common information requested, but there is much more information in the JSON file that can be used depending on the purpose of what is being built. If you have questions about any of the fields not mentioned, please contact us or ask in the community discord server.