การ์ด

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

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

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

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

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

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

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

สร้างการ์ด

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

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

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

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

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

แชร์การ์ด

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

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

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

ฝัง

<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
เรียนรู้เพิ่มเติมเกี่ยวกับ ปลั๊กอิน WordPress ของ Wink