वेबफ्लो

वेबफ्लो तीन स्थानों पर कस्टम HTML और जावास्क्रिप्ट का समर्थन करता है: साइट-व्यापी <head>, साइट-व्यापी </body>, और प्रति-एलिमेंट कोड एम्बेड। इससे Wink वेब कॉम्पोनेंट्स को एकीकृत करना सरल हो जाता है।

साइट-व्यापी Wink स्क्रिप्ट लोड करें

वेबफ्लो डिज़ाइनर में, Project Settings → Custom Code खोलें।
Head Code सेक्शन में, स्टाइलशीट जोड़ें:
```
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
```
Footer Code सेक्शन में, स्क्रिप्ट और एप्लिकेशन लोडर जोड़ें (यहाँ YOUR_CLIENT_ID बदलें):
```
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
```
Save Changes पर क्लिक करें।

किसी विशिष्ट एलिमेंट में कॉम्पोनेंट जोड़ें

डिज़ाइनर में, उस Div या Section का चयन करें जहाँ आप कॉम्पोनेंट जोड़ना चाहते हैं।
दाईं पैनल में, </> Embed आइकन पर क्लिक करें (या Add पैनल से HTML Embed एलिमेंट जोड़ें)।
कॉम्पोनेंट HTML पेस्ट करें, उदाहरण के लिए:
```
<wink-content-loader
  layout="RANKED"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
Save & Close पर क्लिक करें।

प्रति-पृष्ठ कस्टम कोड

यदि आपको Wink केवल कुछ विशिष्ट पृष्ठों पर चाहिए, तो साइट-व्यापी के बजाय प्रति-पृष्ठ कोड इंजेक्शन का उपयोग करें:

लक्षित पृष्ठ के लिए Page Settings खोलें (Pages पैनल में गियर आइकन)।
Custom Code → Before </body> tag तक स्क्रॉल करें।
ऊपर दिए गए समान स्क्रिप्ट और ऐप लोडर पेस्ट करें।
पृष्ठ सेटिंग्स सहेजें।

उपलब्ध कॉम्पोनेंट्स

कॉम्पोनेंट	HTML टैग	उद्देश्य
कंटेंट लोडर	`<wink-content-loader>`	होटल कार्ड, ग्रिड, मैप दिखाना
लुकअप	`<wink-lookup>`	गंतव्य खोज बार
सर्च बटन	`<wink-search-button>`	यात्रा योजना चयनकर्ता खोलें
अकाउंट बटन	`<wink-account-button>`	साइन इन / उपयोगकर्ता मेनू
यात्रा योजना बटन	`<wink-itinerary-button>`	वर्तमान यात्रा योजना दिखाएं
यात्रा योजना चयनकर्ता	`<wink-itinerary-picker>`	पूर्ण यात्रा योजना फॉर्म
शॉपिंग कार्ट	`<wink-shopping-cart-button>`	कार्ट सारांश बटन

पूर्ण एट्रिब्यूट संदर्भ के लिए Web Components देखें।