Skip to content
English
Suggest a New Article Customer portal Sign in
  • There are no suggestions because the search field is empty.

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

or

<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.