การ์ด

การ์ดแทนซัพพลายเออร์รายเดียว (เช่น โรงแรมหรือผู้ให้บริการประสบการณ์) หรือสินค้าคงคลัง (เช่น ประเภทห้อง ห้องประชุม สปา ฯลฯ) และแสดงรายละเอียดผ่าน UI การ์ดที่โต้ตอบได้และจองได้
ผู้ใช้สามารถโต้ตอบกับการ์ดได้ดังนี้:

คลิกปุ่ม Book
คลิกลิงก์ Gallery เพื่อดูรูปภาพและวิดีโอทั้งหมดของสินค้าคงคลังนี้
คลิกลิงก์ Best deal หากมี เพื่อดูห้องที่มีราคาดีที่สุด
คลิกลิงก์ Hotel details หากมี เพื่อดูข้อมูลที่พัก

การ์ดรองรับหลายหน้าเพื่อลดขนาดการ์ดและจัดหมวดหมู่ข้อมูล ทำให้ผู้ใช้สามารถบริโภคข้อมูลได้ง่ายขึ้น และเพิ่มโอกาสในการเปลี่ยนผู้ใช้เป็นการจอง

การ์ดมีสองหรือสามหน้า:

การ์ดโรงแรมแสดงข้อมูลที่พักด้านหน้า และประเภทห้องที่ดีที่สุดด้านหลัง ราคาบนทั้งสองด้านแสดงราคาที่ดีที่สุดของโรงแรม
การ์ดประเภทห้องแสดงข้อมูลประเภทห้องด้านหน้า และข้อมูลที่พักด้านหลัง ราคาบนด้านหน้าจะแสดงราคาของประเภทห้อง และด้านหลังแสดงราคาที่ดีที่สุดของโรงแรม
การ์ดอื่นๆ ทั้งหมด (เช่น สปา ร้านอาหาร ฯลฯ) มี 3 หน้า ตัวอย่าง: ข้อมูลสปาแสดงบนหน้าด้านหน้า พร้อมราคาที่ดีที่สุดของสปา ข้อมูลประเภทห้องสำหรับห้องที่มีราคาดีที่สุดอยู่ด้านที่สอง ข้อมูลที่พักพร้อมกับห้องที่มีราคาดีที่สุดอยู่บนหน้าที่สามของการ์ด

ด้านบนคือตัวอย่างการ์ดประเภทห้องของเรา ซึ่งประกอบด้วยข้อมูลที่พัก รีวิว และข้อมูลห้อง พร้อมนโยบายการยกเลิกและมื้ออาหาร

ส่วนที่เหลือของบทความนี้จะแนะนำวิธีสร้าง ปรับแต่ง และแสดงการ์ดให้ผู้ใช้ของคุณ

สร้างการ์ด

ภาพด้านบนมาจาก Search และแสดงบางสิ่งที่คุณสามารถทำได้กับผลการค้นหาของคุณ หนึ่งในนั้นคือ Make a card
คลิกปุ่มนั้นแล้วจะพาคุณไปยังหน้าฟอร์มการ์ดเพื่อเริ่มปรับแต่งการ์ดของคุณ

ปรับแต่งการ์ด

ฟอร์มช่วยให้คุณปรับแต่งการ์ดได้ดังนี้:

ตั้งชื่อเพื่อให้คุณจำได้ว่าการ์ดนี้เกี่ยวกับอะไร
เลือก Customization ที่คุณต้องการใช้กับการ์ดนี้
เลือกหน้าการ์ดเริ่มต้นที่คุณต้องการให้ผู้ใช้เห็นก่อน โดยค่าเริ่มต้นคือหน้าพื้นฐานของสินค้าคงคลังนั้น
เลือก badge ที่คุณต้องการใช้บนการ์ด ป้ายช่วยให้ผู้ใช้เปรียบเทียบสินค้าคงคลังตามเกณฑ์รวม เช่น eco-friendly
เพิ่มคำสำคัญ คั่นด้วยเครื่องหมายจุลภาค ซึ่งจะถูกใช้โดย Web Crawlers
เพิ่มชื่อเรื่องและคำอธิบายในภาษาที่คุณต้องการให้ผู้ใช้เห็น
เลือกภาพหนึ่งภาพหรือมากกว่านั้นที่จะปรากฏเมื่อผู้ใช้คลิกลิงก์ Gallery
คลิกปุ่ม Save เพื่อดำเนินการต่อ

หลังจากบันทึกการ์ดแล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าการ์ดของคุณ และการ์ดของคุณพร้อมที่จะแชร์กับโลกแล้ว

แชร์การ์ด

ภาพด้านบนแสดงการดำเนินการทั้งหมดที่มีสำหรับการ์ดของคุณ:

Update อัปเดตการตั้งค่าการ์ดของคุณ
Add to WinkLinks เพิ่มการ์ดไปยังบัญชี WinkLinks ของคุณ
Embed แสดงวิธีฝังการ์ดนี้เป็น Card ลงในเว็บไซต์ของคุณ
Use with WordPress แสดงวิธีใช้ WordPress plugin ของเราเพื่อฝังการ์ดนี้ลงในเว็บไซต์ของคุณ

เราจะอธิบายตัวเลือกเหล่านี้อย่างละเอียดด้านล่าง

ฝัง

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

นี่คือวิธีฝังการ์ดของคุณลงในเว็บไซต์:

บรรทัดที่ 3 แสดงวิธีฝังสไตล์ของ Wink ลงในเว็บไซต์ของคุณ
บรรทัดที่ 6 ถึง 9 แสดงวิธีใช้ wink-content-loader Web Component และบอกให้ดึงการ์ดห้องพักแขกสำหรับโค้ดของคุณ
บรรทัดที่ 11 แสดงวิธีฝัง Javascript ของเราในเว็บไซต์ของคุณ
บรรทัดที่ 13 แสดงวิธีฝัง wink-app-loader Web Component และบอกให้ดึงการตั้งค่าระดับหน้าของคุณ

API

นักพัฒนาที่ต้องการจัดการการ์ดสามารถไปที่ Developers > API > Inventory

อ่านเพิ่มเติม

เรียนรู้เพิ่มเติมเกี่ยวกับชุด Web Components
เรียนรู้เพิ่มเติมเกี่ยวกับ Wink WordPress plugin