HubSpot CMS

HubSpot CMS hỗ trợ các module HTML tùy chỉnh và mã đầu/cuối trang trên toàn bộ trang web, giúp việc nhúng các thành phần Wink vào các trang marketing và trang đích trở nên đơn giản.

Tải các script Wink trên toàn trang

Trong HubSpot, vào Marketing → Files and Templates → Design Tools.
Mở main.css của theme đang hoạt động hoặc sử dụng cài đặt nội dung toàn cục.
Ngoài ra, vào Settings → Website → Pages → Custom Code.

Trong trường Head HTML, thêm stylesheet:

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

Trong trường Footer HTML, 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>

Lưu và xuất bản.

Thêm thành phần qua module HTML tùy chỉnh

Trong Design Tools, tạo một module mới loại Rich Text hoặc HTML.

Trong nội dung mặc định của module, dán HTML thành phần:

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

Lưu module và kéo nó vào bất kỳ mẫu trang hoặc trang nào bằng trình chỉnh sửa trang.

Thêm thành phần trực tiếp trong trình chỉnh sửa trang

Nếu bạn không muốn tạo module, bạn có thể dùng phần Custom HTML trong trình chỉnh sửa kéo-thả:

Mở trang trong trình chỉnh sửa trang HubSpot.
Nhấn Add và chọn phần Custom HTML hoặc Embed.
Dán thẻ thành phần vào trường HTML.
Nhấn Apply và xuất bản 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.