इसे छोड़कर कंटेंट पर जाएं

HubSpot CMS

HubSpot CMS कस्टम HTML मॉड्यूल और साइट-व्यापी हेडर/फूटर कोड का समर्थन करता है, जिससे मार्केटिंग पेज और लैंडिंग पेज पर Wink कंपोनेंट्स को एम्बेड करना आसान हो जाता है।

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

Section titled “Wink स्क्रिप्ट्स साइट-व्यापी लोड करें”
  1. HubSpot में जाएं, Marketing → Files and Templates → Design Tools पर जाएं।
  2. अपने सक्रिय थीम की main.css खोलें या ग्लोबल कंटेंट सेटिंग्स का उपयोग करें।
  3. वैकल्पिक रूप से, Settings → Website → Pages → Custom Code पर जाएं।
  4. Head HTML फ़ील्ड में स्टाइलशीट जोड़ें:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  5. Footer HTML फ़ील्ड में स्क्रिप्ट और एप्लिकेशन लोडर जोड़ें (यहाँ 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>
  6. सेव करें और प्रकाशित करें।

कस्टम HTML मॉड्यूल के माध्यम से एक कंपोनेंट जोड़ें

Section titled “कस्टम HTML मॉड्यूल के माध्यम से एक कंपोनेंट जोड़ें”
  1. Design Tools में, Rich Text या HTML प्रकार का नया मॉड्यूल बनाएं।
  2. मॉड्यूल की डिफ़ॉल्ट सामग्री में कंपोनेंट HTML पेस्ट करें:
    <wink-content-loader
    layout="HOTEL"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  3. मॉड्यूल सेव करें और इसे किसी भी पेज टेम्पलेट या पेज में पेज एडिटर का उपयोग करके ड्रैग करें।

पेज एडिटर में सीधे एक कंपोनेंट जोड़ें

Section titled “पेज एडिटर में सीधे एक कंपोनेंट जोड़ें”

यदि आप मॉड्यूल बनाना पसंद नहीं करते हैं, तो आप ड्रैग-एंड-ड्रॉप एडिटर में Custom HTML सेक्शन का उपयोग कर सकते हैं:

  1. HubSpot पेज एडिटर में पेज खोलें।
  2. Add पर क्लिक करें और Custom HTML या Embed सेक्शन चुनें।
  3. HTML फ़ील्ड में कंपोनेंट टैग पेस्ट करें।
  4. Apply पर क्लिक करें और पेज प्रकाशित करें।

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

Section titled “उपलब्ध कंपोनेंट्स”
कंपोनेंटHTML टैगउद्देश्य
Content loader<wink-content-loader>होटल कार्ड, ग्रिड, मैप दिखाना
Lookup<wink-lookup>डेस्टिनेशन के लिए सर्च बार
Search button<wink-search-button>यात्रा योजना चयनकर्ता खोलना
Account button<wink-account-button>साइन इन / उपयोगकर्ता मेनू
Itinerary button<wink-itinerary-button>वर्तमान यात्रा योजना दिखाना
Itinerary picker<wink-itinerary-picker>पूर्ण यात्रा योजना फॉर्म
Shopping cart<wink-shopping-cart-button>कार्ट सारांश बटन

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