Thẻ

Một thẻ đại diện cho một nhà cung cấp duy nhất (ví dụ: khách sạn hoặc nhà cung cấp trải nghiệm) hoặc tồn kho (tức là loại phòng, phòng họp, spa, v.v.) và hiển thị chi tiết qua giao diện thẻ tương tác, có thể đặt chỗ. Người dùng có thể tương tác với thẻ theo các cách sau:

Nhấn nút Đặt chỗ.
Nhấn liên kết Bộ sưu tập để xem tất cả ảnh và video cho tồn kho này.
Nhấn liên kết Ưu đãi tốt nhất, nếu có, để xem phòng có giá tốt nhất.
Nhấn liên kết Chi tiết khách sạn, nếu có, để xem thông tin về cơ sở lưu trú.

Một thẻ hỗ trợ nhiều mặt để giảm kích thước thẻ và phân loại dữ liệu; giúp người dùng dễ dàng tiếp nhận và tăng cơ hội chuyển đổi người dùng thành đặt chỗ.

Một thẻ có thể có hai hoặc ba mặt:

Thẻ khách sạn hiển thị dữ liệu cơ sở lưu trú ở mặt trước và loại phòng tốt nhất ở mặt sau. Giá cả, ở cả hai mặt, hiển thị giá tốt nhất cho khách sạn.
Thẻ loại phòng hiển thị dữ liệu loại phòng ở mặt trước và dữ liệu cơ sở lưu trú ở mặt sau. Giá hiển thị giá của loại phòng ở mặt trước và giá tốt nhất cho khách sạn ở mặt sau.
Tất cả các thẻ khác (ví dụ: spa, nhà hàng, v.v.) có 3 mặt. Ví dụ: Dữ liệu spa hiển thị ở trang trước với giá tốt nhất của spa. Dữ liệu loại phòng cho phòng có giá tốt nhất ở mặt thứ hai. Dữ liệu cơ sở lưu trú cùng với phòng có giá tốt nhất ở mặt thứ ba của thẻ.

Xem trước thẻ — *Thẻ loại phòng mặt trước với tình trạng sẵn có*

Trên là ví dụ về thẻ loại phòng của chúng tôi. Nó chứa dữ liệu cơ sở lưu trú, đánh giá và phòng cùng với chính sách hủy và bữa ăn.

Phần còn lại của bài viết này sẽ hướng dẫn bạn cách tạo, tùy chỉnh và hiển thị thẻ cho người dùng của bạn.

Tạo thẻ

Trên là hình ảnh lấy từ Tìm kiếm và cho bạn thấy một số thao tác bạn có thể làm với kết quả tìm kiếm. Một trong những hành động đó là Tạo thẻ. Nhấn vào nút đó và nó sẽ chuyển hướng bạn đến trang mẫu thẻ của chúng tôi, nơi bạn có thể bắt đầu tùy chỉnh thẻ của mình.

Tùy chỉnh thẻ

Mẫu cho phép bạn tùy chỉnh thẻ theo các cách sau:

Đặt tên để bạn nhớ thẻ đó nói về điều gì.
Chọn Tùy chỉnh bạn muốn áp dụng cho thẻ này.
Chọn mặt thẻ ban đầu bạn muốn người dùng thấy trước tiên. Mặc định là mặt gốc của tồn kho đó.
Chọn huy hiệu bạn muốn sử dụng trên thẻ. Huy hiệu cho phép người dùng so sánh tồn kho dựa trên một chỉ số tổng hợp như thân thiện với môi trường.
Thêm từ khóa, cách nhau bằng dấu phẩy, sẽ được sử dụng bởi Trình thu thập dữ liệu Web.
Thêm tiêu đề và mô tả bằng các ngôn ngữ bạn muốn người dùng thấy.
Chọn một hoặc nhiều hình ảnh sẽ hiển thị khi người dùng nhấn vào liên kết Bộ sưu tập.
Nhấn nút Lưu để tiếp tục.

Sau khi lưu thẻ, bạn sẽ được chuyển hướng đến trang thẻ của mình và thẻ đã sẵn sàng để chia sẻ với mọi người.

Chia sẻ thẻ

Trên là hình ảnh với tất cả các hành động có sẵn cho thẻ của bạn:

Cập nhật Cập nhật cấu hình thẻ của bạn.
Thêm vào WinkLinks Thêm thẻ vào tài khoản WinkLinks của bạn.
Nhúng Cho bạn biết cách nhúng thẻ này như một Card vào trang web của bạn.
Sử dụng với WordPress Cho bạn biết cách sử dụng plugin WordPress của chúng tôi để nhúng thẻ này vào trang web của bạn.

Chúng tôi sẽ trình bày chi tiết hơn một số tùy chọn này bên dưới.

Nhúng

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Dưới đây là cách nhúng thẻ của bạn vào trang:

Dòng 3 cho bạn thấy cách nhúng các kiểu dáng Wink vào trang của bạn.
Các dòng 6 đến 9 cho bạn thấy cách sử dụng wink-content-loader Web Component và yêu cầu nó lấy thẻ phòng khách cho mã của bạn.
Dòng 11 cho bạn thấy cách nhúng Javascript của chúng tôi vào trang.
Dòng 13 cho bạn thấy cách nhúng wink-app-loader Web Component và yêu cầu nó lấy cấu hình cấp trang của bạn.

API

Các nhà phát triển muốn quản lý thẻ có thể truy cập Developers > API > Inventory.

Đọc thêm

Tìm hiểu thêm về bộ sưu tập Web Components.
Tìm hiểu thêm về plugin WordPress của Wink.