# किसी भी वेबसाइट पर Shoprocket एम्बेड करें

> अपनी मौजूदा वेबसाइट से बेचें। एम्बेड में एक एम्बेड बनाएँ, कोड पाएँ पर क्लिक करें, और उसे WordPress, Squarespace, Wix, Webflow या सादे HTML पर अपने पेज में पेस्ट करें। बाद में सेव किए गए बदलाव बिना दोबारा पेस्ट किए हर पेज पर पहुँच जाते हैं।

हेल्प सेंटर / एम्बेडिंग - अपडेट किया गया: 28 अक्टूबर 2026

एम्बेड आपकी शॉप का एक हिस्सा किसी भी वेबसाइट पर लगा देता है: बाय बटन वाला एक प्रोडक्ट, पूरा प्रोडक्ट कैटलॉग, आपकी श्रेणियाँ, या एक सर्च बॉक्स। आप इसे **एम्बेड** में बनाते हैं, **कोड पाएँ** पर क्लिक करते हैं, और कोड को अपने पेज में पेस्ट कर देते हैं। कार्ट और चेकआउट आपके पेज पर ही खुलते हैं, इसलिए ग्राहक आपकी साइट कभी नहीं छोड़ते।

आपको कोड सिर्फ़ एक बार पेस्ट करना होता है। जब आप बाद में किसी एम्बेड को बदलते हैं, किसी दूसरे लेआउट में बदलने पर भी, तो सेव करते ही जिन भी पेजों पर वह है, वे सब अपडेट हो जाते हैं।

## शुरू करने से पहले

- कम से कम एक सक्रिय प्रोडक्ट जोड़ें। एक प्रोडक्ट के एम्बेड के लिए बेचने को एक प्रोडक्ट चाहिए।
- आपको अपनी वेबसाइट एडिट करने और किसी पेज में कोड या HTML ब्लॉक जोड़ने में सक्षम होना चाहिए। हर साइट बिल्डर के नोट नीचे हैं।

## चरण 1 (वैकल्पिक, सुझाया गया): अपनी साइट के हर पेज पर Shoprocket जोड़ें

**एम्बेड** के ऊपर **अपनी साइट के हर पेज पर Shoprocket जोड़ें** नाम का एक कार्ड है। उसमें आपकी साइट के हेडर के लिए कोड की एक लाइन है। इसके लगे होने पर, आपका फ़्लोटिंग कार्ट और लाइव चैट आपकी साइट के हर पेज पर काम करते हैं, सिर्फ़ उन पेजों पर नहीं जिन पर कोई एम्बेड है, और बाद में आप जो भी एम्बेड जोड़ें वह सीधे काम करता है।

1. अपने डैशबोर्ड में **एम्बेड** पर जाएँ।
2. **अपनी साइट के हर पेज पर Shoprocket जोड़ें** कार्ड पर **कॉपी करें** पर क्लिक करें।
3. कोड के नीचे के टैब (**HTML**, **WordPress**, **Squarespace**, **Wix** या **Webflow**) में से अपना साइट बिल्डर चुनें और उसके दो चरणों का पालन करके वह लाइन अपनी साइट के हेडर में पेस्ट करें।
4. अपनी साइट का कोई भी पेज खोलें। कार्ड की स्थिति **अभी तक नहीं दिखा** से **कनेक्टेड** में बदल जाती है।

आप यह चरण छोड़ सकते हैं। हर एम्बेड के कोड में यही लाइन शामिल है, इसलिए एम्बेड किसी भी पेज पर अपने आप काम करता है।

## चरण 2: एक एम्बेड बनाएँ

1. **एम्बेड** में **नया एम्बेड** पर क्लिक करें।
2. **यह क्या दिखाता है** के तहत एक चुनें: **एक प्रोडक्ट**, **प्रोडक्ट कैटलॉग**, **श्रेणियाँ** या **सर्च**।
3. एक लेआउट चुनें:
   - **एक प्रोडक्ट**: **बटन**, **कॉम्पैक्ट**, **कार्ड**, **फ़ीचर** या **पूरा विवरण**। फिर **कौन-सा प्रोडक्ट?** के तहत प्रोडक्ट चुनें।
   - **प्रोडक्ट कैटलॉग**: **ग्रिड**, **कैरोसेल** या **सूची**। **कौन-से प्रोडक्ट?** के तहत **सभी प्रोडक्ट**, **एक श्रेणी** या **चुनकर रखे गए** में से चुनें।
   - **श्रेणियाँ**: **टाइल**।
   - **सर्च**: **सर्च बॉक्स** या **सर्च आइकन**।
4. **आगे बढ़ें** पर क्लिक करें।

