कार्ड्स

एक कार्ड एक एकल सप्लायर (जैसे होटल या अनुभव प्रदाता) या इन्वेंटरी (जैसे कमरे का प्रकार, मीटिंग रूम, स्पा आदि) का प्रतिनिधित्व करता है और एक इंटरैक्टिव, बुक करने योग्य, कार्ड 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 का उपयोग करके इस कार्ड को अपनी वेबसाइट में कैसे एम्बेड करें।

हम नीचे इन विकल्पों में से कुछ को अधिक विस्तार से कवर करते हैं।

Embed

<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 वेब कॉम्पोनेंट का उपयोग कैसे करें और इसे आपके कोड के लिए गेस्ट रूम कार्ड लाने के लिए कहें।
पंक्ति 11 आपको दिखाती है कि हमारी जावास्क्रिप्ट को अपनी साइट में कैसे एम्बेड करें।
पंक्ति 13 आपको दिखाती है कि wink-app-loader वेब कॉम्पोनेंट को कैसे एम्बेड करें और इसे आपके पेज-स्तरीय कॉन्फ़िगरेशन प्राथमिकताएँ लाने के लिए कहें।

API

डेवलपर्स जो कार्ड प्रबंधित करना चाहते हैं, वे Developers > API > Inventory पर जा सकते हैं।

आगे पढ़ें

हमारे Web Components संग्रह के बारे में अधिक जानें।
Wink WordPress plugin के बारे में अधिक जानें।