कार्ड्स

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

API

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

आगे पढ़ें

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