Cách nhúng Widget Tìm Kiếm vào trang web của bạn

Bài viết này hướng dẫn cách nhúng Widget Tìm Kiếm của Hotel Link vào website của bạn chỉ với 3 bước, giúp hiển thị ô tìm kiếm và dẫn người dùng đến trang đặt phòng với giá và tình trạng phòng trống theo thời gian thật.

Bước 1. Chèn code Widget Tìm kiếm (Search Widget) đưa vào trang web của bạn

Chèn đoạn mã sau vào trang web của bạn tại vị trí bạn muốn hiển thị ô tìm kiếm:

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

Đảm bảo rằng không bao gồm https: trong mã nhúng.
Bạn có thể tùy chỉnh màu sắc, kích thước và vị trí của tiện ích để phù hợp với thiết kế trang web của bạn.
Hãy đảm bảo cấu trúc mã giống với ví dụ bên dưới:

<!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 - Vietnamese</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=vi&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>

Bước 2. Dùng đoạn code Embedded Code đưa vào trang web của bạn.

Đoạn mã này hiển thị thông tin chi tiết về phòng và giá khi người dùng chọn ngày và nhấp vào "Đặt ngay".

Ví dụ về đoạn mã tiện ích tìm kiếm (Search Widget):

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

Một lần nữa, không được bao gồm https: trong đoạn mã nhúng.
Đặt đoạn mã này vào vị trí nơi bạn muốn hiển thị kết quả tìm kiếm và các tùy chọn đặt phòng.

Bước 3. Bấm 'Đặt ngay' (Book Now) để dẫn đến trang chọn phòng/giá

Sau khi nhúng:

Người dùng chọn ngày nhận phòng và trả phòng bằng cách sử dụng Widget Tìm kiếm (Search Widget).
Khi nhấp vào "Đặt ngay" (Book Now), dữ liệu sẽ được truyền qua trang Tiện ích Nhúng (Embedded Widget) qua các tham số URL:
- Định dạng 1: dd mmm yyyy (ví dụ: 22 Feb 2025)
- Định dạng 2: dd-mm-yyyy (ví dụ: 22-02-2025)
Hệ thống sử dụng một URL như sau:

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

hoặc

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

Đảm bảo rằng Widget nhúng của bạn được thiết lập để xử lý cả hai định dạng.