Skip to content

Cards

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

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

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

ไพ่มีสองหรือสามหน้า:

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

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

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

การกระทำ
การดำเนินการผลการค้นหา

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

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

  1. ตั้งชื่อให้เพื่อจะได้จำได้ว่าการ์ดนี้เกี่ยวกับอะไร
  2. เลือก การปรับแต่ง คุณต้องการสมัครบัตรนี้
  3. เลือกหน้าการ์ดเริ่มต้นที่คุณต้องการให้ผู้ใช้เห็นก่อน โดยค่าเริ่มต้น หน้าการ์ดจะเป็นหน้าดั้งเดิมของสินค้าคงคลังนั้น
  4. เลือก badge ที่คุณต้องการใช้บนการ์ด ป้ายช่วยให้ผู้ใช้สามารถเปรียบเทียบสินค้าคงคลังในเมตริกรวม เช่น eco-friendly-
  5. เพิ่มคำหลักคั่นด้วยเครื่องหมายจุลภาคที่จะใช้โดย โปรแกรมรวบรวมข้อมูลเว็บ-
  6. เพิ่มชื่อเรื่องและคำอธิบายในภาษาที่คุณต้องการให้ผู้ใช้เห็น
  7. เลือกรูปภาพหนึ่งรูปหรือมากกว่าที่จะแสดงเมื่อผู้ใช้คลิก Gallery ลิงค์
  8. คลิกที่ Save ปุ่มเพื่อดำเนินการต่อ

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

การ์ด
การ์ดพร้อมเมนูการกระทำแบบยุบ

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

  • อัปเดตอัพเดตการกำหนดค่าการ์ดของคุณ
  • เพิ่มไปยัง WinkLinksเพิ่มบัตรลงในบัญชี WinkLinks ของคุณ
  • ฝังแสดงวิธีการฝังการ์ดนี้เป็นการ์ดเข้าสู่เว็บไซต์ของคุณ
  • ใช้งานร่วมกับ 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 จะแสดงวิธีใช้ตัวโหลดเนื้อหากระพริบตาเว็บคอมโพเนนต์และบอกให้ดึงบัตรห้องพักสำหรับรหัสของคุณ
  • บรรทัดที่ 11 จะแสดงวิธีการฝัง Javascript ของเราลงในไซต์ของคุณ
  • บรรทัดที่ 13 แสดงวิธีการฝังโหลดแอพวิงค์ส่วนประกอบเว็บและบอกให้ดึงค่ากำหนดการกำหนดค่าระดับหน้าของคุณ

นักพัฒนาที่ต้องการจัดการบัตรสามารถไปที่นักพัฒนา > API > สินค้าคงคลัง-