एम्बेड
एम्बेड आपको SupDesk का फ़ॉर्म सीधे अपनी वेबसाइट पर लगाने देते हैं। आगंतुक आपकी वेटलिस्ट में शामिल होते हैं, आपको संदेश भेजते हैं, या बीटा के लिए साइन अप करते हैं — बिना आपकी साइट छोड़े।
फ़ॉर्म के बजाय चैट बबल चाहिए? लाइव चैट का अपना लोडर (
chat.js) और अपना स्निपेट है — देखें लाइव चैट।
तीन फ़ॉर्म एम्बेड किए जा सकते हैं:
| फ़ॉर्म | यह क्या करता है | आवश्यकता |
|---|---|---|
waitlist | वेटलिस्ट साइनअप इकट्ठा करता है | वेटलिस्ट सक्षम |
contact | आपके प्रोजेक्ट के इनबॉक्स में बातचीत खोलता है | निजी संदेश Pro |
beta | एक बीटा प्रोग्राम के लिए सार्वजनिक साइन-अप | बीटा सक्षम, प्रोग्राम सक्रिय और सार्वजनिक साइन-अप चालू |
एम्बेड जोड़ना
हर फ़ॉर्म का स्निपेट कंसोल में आपके लिए तैयार किया जाता है — उसे कॉपी करें और अपने पृष्ठ पर वहाँ चिपकाएँ जहाँ आप फ़ॉर्म दिखाना चाहते हैं:
- वेटलिस्ट — प्रोजेक्ट का वेटलिस्ट अनुभाग, सेटिंग्स कार्ड के नीचे
- संपर्क — प्रोजेक्ट का सेटिंग्स पृष्ठ, संपर्क फ़ॉर्म एम्बेड के अंतर्गत
- बीटा — बीटा प्रोग्राम का पृष्ठ, एम्बेड के अंतर्गत
स्निपेट कुछ ऐसा दिखता है:
<script src="https://acme.supdesk.app/embed.js"
data-supdesk="contact"
data-title="Contact Acme" data-height="520" async></script>
<noscript>
<iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
style="border:0" title="Contact Acme"></iframe>
</noscript>स्क्रिप्ट फ़ॉर्म को वहीं डालती है जहाँ टैग है और फ़ॉर्म की ऊँचाई बदलने पर उसका आकार बदल देती
है — उदाहरण के लिए जब सत्यापन त्रुटियाँ दिखें, या जब सबमिशन के बाद वह छोटी पुष्टि में सिमट
जाए। <noscript> ब्लॉक एक सादा iframe है, इसलिए JavaScript बंद होने पर भी आगंतुकों के लिए
फ़ॉर्म काम करता रहता है।
सब कुछ आपके अपने पोर्टल डोमेन से परोसा जाता है। यदि आपके पास
कस्टम डोमेन है तो कंसोल आपको उसी डोमेन पर स्निपेट देता
है; अन्यथा वे आपके *.supdesk.app सबडोमेन का उपयोग करते हैं।
कस्टम डोमेन और रूट डोमेन
एम्बेड के फ़्रेम को लोडर से बात करने के लिए आपका कस्टम डोमेन और आपका स्निपेट जिस मूल की ओर इंगित करता है, दोनों का एक ही रूट डोमेन होना चाहिए। कंसोल हमेशा आपके सक्रिय पोर्टल मूल के साथ स्निपेट बनाता है, इसलिए कस्टम डोमेन सेट होने के बाद कॉपी किए गए स्निपेट के बारे में यहाँ सोचने की ज़रूरत नहीं: स्क्रिप्ट और फ़ॉर्म दोनों आपके कस्टम डोमेन से, एक ही मूल से परोसे जाते हैं।
ध्यान देने वाली स्थिति वह स्निपेट है जो आपने कस्टम डोमेन जोड़ने से पहले कॉपी किया था।
आपके पुराने मूल के अनुरोध कस्टम डोमेन पर रीडायरेक्ट होते हैं, और लोडर उस रीडायरेक्ट को तभी
स्वीकार करता है जब दोनों का रूट डोमेन एक हो — उदाहरण के लिए feedback.apibot.dev का
पोर्टल सबडोमेन और www.apibot.dev का कस्टम डोमेन दोनों apibot.dev पर रहते हैं। यदि
आपका कस्टम डोमेन बिल्कुल अलग रूट पर है, तो रीडायरेक्ट क्रॉस-डोमेन है और एम्बेड काम नहीं
करेगा: कस्टम डोमेन सक्रिय होने के बाद कंसोल से स्निपेट फिर से कॉपी करें।
विशेषताएँ
| विशेषता | आवश्यक | विवरण |
|---|---|---|
data-supdesk | हाँ | कौन-सा फ़ॉर्म एम्बेड करना है: waitlist, contact या beta |
data-program | केवल बीटा | बीटा प्रोग्राम का slug |
data-title | नहीं | फ़्रेम के लिए सुलभ शीर्षक। डिफ़ॉल्ट SupDesk form |
data-height | नहीं | पहले आकार-परिवर्तन से पहले पिक्सेल में प्रारंभिक ऊँचाई। डिफ़ॉल्ट 360 |
data-ref | नहीं | वेटलिस्ट रेफ़रल कोड जिसे साइनअप का श्रेय देना है |
आप एक पृष्ठ पर एक से अधिक एम्बेड रख सकते हैं — हर एक को अपना <script> टैग दें।
कंटेंट सिक्योरिटी पॉलिसी
यदि आपकी साइट Content-Security-Policy हेडर भेजती है, तो दो निर्देशों में अपने पोर्टल मूल
की अनुमति दें, वरना ब्राउज़र एम्बेड को ब्लॉक कर देगा:
script-src https://acme.supdesk.app;
frame-src https://acme.supdesk.app;यदि आपके स्निपेट कस्टम डोमेन का उपयोग करते हैं तो यहाँ वही डोमेन लिखें। और कुछ अनुमत करने की आवश्यकता नहीं — एम्बेड आपके पृष्ठ में कोई तृतीय-पक्ष स्क्रिप्ट लोड नहीं करता और अपनी कोई नेटवर्क कॉल नहीं करता।
स्पैम सुरक्षा
एम्बेड किए गए फ़ॉर्म आपके पोर्टल जैसी ही सुरक्षा का उपयोग करते हैं: वे प्रति आगंतुक और प्रति प्रोजेक्ट दर-सीमित हैं, और यदि आपने प्रोजेक्ट के लिए Turnstile कॉन्फ़िगर किया है, तो चुनौती एम्बेड के अंदर भी दिखती है।
चूँकि आपकी Turnstile कुंजी आपके अपने डोमेन के लिए पंजीकृत है, और एम्बेड उसी डोमेन से परोसे जाते हैं, आपकी कुंजी बिना किसी अतिरिक्त सेटअप के एम्बेड में काम करती है।
गोपनीयता और साइन-इन
एम्बेड किए गए फ़ॉर्म कभी पोर्टल साइन-इन सत्र नहीं पढ़ते या लिखते — ब्राउज़र वे कुकीज़ किसी और के पृष्ठ पर मौजूद फ़्रेम को नहीं भेजते, यह डिज़ाइन का हिस्सा है। इसके बजाय हर एम्बेड ईमेल-पहले है: आगंतुक एक ईमेल पता सबमिट करता है और ईमेल से एक लिंक प्राप्त करता है।
एम्बेड लगाते समय जानने योग्य एक परिणाम: आगंतुक प्रवाह एक सामान्य ब्राउज़र टैब में पूरा करता है, आपके पृष्ठ के भीतर नहीं।
- वेटलिस्ट — साइनअप तुरंत दर्ज हो जाता है; ईमेल में उनकी स्थिति और व्यक्तिगत रेफ़रल लिंक होता है
- बीटा — ईमेल में वह स्वीकृति लिंक होता है जो उन्हें नामांकित करता है
- संपर्क — संदेश तुरंत आपके इनबॉक्स में पहुँचता है; ईमेल उनकी रसीद है और उन्हें आपके उत्तर देखने देता है
एम्बेड के माध्यम से बनी वेटलिस्ट प्रविष्टियाँ embed स्रोत के साथ दर्ज होती हैं, ताकि आप
उन्हें प्रविष्टि तालिका और CSV निर्यात में पोर्टल साइनअप से अलग पहचान सकें।
आगंतुक क्या देखते हैं
एम्बेड केवल फ़ॉर्म ही दिखाता है — कोई पोर्टल हेडर, फ़ुटर या नेविगेशन नहीं। यह आपके प्रोजेक्ट का ब्रांड रंग अपना लेता है, इसलिए आपकी ओर से बिना किसी स्टाइलिंग काम के यह आपका एक्सेंट विरासत में पा लेता है।
एम्बेड किए गए पृष्ठ सर्च इंजन द्वारा अनुक्रमित नहीं होते; आपके सार्वजनिक पोर्टल पृष्ठ ही प्रामाणिक, अनुक्रमणीय संस्करण हैं।
पुराना वेटलिस्ट स्निपेट
स्क्रिप्ट लोडर आने से पहले, वेटलिस्ट एम्बेड /waitlist/embed की ओर इंगित करने वाला एक
सादा iframe था:
<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
style="border:0" title="Waitlist"></iframe>यह काम करता रहता है — आपको कुछ भी बदलने की ज़रूरत नहीं। इसे वर्तमान स्निपेट से बदलने पर
आपको स्वचालित आकार-परिवर्तन मिलता है; पुराने iframe की निश्चित height ही एकमात्र वास्तविक
कमी है।