Webflow

Webflow hỗ trợ HTML và JavaScript tùy chỉnh ở ba vị trí: <head> toàn trang, </body> toàn trang, và nhúng mã theo từng phần tử. Điều này giúp việc tích hợp các thành phần web của Wink trở nên đơn giản.

Tải các script của Wink toàn trang

Trong Webflow Designer, mở Project Settings → Custom Code.

Trong phần Head Code, thêm stylesheet:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Trong phần Footer Code, thêm script và trình tải ứng dụng (thay YOUR_CLIENT_ID):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Nhấn Save Changes.

Thêm thành phần vào phần tử cụ thể

Trong Designer, chọn Div hoặc Section nơi bạn muốn đặt thành phần.
Ở bảng bên phải, nhấn biểu tượng </> Embed (hoặc thêm phần tử HTML Embed từ bảng Add).

Dán HTML của thành phần, ví dụ:

<wink-content-loader
  layout="RANKED"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Nhấn Save & Close.

Mã tùy chỉnh theo trang

Nếu bạn chỉ cần Wink trên các trang cụ thể, hãy dùng chèn mã theo trang thay vì toàn trang:

Mở Page Settings của trang mục tiêu (biểu tượng bánh răng trong bảng Pages).
Kéo xuống Custom Code → Before </body> tag.
Dán script và trình tải ứng dụng như trên.
Lưu cài đặt trang.

Các thành phần có sẵn

Thành phần	Thẻ HTML	Mục đích
Content loader	`<wink-content-loader>`	Hiển thị thẻ khách sạn, lưới, bản đồ
Lookup	`<wink-lookup>`	Thanh tìm kiếm điểm đến
Search button	`<wink-search-button>`	Mở bộ chọn hành trình
Account button	`<wink-account-button>`	Đăng nhập / menu người dùng
Itinerary button	`<wink-itinerary-button>`	Hiển thị hành trình hiện tại
Itinerary picker	`<wink-itinerary-picker>`	Form hành trình đầy đủ
Shopping cart	`<wink-shopping-cart-button>`	Nút tóm tắt giỏ hàng

Xem Web Components để tham khảo đầy đủ các thuộc tính.