वेबसाइट बुकिंग फॉर्म
अपनी वेबसाइट पर बुकिंग फॉर्म का उपयोग शुरू करने के लिए, आपको अपनी कंपनी का विशेष तकनीकी नंबर (टोकन) पता लगाना होगा। ऐसा करने के लिए, आपको कंपनी टैब पर कंपनी प्रोफ़ाइल पर जाना होगा, वहां आपको एपीआई टोकन लाइन मिलेगी। किसी टोकन को कॉपी करने के लिए आपको उस पर क्लिक करना होगा और यह कॉपी हो जाएगा। नंबर प्राप्त करने के बाद, आपको अपनी साइट के कोड में बस कुछ पंक्तियाँ डालनी होंगी।
यह कोड टैग के बीच डाला जाना चाहिए <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
यह कोड क्लोजिंग टैग से पहले डाला जाना चाहिए </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
यह एप्लिकेशन का कोड ही है, इसे <body> टैग के बीच उस स्थान पर डालना होगा जहां आपको इसकी आवश्यकता है
<rentprog-widget
token="token"
locale="hi"
show_all_cars='true'
hidden_car_year='false'
places='[{"place":"Office","price":0},{"place":"Delivery within the city","price":30},{"place":"Airport","price":80}]'
equipment='[{"item":"Roof rack","price":40, "daily": true},{"item":"GPS Navigator","price":15, "daily": false}]'
middlename_required="false"
agreement='{"text": ", and also accept ", "link_text": "rental terms", "link": "https://rentprog.ru/public/agreement.html"}'
button_classes="text-4xl lg:text-lg h-14 lg:h-10 bg-blue-500 flex justify-center items-center w-full text-white px-4 py-3 mt-2 rounded-md focus:outline-none"
icon_classes="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono"
form_container="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg lg:text-base"
container_classes="relative px-2 py-4 lg:px-10 lg:py-10 bg-white lg:mx-8 mx-0 shadow"
title_container_classes="block pl-2 font-semibold text-xl self-start text-gray-700"
title_classes="lg:leading-relaxed sm:text-4xl text-xl"
show_email="false"
show_phone="false"
show_middlename="false"
show_birthday="false"
show_passport="false"
show_driver_license="false"
rental_object="Choose a boat"
>
</rentprog-widget>
token - आपको अपना एपीआई टोकन डालना होगा। इसे कंपनी प्रोफ़ाइल, कंपनी टैब में पाया जा सकता है। आपको उस पर क्लिक करना होगा और टोकन क्लिपबोर्ड पर कॉपी हो जाएगा।
locale - प्रपत्र भाषा, सम्मिलित करने की आवश्यकता है en - अंग्रेजी के लिये, de - जर्मन के लिए, fr - फ्रेंच के लिए, pt - पुर्तगाली के लिए, es - स्पैनिश के लिए, hi - हिंदी के लिए, sr - सर्बियाई के लिए, tr - तुर्की के लिए, th - थाई के लिए, it - इटालियन के लिए, id - इंडोनेशियाई के लिए.
show_all_cars - सभी कारें दिखाओ; डिफ़ॉल्ट रूप से, सेटिंग्स में निर्दिष्ट आरक्षणों के बीच के अंतराल को ध्यान में रखते हुए, केवल निर्दिष्ट तिथियों के लिए उपलब्ध तिथियों को ही दिखाया जाता है।
show_email - ईमेल इनपुट फ़ील्ड दिखाएं या नहीं. यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
show_phone - फ़ोन इनपुट फ़ील्ड दिखाएं या नहीं. यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
show_middlename - मध्य नाम दर्ज करने के लिए फ़ील्ड दिखाएं या नहीं। यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
show_birthday - जन्मतिथि दर्ज करने के लिए फ़ील्ड दिखाएं या नहीं। यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
show_passport - पासपोर्ट डेटा दर्ज करने के लिए फ़ील्ड दिखाएं या नहीं। यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
show_address - पता इनपुट फ़ील्ड दिखाएं या नहीं. यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
show_driver_license - ड्राइवर का लाइसेंस डेटा दर्ज करने के लिए फ़ील्ड दिखाएं या नहीं। यदि मान "सही" है, तो फ़ील्ड दिखाया जाएगा; यदि मान "गलत" है, तो फ़ील्ड छिपा दी जाएगी।
rental_object - एक पैरामीटर जो "कार चुनें" लाइन को दर्ज मूल्य से बदल देता है, उदाहरण के लिए "एक नाव चुनें"।
hidden_car_year - कार के निर्माण का वर्ष छुपाएं, यदि इसे "सही" पर सेट किया गया है, तो वर्ष छिपा दिया जाएगा, यदि इसे "गलत" पर सेट किया गया है या पैरामीटर गायब है, तो वर्ष दिखाया जाएगा।
passport_required - पासपोर्ट डेटा फ़ील्ड, यदि "सही" पर सेट है, तो फ़ील्ड अनिवार्य हो जाती हैं।
driver_license_required - ड्राइवर का लाइसेंस डेटा फ़ील्ड, यदि मान "सही" है, तो फ़ील्ड अनिवार्य हो जाते हैं, यदि "गलत" है तो वे वैकल्पिक हैं।
birthday_required - जन्मतिथि फ़ील्ड, यदि यह "सही" है, तो फ़ील्ड अनिवार्य हो जाती हैं, यदि "गलत" है तो वे वैकल्पिक हैं।
email_required - ईमेल फ़ील्ड, यदि यह "सही" है, तो फ़ील्ड अनिवार्य हो जाती हैं, यदि "गलत" है तो वे वैकल्पिक हैं।
phone_required - फ़ोन इनपुट फ़ील्ड, यदि यह "सत्य" है, तो फ़ील्ड अनिवार्य हो जाती हैं, यदि "गलत" है तो वे वैकल्पिक हैं।
middlename_required - मध्य नाम इनपुट फ़ील्ड, यदि यह "सत्य" है, तो फ़ील्ड अनिवार्य हो जाती हैं, यदि "गलत" है तो वे वैकल्पिक हैं।
places - ये डिलीवरी और रिसेप्शन के स्थान हैं, जो डिलीवरी/रिसेप्शन के लिए कीमतों का संकेत देते हैं। यदि आपको फ़ील्ड डेटा की आवश्यकता नहीं है, तो इस विकल्प को हटा दें।
equipment - अतिरिक्त उपकरणों की सूची, daily - दैनिक भुगतान या संपूर्ण किराये की अवधि के लिए, price - कीमत। यदि आपको इस फ़ील्ड की आवश्यकता नहीं है, तो बस इस पैरामीटर को हटा दें।
chairs - बच्चे की सीटें, दैनिक - दैनिक भुगतान या संपूर्ण किराये की अवधि के लिए, मूल्य - मूल्य। यदि आपको फ़ील्ड डेटा की आवश्यकता नहीं है, तो इस विकल्प को हटा दें।
boosters - बिना बैकरेस्ट (सीटें) के बच्चों की कुर्सियाँ, सेटिंग्स समान हैं। यदि आपको इन फ़ील्ड्स की आवश्यकता नहीं है, तो इस पैरामीटर को हटा दें।
agreement - पहली पंक्ति तय हो गई है, चूंकि हम व्यक्तिगत डेटा एकत्र करते हैं, यदि आप अपने नियमों और शर्तों में एक लिंक जोड़ना चाहते हैं, तो आपको इस पैरामीटर को भरना होगा।
यदि कुर्सियाँ, बूस्टर, उपकरण, अनुबंध पैरामीटर की आवश्यकता नहीं है, तो बस उन्हें कोड से हटा दें।
विज्वल डिज़ाइन
डिज़ाइन के लिए टेलविंड v2 लाइब्रेरी का उपयोग किया जाता है। इसके बारे में अधिक विवरण यहां। फॉर्म की लोडिंग को तेज करने के लिए, सभी वर्गों का उपयोग नहीं किया जाता है, केवल उन वर्गों का उपयोग किया जाता है जो पहले से ही फॉर्म में उपयोग किए जाते हैं, साथ ही सभी पृष्ठभूमि और टेक्स्ट रंग वर्गों (बीजी-... और टेक्स्ट-...) का उपयोग किया जाता है। यदि आपको वास्तव में कुछ अतिरिक्त कक्षा की आवश्यकता है, तो कृपया समर्थन को लिखें और हम इसे जोड़ देंगे। यदि आप परिवर्तन करना चाहते हैं, तो नीचे दिए गए चर का उपयोग करें। उन डिफ़ॉल्ट वर्गों को छोड़ना सबसे अच्छा है जो इंडेंट इत्यादि के लिए ज़िम्मेदार हैं, और केवल उन वर्गों को बदलें जो पृष्ठभूमि और टेक्स्ट रंग के लिए ज़िम्मेदार हैं। लेकिन इंडेंटेशन आदि में बदलाव करना भी संभव है, लेकिन इससे विभिन्न उपकरणों पर डिस्प्ले प्रभावित हो सकता है, कृपया सावधान रहें। आप उपरोक्त उदाहरण के साथ-साथ अपनी वेबसाइट पर जेनरेट किए गए फॉर्म में डिफ़ॉल्ट मान देख सकते हैं। नीचे दिए गए चरों का उपयोग वैकल्पिक है; यदि वे नहीं भरे गए हैं, तो डिफ़ॉल्ट मान लिए जाएंगे।
button_classes - सीएसएस कक्षाएं जो बटनों के दृश्य प्रदर्शन को नियंत्रित करती हैं।
icon_classes - सीएसएस कक्षाएं जो बाईं ओर आइकन के दृश्य प्रदर्शन को नियंत्रित करती हैं।
container_classes - सीएसएस कक्षाएं जो कंटेनर के दृश्य प्रदर्शन को नियंत्रित करती हैं।
form_container - सीएसएस कक्षाएं जो कंटेनर के दृश्य प्रदर्शन को नियंत्रित करती हैं।
title_container_classes - सीएसएस कक्षाएं जो हेडर कंटेनर के दृश्य प्रदर्शन को नियंत्रित करती हैं।
title_classes - सीएसएस कक्षाएं जो हेडर के दृश्य प्रदर्शन को नियंत्रित करती हैं।