Webflow एकीकरण#

Webflow कस्टम कोड और CMS/ईकॉमर्स फ़ील्ड का उपयोग करके Room Visualizer बटन रेंडर करें जिनका प्रोडक्ट कोड ideal.house कैटलॉग से मेल खाता है।

सत्यापन स्थिति: Webflow हेल्प सेंटर दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षा किया गया था। कोई ग्राहक Webflow साइट उपलब्ध नहीं थी। कस्टम कोड प्रीव्यू/प्रकाशन के बाद चलता है और Webflow एक एम्बेड में सर्वर-साइड कोड नहीं चलाता, इसलिए प्रकाशित स्टेजिंग डोमेन का परीक्षण करें।

** SDK को लोड करने से पहले:** डैशबोर्ड → सेटिंग्स खोलें, अपने स्टोरफ्रंट ओरिजिन को Allowed Origins (CORS) में जोड़ें, और सहेजें पर क्लिक करें। प्रकाशित होस्टनेम और किसी भी प्रीव्यू या स्टेजिंग ओरिजिन को शामिल करें जिन्हें आप उपयोग करते हैं; कई ओरिजिन को कॉमा से अलग करें। कॉन्फ़िगरेशन के चरण देखें।

पूर्वशर्तें और सीमाएँ#

आपको कस्टम कोड या कोड एम्बेड का उपयोग करने की अनुमति, एक स्टेजिंग डोमेन, Shop ID, Publishable Key, और एक आयातित कैटलॉग SKU की आवश्यकता है। Webflow योजना की आवश्यकताएँ JavaScript एम्बेड्स पर लागू होती हैं। ब्राउज़र में एक Publishable Key हो सकती है, लेकिन कभी भी Client Secret या AI API कुंजी नहीं।

SDK Webflow ईकॉमर्स को स्वतः नहीं पढ़ता है। आपके टेम्पलेट को SKU को प्रकट करना होगा, या एक ग्राहक एडैप्टर को इसे एक विश्वसनीय CMS फ़ील्ड से व्युत्पन्न करना होगा।

न्यूनतम SDK अनुबंध#

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

data-product-code को इम्पोर्ट किए गए ideal.house sku के बराबर होना चाहिए।

लोडर इंस्टॉल करें#

साइट सेटिंग्स → कस्टम कोड खोलें और फ़ुटर/बॉडी-अंत क्षेत्र में SDK स्क्रिप्ट टैग जोड़ें। प्लेसहोल्डर को बदलें, सहेजें, और प्रकाशित करें। इसे साइट स्तर पर एक बार इंस्टॉल करें; इसे हर CMS आइटम में दोहराएं नहीं।

Webflow का डिज़ाइनर कैनवास स्क्रिप्ट को चला नहीं सकता। एक प्रीव्यू या प्रकाशित स्टेजिंग URL पर सत्यापन करें और वास्तविक पेज स्रोत की जाँच करें।

एक आइटम-स्तर बटन जोड़ें#

उदाहरण के लिए, Idealhouse SKU नामक एक सादा-टेक्स्ट CMS फ़ील्ड बनाएं। इसे उसी मान से भरें जिसे ideal.house sku के रूप में आयात किया गया है। प्रोडक्ट या CMS कलेक्शन टेम्पलेट में, बटन के स्थान पर एक कोड एम्बेड जोड़ें:

html

<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

एम्बेड एडिटर में वर्तमान आइटम के मान को सम्मिलित करने के लिए Webflow का फ़ील्ड जोड़ें नियंत्रण का उपयोग करें; ऊपर वर्णित कोष्ठकबद्ध निर्देश साहित्यिक उत्पादन मार्कअप नहीं है। प्रकाशन के बाद, DOM का निरीक्षण करें और पुष्टि करें कि यह एक सामान्य स्ट्रिंग बन गया है जैसे:

html

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

एक स्थिर पेज के लिए, एक साहित्यिक SKU पेस्ट करें। पेज स्लग या Webflow आइटम आईडी का उपयोग न करें, जब तक कि वह सटीक मान आयातित ideal.house SKU न हो।

