सहायता लेख

MultiLipi – Webflow इंटीग्रेशन गाइड

मल्टीलिपि
मल्टीलिपि6/19/2025
10 मिनट पढ़ें
ब्लॉग कवर छवि

बिना बैकएंड कोड के अपने विज़ुअल डेवलपमेंट को विश्व स्तर पर स्केल करें।

Webflow विज़ुअल डेवलपमेंट के लिए एक प्रमुख प्लेटफ़ॉर्म है, लेकिन नेटिव लोकलाइज़ेशन जटिल और महंगा हो सकता है। MultiLipi एक ही स्क्रिप्ट इंजेक्शन के माध्यम से Webflow के आर्किटेक्चर में सीधे एकीकृत होता है, जो तुरंत आपके स्टैटिक पेजों और CMS कलेक्शन को एक बहुभाषी आधारभूत संरचना पूर्ण SEO इंडेक्सिंग के साथ।

यह गाइड Webflow के उपयोग करके एकीकरण प्रक्रिया का विवरण देता है कस्टम कोड सुविधा।

1. डिप्लॉयमेंट की आवश्यकताएं

शुरू करने से पहले, सुनिश्चित करें कि आपका वातावरण आवश्यकताओं को पूरा करता है:

Webflow साइट प्लान

आपको बेसिक साइट प्लान (या उच्चतर) "कस्टम कोड" सुविधा को अनलॉक करने के लिए।

मल्टीलिपि एपीआई कुंजी

इसे अपने डैशबोर्ड के अंतर्गत यहाँ देखें सेटिंग्स > सामान्य.

Webflow डैशबोर्ड पर Khushal's Workspace दिखाया गया है जिसमें स्टार्टर साइट पोर्टफोलियो प्रोजेक्ट पर "Site settings" बटन हाइलाइट किया गया है

2. चरण 1: साइट आर्किटेक्चर एक्सेस करें

हम अनुवाद इंजन को ग्लोबल हेडर में इंजेक्ट करेंगे ताकि यह सुनिश्चित हो सके कि यह सभी पृष्ठों और सीएमएस टेम्प्लेट में बना रहे।

  1. 1

    अपने Webflow डैशबोर्ड.

  2. 2

    अपने प्रोजेक्ट कार्ड का पता लगाएं और सेटिंग्स आइकन (⚙️) (या चुनें साइट सेटिंग्स डिज़ाइनर मेनू से)।

  3. 3

    पर जाएँ कस्टम कोड टैब शीर्ष नेविगेशन बार में।

3. चरण 2: इंफ्रास्ट्रक्चर स्क्रिप्ट इंजेक्ट करें

  1. 1

    लेबल वाले फ़ील्ड तक स्क्रॉल करें "हेड कोड".

  2. 2

    ध्यान दें: इसे "फ़ुटर कोड" में इसे न रखें, क्योंकि इससे अनुवाद लोड होने में देरी होगी और "अनुवादित सामग्री का फ्लैश" होगा।

कार्य: कनेक्शन स्क्रिप्ट पेस्ट करें

निम्नलिखित कनेक्शन स्क्रिप्ट को फ़ील्ड में पेस्ट करें:

HTML

⚠️ महत्वपूर्ण कॉन्फ़िगरेशन

  • बदलें YOUR_API_KEY_HERE अपने MultiLipi डैशबोर्ड से कॉपी की गई वास्तविक API कुंजी के साथ
  • हरे पर क्लिक करें परिवर्तन सहेजें ऊपरी-दाएँ कोने में बटन।
वेबफ़्लो कस्टम कोड सेटिंग्स पृष्ठ पर हेड कोड अनुभाग खाली टेक्स्ट फ़ील्ड और हरे रंग के सेव चेंजेस बटन के साथ दिखाया गया है, कस्टम कोड मेनू आइटम बाईं साइडबार में हाइलाइट किया गया है

4. Step 3: Deployment & Verification

Webflow डिज़ाइनर व्यू में कस्टम कोड नहीं चलाता है। इंजन को क्रियान्वित होते हुए देखने के लिए आपको प्रकाशित करना होगा।

प्रकाशित करें

नीले प्रकाशित करें बटन और अपना प्रोडक्शन डोमेन चुनें (या .webflow.io स्टेजिंग डोमेन)।

सत्यापित करें

लाइव लिंक खोलें।

विज़ुअल जाँच

भाषा स्विचर नीचे-बाएँ कोने में दिखाई देना चाहिए।

सीएमएस जाँच

CMS संग्रह पृष्ठ पर नेविगेट करें (जैसे, /blog/post-1) और भाषाओं को स्विच करते हैं ताकि यह सुनिश्चित हो सके कि डायनामिक सामग्री सही ढंग से अनुवादित हो।

समस्या निवारण प्रोटोकॉल

  • स्विचर गायब है? कोड सहेजने के बाद साइट प्रकाशित करने की पुष्टि करें।
  • योजना जाँच: सुनिश्चित करें कि आपकी Webflow होस्टिंग योजना सक्रिय है; फ्री स्टेजिंग साइटें अक्सर कस्टम डोमेन पर कस्टम कोड निष्पादन को सीमित करती हैं।

5. ऑप्टिमाइज़ेशन और स्टाइलिंग

डिप्लॉय होने के बाद, MultiLipi पृष्ठभूमि में चुपचाप काम करता है।

डिज़ाइन की अखंडता

चूंकि हम केवल टेक्स्ट नोड्स को स्वैप करते हैं, इसलिए आपकी वेबफ़्लो इंटरैक्शन (IX2) और स्क्रॉल एनिमेशन पूरी तरह से बरकरार रहते हैं।

स्विचर कस्टमाइज़ेशन

आप हमारे डैशबोर्ड सेटिंग्स का उपयोग करके स्विचर को रीपोजिशन कर सकते हैं या अपनी साइट की विशिष्ट टाइपोग्राफी से मिलान करने के लिए उसके CSS को ओवरराइड कर सकते हैं।

SEO ऑटोमेशन

हम स्वचालित रूप से sitemap.xml प्रविष्टियाँ और hreflang टैग्स आपके Webflow प्रोजेक्ट के लिए, यह सुनिश्चित करते हुए कि आप मैन्युअल SEO कार्य के बिना वैश्विक खोज परिणामों में रैंक करते हैं।

क्या यह लेख सहायक था?

इस लेख में

साझा करें

वैश्विक स्तर पर जाने के लिए तैयार?

आइए चर्चा करें कि MultiLipi आपकी सामग्री रणनीति को कैसे बदल सकता है और AI-संचालित बहुभाषी अनुकूलन के साथ वैश्विक दर्शकों तक पहुंचने में आपकी सहायता कर सकता है।

फ़ॉर्म भरें और हमारी टीम 24 घंटे के भीतर आपसे संपर्क करेगी।