How to embed the Search Widget

This article explains how to embed the Hotel Link Search Widget on your website in three simple steps. You'll be able to display a search form and direct users to a booking page with real-time availability and rates.

Step 1: Add the Search Widget Code

Insert the following code snippet into your website where you want the search box to appear:

<section id="hbe-bws-wrapper-widget-code"></section>
<link type="text/css" rel="stylesheet" href="//book.securebookings.net/css/search-wdg.css" />
<script type="text/javascript" src="//book.securebookings.net/js/widget.search.js"></script>
<script type="text/javascript" src="//book.securebookings.net/searchWidgetCustomize?lang=undefined&id=1e3fb576-072a-1704791444-4eec-9869-0fb8a7ed4825&ajax=true"></script>

Make sure the https: is not included in the embedded code.
You can customize the widget’s color, size, and position to match your website’s design.
Ensure the structure of the code matches the example below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Widget with Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS for the search widget -->
    <link type="text/css" rel="stylesheet" href="https://book.securebookings.net/css/search-wdg.css">
</head>
<body>

<div class="container mt-5">
    <div class="card">
        <div class="card-header text-center bg-primary text-white">
            <h2>Search Widget - English</h2>
        </div>
        <div class="card-body">
            <section id="hbe-bws-wrapper-widget-code"></section>
        </div>
        <div class="card-footer text-center">
            <p class="text-muted">Powered by Hotel Link</p>
        </div>
    </div>
</div>

<!-- Secure Bookings Search Widget JavaScript -->
<script type="text/javascript" src="https://book.securebookings.net/js/widget.search.js"></script>
<script type="text/javascript" src="https://book.securebookings.net/searchWidgetCustomize?lang=en&id=1e49c7fa-5aae-1704785171-481a-a924-028776bac079&ajax=true"></script>

<!-- Bootstrap JavaScript and dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2: Add the Embedded Widget Code

This code displays the room and rate details when a user selects a date and clicks "Book Now". Sample Search Widget script:

<div class="hbe-bws">
  <section id="hbe-bws-page">
    <div id="hbe-bws-wrapper"></div>
  </section>
</div>

<link type="text/css" rel="stylesheet" href="//book.securebookings.net/css/app.css" />
<script type="text/javascript" src="//book.securebookings.net/js/widget.all.js"></script>
<script type="text/javascript" src="//book.securebookings.net/widgetCustomize?lang=en&widgetType=Widget&id=1e3fb576-072a-1704791444-4eec-9869-0fb8a7ed4825&ajax=true"></script>

Again, do not include https: in the embedded version.
Place this snippet where the search results and booking options should be shown.

Step 3: User Experience and Booking Flow

Once embedded:

The user selects check-in and check-out dates using the Search Widget.
Clicking "Book Now" sends the data to the Embedded Widget via URL parameters:
- Format 1: dd mmm yyyy (e.g., 22 Feb 2025)
- Format 2: dd-mm-yyyy (e.g., 22-02-2025)
The system uses a URL like:

<your_url>/reservation?check_in=22-Feb-2025&check_out=24-Feb-2025

<your_url>/reservation?check_in=22-02-2025&check_out=24-02-2025

Make sure your embedded widget is set up to handle either format.