वेरिएंट्स और डायनामिक रेंडरिंग#

Webflow का मानक डिज़ाइनर बाइंडिंग हर ईकॉमर्स लेआउट में अंतिम वेरिएंट SKU को कभी-कभी कस्टम कोड के लिए प्रकट नहीं कर सकता है। यदि हर दृश्य विकल्प को एक अलग ideal.house संपत्ति की आवश्यकता है, तो एक ग्राहक एडैप्टर बनाएं जो एक समर्थित Webflow एकीकरण या आपके अपने डेटा लेयर से चयनित वेरिएंट प्राप्त करे, फिर कंटेनर को बदलें:

function showIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;
  const node = document.createElement('div');
  node.dataset.idealhouseButtonContainer = '';
  node.dataset.productCode = code;
  host.append(node);
}

यह कस्टमर कोड है। इसे उस वेरिएंट टूल के एक दस्तावेज़ीकृत कॉलबैक से कॉल करें जिसे आप वास्तव में उपयोग करते हैं। प्रदर्शित विकल्प टेक्स्ट को स्क्रैप न करें या एक गैर-आधिकारिक Webflow इवेंट का अनुमान न लगाएं।

Webflow इंटरैक्शन, CMS फ़िल्टर, तीसरे पक्ष की पेजिनेशन, और SPA-जैसे संक्रमण कलेक्शन आइटम जोड़ या बदल सकते हैं। एम्बेड को हर आइटम टेम्पलेट के भीतर शामिल करें, या टूल के दस्तावेजीकृत रेंडर कॉलबैक के बाद ब्रिज को कॉल करें। हमेशा एक नया कंटेनर बनाएं, संसाधित SDK मार्कअप को क्लोन करने के बजाय।

कैटलॉग डेटा इम्पोर्ट करें#

अपने Webflow प्रोडक्ट/CMS फ़ील्ड को निर्यात करें और Idealhouse SKU को sku के रूप में मैप करें। उत्पाद अपलोड के माध्यम से अपलोड करें और उत्पाद आयात करें, कार्य की स्थिति, उत्पादों की सूची देखें, उत्पाद अपडेट करें, उत्पाद हटाएँ, और त्रुटियाँ और पुनः प्रयास का पालन करें।

ब्राउज़र SDK द्वारा कोई स्वचालित Webflow सिंक प्रदान नहीं किया जाता है। कोई भी CMS API एक्सपोर्ट, वेबहुक, या ऑटोमेशन कस्टमर-स्वामित्व वाला है।

सत्यापित करें और हटाएं#

स्टेजिंग पर प्रकाशित करें और एक मैप किया गया आइटम, अनुपस्थित फ़ील्ड, अज्ञात SKU, कलेक्शन सूची, प्रोडक्ट टेम्पलेट, फ़िल्टर/पेजिनेशन, मोडल, मोबाइल ब्रेकपॉइंट, सहमति नियंत्रण, और ब्राउज़र बैक/फॉरवर्ड का परीक्षण करें। पुष्टि करें कि SDK एक बार लोड होता है, हर रेंडर किया गया कोड वर्तमान आइटम से मेल खाता है, और HTML में कोई सर्वर प्रमाणपत्र प्रकट नहीं होता।

हटाने के लिए, साइट-स्तर के SDK कस्टम कोड और हर एम्बेड/बटन बाइंडिंग को हटाएं, पुनः प्रकाशित करें, और किसी भी प्रॉक्सी/CDN कैश को साफ़ करें। पुष्टि करें कि स्क्रिप्ट अनुरोध और data-idealhouse-* तत्व प्रकाशित साइट से गायब हो गए हैं।

Webflow एकीकरण#

पूर्वशर्तें और सीमाएँ#

न्यूनतम SDK अनुबंध#

लोडर इंस्टॉल करें#

एक आइटम-स्तर बटन जोड़ें#

वेरिएंट्स और डायनामिक रेंडरिंग#

कैटलॉग डेटा इम्पोर्ट करें#

सत्यापित करें और हटाएं#

आधिकारिक प्लेटफ़ॉर्म संदर्भ#