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
hotelIdrequired 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:
namehotelDescription
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:
addresscitycountrylocation.latitudelocation.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:
starRatingratingreviewCount
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.checkincheckinCheckoutTimes.checkouthotelImportantInformation
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 12 months ago