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:
- Created an account and obtained your API key.
- 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.
Updated 7 days ago