Flight Search Widget - Demo

This page demonstrates how to embed the flight search widget in your website using an iframe, and lets you preview the widget under a hand-picked per-agent config.

Live Demo — pick a config

This renders the real FlightSearchWidget (search → list → booking, no iframe) under a chosen WidgetConfig, so you can see every look actually working end to end, not just a static mock. Switching a theme resets the widget to the home screen.

The un-configured default look across every section.

Tìm và đặt vé máy bay dễ dàng

So sánh giá từ nhiều hãng bay, đặt vé chỉ trong vài phút

Điểm đi

Điểm đến

Ngày đi

Khứ hồi

Vui lòng chọn điểm đi và điểm đến

5 hãng bay nội địa

Giá vé minh bạch, không phụ phí ẩn

Hỗ trợ khách hàng 24/7

Embedded (iframe) version

The same widget as it actually ships: /embed/flight-search in an iframe, fetching its config live from GET /config with no override.

How to Embed

Add this iframe code to your website where you want the flight search widget to appear:

<iframe
  src="https://your-domain.com/embed/flight-search"
  width="100%"
  height="800px"
  frameborder="0"
  title="Flight Search"
></iframe>

Features

✈️ Full-featured flight search with date, passenger, and cabin selection
🔍 Airport search with regional filtering
📅 Interactive calendar for date selection
🎫 Flight list with filters (airlines, price, departure/arrival times)
💳 Complete booking flow with passenger details and invoice
📱 Responsive design (works on desktop and mobile)
🎨 Custom styling that matches your design
🚀 No header/footer - seamless integration

Integration Options

The widget can be integrated in multiple ways:

iframe (Recommended for external sites): Use /embed/flight-search
React Component: Import FlightSearchWidget directly in Next.js/React projects
Standalone Page: Use /flight-search as a full page