हर लेआउट अलग सेटिंग्स वाला वही एक एम्बेड है, इसलिए आप बाद में एडिटर में लेआउट बदल सकते हैं और आपका पेस्ट किया हुआ कोड वही रहता है।

![नया एम्बेड स्क्रीन जिसमें प्रोडक्ट कैटलॉग चुना गया है और चुनने के लिए ग्रिड, कैरोसेल और सूची लेआउट हैं](https://v3.shoprocket.io/img/help/embed-on-any-website/new-embed-chooser.webp)

## चरण 3: इसे अपने हिसाब से बदलें

एडिटर एक लाइव प्रीव्यू दिखाता है जिसमें आप खरीदार की तरह क्लिक कर सकते हैं: कार्ट में जोड़ना, प्रोडक्ट खोलना और चेकआउट करना। एम्बेड क्या दिखाए, यह **यह एम्बेड** टैब में बदलें। **स्टोर डिज़ाइन** टैब आपके पूरे स्टोर के रंग और फ़ॉन्ट तय करता है, ताकि आपके सभी एम्बेड और आपका फ़्लोटिंग कार्ट एक जैसे दिखें।

एम्बेड को शुरू में एक नाम मिलता है, जैसे “Products · Grid”। आप उसे कभी भी बदल सकते हैं।

जब आप संतुष्ट हों, तो **सेव करें और कोड पाएँ** पर क्लिक करें।

## चरण 4: कोड कॉपी करें और अपनी साइट में पेस्ट करें

सेव करने के बाद **कोड पाएँ** पैनल खुलता है। यह ऐसा दिखता है:

```html
<!-- Shoprocket: Product catalog -->
<script src="https://.../loader.js" data-pk="pk_..."></script>
<div data-shoprocket="embed" data-embed-id="emb_..."></div>
```

अपना कोड हमेशा बटन से कॉपी करें, उसे कभी दोबारा टाइप न करें। पहली लाइन एम्बेड का नाम बताती है, स्क्रिप्ट आपके स्टोर के लिए Shoprocket को लोड करती है, और आख़िरी लाइन वह जगह है जहाँ एम्बेड दिखता है।

![कोड पाएँ पैनल जिसमें साइट बिल्डर टैब, एम्बेड कोड और कोड कॉपी करें बटन है](https://v3.shoprocket.io/img/help/embed-on-any-website/get-code.webp)

1. **कोड कॉपी करें** पर क्लिक करें।
2. पैनल के टैब में से अपना साइट बिल्डर चुनें और कोड वहाँ पेस्ट करें जहाँ एम्बेड दिखना चाहिए:
   - **HTML**: कोड को वहाँ पेस्ट करें जहाँ एम्बेड दिखना चाहिए। स्क्रिप्ट वाली लाइन पेज पर सिर्फ़ एक बार चाहिए, चाहे उसमें कितने भी एम्बेड हों।
   - **WordPress**: ब्लॉक एडिटर में, जहाँ एम्बेड रखना है वहाँ **कस्टम HTML** ब्लॉक जोड़ें। कोड पेस्ट करें और पेज अपडेट करें। WordPress.com पर स्क्रिप्ट के लिए ऐसा प्लान चाहिए जो प्लगइन की अनुमति देता हो।
   - **Squarespace**: पेज को एडिट करें और जहाँ एम्बेड रखना है वहाँ **कोड** ब्लॉक जोड़ें। कोड पेस्ट करें, डिस्प्ले को HTML पर रहने दें, और सेव करें।
   - **Wix**: एडिटर में **जोड़ें** चुनें, फिर **एम्बेड कोड**, फिर **HTML एम्बेड करें**। कोड को बॉक्स में पेस्ट करें और उसे ज़रूरत के मुताबिक़ रीसाइज़ करें। Wix इसे फ़्रेम में दिखाता है, इसलिए कार्ट के लिए जगह दें।
   - **Webflow**: जहाँ एम्बेड रखना है वहाँ **Code Embed** एलिमेंट खींचकर लाएँ। कोड पेस्ट करें, सेव करें और साइट पब्लिश करें।

अगर आपने चरण 1 में अपनी साइट के हेडर में Shoprocket पहले ही जोड़ दिया है, तो पेज को कोड की सिर्फ़ आख़िरी लाइन चाहिए, वह जो `<div` से शुरू होती है।

बाद में कोड फिर से पाने के लिए, **एम्बेड** से एम्बेड खोलें और **कोड पाएँ** पर क्लिक करें।

**वेबसाइट नहीं है?** बिना विकल्पों वाले एक प्रोडक्ट के लिए, **कोड पाएँ** पैनल **वेबसाइट नहीं है? बाय लिंक शेयर करें** भी देता है। **लिंक कॉपी करें** पर क्लिक करें और उसे कहीं भी शेयर करें: वह उस प्रोडक्ट के साथ चेकआउट खोलता है। विकल्पों वाले प्रोडक्ट का लिंक उसके अपने प्रोडक्ट पेज पर बनता है, जहाँ आप चुनते हैं कि कौन-सा विकल्प।

**मेन्यू में सर्च जोड़ना।** **सर्च** एम्बेड के लिए, पैनल एक लिंक `#!/search` भी देता है, जिसे आप अपनी साइट पर “सर्च” नाम के मेन्यू आइटम के रूप में जोड़ सकते हैं। यह Shoprocket एम्बेड वाले किसी भी पेज पर वही सर्च खोलता है, बिना किसी कोड के।

## फ़्लोटिंग कार्ट

आपके स्टोर में एक फ़्लोटिंग कार्ट होता है। यह वह बटन है जिस पर ग्राहक अपना कार्ट खोलने और चेकआउट करने के लिए क्लिक करते हैं, और यह हर उस पेज पर दिखता है जिस पर आपका Shoprocket कोड चलता है। **एम्बेड** में यह पहली पंक्ति है, **फ़्लोटिंग कार्ट**, जिस पर **हमेशा चालू** लिखा होता है।

इसका रूप बदलने के लिए **फ़्लोटिंग कार्ट** पर क्लिक करें। आप पेज के किनारे पर इसकी **स्थिति**, किनारे और ऊपर या नीचे से इसकी **दूरी**, यह क्या **दिखाता है**, इसका **आकार**, **साइज़** और **आइकन** (या अपनी तस्वीर), और **साइन-इन** लिंक दिखे या नहीं, तय कर सकते हैं। **सेव करें** पर क्लिक करें। इसके रंग और फ़ॉन्ट आपके स्टोर डिज़ाइन से आते हैं।

## एम्बेड को बदलना या हटाना

- **बदलें**: **एम्बेड** से एम्बेड खोलें, बदलाव करें और **सेव करें** पर क्लिक करें। उसे दिखाने वाला हर पेज अपडेट हो जाता है। नए कोड की ज़रूरत नहीं।
- **किसी पेज से हटाएँ**: अपनी वेबसाइट पर उस पेज से कोड मिटा दें।
- **इसे हटा दें**: **एम्बेड** में, उसकी पंक्ति के डिलीट बटन का इस्तेमाल करें और पुष्टि करें। उसका कोड अपने पेजों से भी हटा दें।

## डेवलपर के लिए

डेवलपर गाइड कोड के हर विकल्प, डैशबोर्ड के बिना एम्बेड दिखाने, और विजेट के JavaScript को कवर करती है: [विजेट एम्बेड करें](https://v3.shoprocket.io/docs/embedding.md)।

## संबंधित लेख

- [Shoprocket क्या है?](https://v3.shoprocket.io/hi/help/what-is-shoprocket.md)
- [अपना Stripe अकाउंट कनेक्ट करें](https://v3.shoprocket.io/hi/help/connect-stripe.md)
- [आपकी होस्टेड शॉप](https://v3.shoprocket.io/hi/help/your-hosted-shop.md)

[अपने डैशबोर्ड में “एम्बेड” खोलें](https://app-v3.shoprocket.io/go/embeds)

---

- HTML version: https://v3.shoprocket.io/hi/help/embed-on-any-website
- Language: हिन्दी (hi)
- Also in: [العربية](https://v3.shoprocket.io/ar/help/embed-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/hilfe/auf-jeder-website-einbetten.md), [Ελληνικά](https://v3.shoprocket.io/el/help/embed-on-any-website.md), [English](https://v3.shoprocket.io/help/embed-on-any-website.md), [Español](https://v3.shoprocket.io/es/ayuda/integrar-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/aide/integrer-shoprocket-sur-un-site.md), [עברית](https://v3.shoprocket.io/he/help/embed-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/bantuan/sematkan-di-situs-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/aiuto/incorpora-shoprocket-su-qualsiasi-sito.md), [日本語](https://v3.shoprocket.io/ja/help/embed-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/pagalba/iterpkite-shoprocket-i-bet-kuria-svetaine.md), [Norsk](https://v3.shoprocket.io/nb/hjelp/bygg-inn-shoprocket-pa-et-hvilket-som-helst-nettsted.md), [Nederlands](https://v3.shoprocket.io/nl/hulp/shoprocket-op-elke-website-insluiten.md), [Polski](https://v3.shoprocket.io/pl/pomoc/osadz-shoprocket-na-dowolnej-stronie.md), [Português](https://v3.shoprocket.io/pt/ajuda/embed-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/ajutor/incorporeaza-shoprocket-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/help/embed-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/help/embed-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/yardim/web-sitesine-gomme.md), [中文](https://v3.shoprocket.io/zh/help/embed-on-any-website.md)