Overview

Selfbook Direct SDK provides hotels with an all-in-one booking application that seamlessly integrates hotel booking functionality into a website. The bookNow() function is a core component of the Selfbook Direct SDK. As a Developer, you will interact with the Selfbook Direct app through the bookNow() JavaScript function.

This function can be triggered via JavaScript, i.e., user interactions, such as clicking a button or submitting a form. It provides a streamlined way to open the Selfbook booking interface with pre-filled details based on user selections or CTA parameters.

The bookNow() function is designed for flexibility in use cases as it accepts various parameters—including dates, guests, room preferences, and promotional codes—so that hotels can customize the booking experience to match their offerings. This documentation provides step-by-step guidance on integrating bookNow() ensuring that developers of all experience levels can successfully implement and troubleshoot the function.

How to Use the Selfbook SDK

To integrate the Selfbook booking functionality into your website, follow these steps:

Step 1: Embed the Selfbook SDK Script

A Selfbook Onboarding Manager will provide our clients with a unique SDK script tag. This script file is essential for enabling bookNow() on a website.

Adding the Script Tag

Place the following script tag just before the closing </body> tag or within the <footer> section:

<!-- Start of script tag -->
  <script async type="text/javascript"
  src="<https://sdk.selfbook.com/selfbook.js?hotelId=hotelIdHere&apiKey=hotelApiKe><button 
onclick="bookNow({hotelId: 'your-hotel-id', roomId: 'your-room-id'});"> 
Book Now </button>

<a href="javascript:void(0);" 
onclick="bookNow({hotelId: 'your-hotel-id', roomId: 'your-room-id'});"> 
Book Now </a>" 
  id="selfbook_jssdk"></script>
<!-- End of script tag -->

Best Practice

We recommend loading the script tag directly on the site rather than through third-party tag management systems, as indirect embedding can increase load times and/or break some functionalities.

Step 2: Trigger `bookNow()` from a Button or Link

Once the script is loaded, you can attach bookNow() to any HTML element, such as a button or link, per the examples below.

For a staging site, this approach is recommended. If implementing this on a live/production site before the hotel agrees to go live, we advise adding only a CTA or link to an unlinked page (/selfbook-staging-page). This ensures that guests cannot make a booking before the rates and pricing feed have been fully tested.

<button 
onclick="bookNow({hotelId: 'your-hotel-id', roomId: 'your-room-id'});"> 
Book Now </button>

<a href="javascript:void(0);" 
onclick="bookNow({hotelId: 'your-hotel-id', roomId: 'your-room-id'});"> 
Book Now </a>