Framer साइटों में लाइव कमेंटिंग जोड़ें

FastComments के साथ हम Framer से बनी किसी भी साइट में आसानी से लाइव कमेंटिंग जोड़ सकते हैं।

इस ट्यूटोरियल में हम केवल लाइव कमेंटिंग विजेट इंस्टॉल करना ही कवर करेंगे। यदि आपको अन्य विजेट इंस्टॉल करने, या SSO सेट अप करने में सहायता चाहिए, तो बेझिझक एक सपोर्ट टिकट बनाएं।

चरण 1: एडिटर खोलें

सबसे पहले, अपनी साइट के लिए एडिटर खोलें।

इस उदाहरण में हम अपने ब्लॉग पेजों में FastComments जोड़ेंगे, लेकिन किसी भी प्रकार का पेज काम कर सकता है।

एडिटर खोलें

चरण 2: एम्बेड ब्लॉक जोड़ें

अब, एक Embed ब्लॉक जोड़ते हैं।

ऊपर बाईं ओर Insert पर जाएं:

Insert पर क्लिक करें

फिर बाईं साइडबार को नीचे स्क्रॉल करें और Utility पर माउस ले जाएं।

इसके बाद आपको Embed ब्लॉक को क्लिक और ड्रैग करके अपने ब्लॉग के अंत में रखना होगा।

यह महत्वपूर्ण है कि आप जैसा दिखाया गया है वैसा क्लिक और ड्रैग करें, केवल क्लिक न करें। यदि आप केवल क्लिक करते हैं, तो Framer इसे आपके ब्लॉग के बाहर डाल देगा और आपको बाद में इसे खींचना पड़ेगा।

Embed विजेट खोजें

Embed विजेट को ड्रैग और ड्रॉप करें

अब आपके पास एक खाली Embed विजेट होगा, और जब आप इसे चुनेंगे तो दाईं ओर एक साइडबार मिलेगी। आप साइडबार का विस्तार कर सकते हैं, और आपको कुछ ऐसा दिखाई देगा:

Embed सेटिंग्स खोलें

अब Embed विजेट के प्रकार को HTML में बदलें:

HTML विजेट के रूप में सेट करें

अब आप अगले चरण में FastComments Framer कोड स्निपेट के लिए तैयार हैं।

चरण 3: Framer-विशिष्ट FastComments कोड कॉपी और पेस्ट करें

Framer Live Comments FastComments स्निपेट नीचे दिया गया है।

FastComments Framer-विशिष्ट कमेंट्स स्निपेट

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // some providers change the code snippet to be async
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

या, वैकल्पिक रूप से, आप Streaming Chat विजेट का उपयोग कर सकते हैं। Framer Streaming Chat FastComments स्निपेट इस प्रकार है:

FastComments Framer-विशिष्ट Streaming Chat स्निपेट

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // some providers change the code snippet to be async
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

FastComments Framer एडिटर को सपोर्ट करता है, इसलिए कोड पेस्ट करने के बाद आपको कुछ ऐसा दिखाई देगा (आपको Publish पर क्लिक करना पड़ सकता है):

Comment Widget Preview

अब जब आप अपनी साइट देखेंगे तो आपको कमेंट एरिया दिखाई देगा! Framer के साइडबार में आप चाहें तो विजेट को फुल विड्थ भी सेट कर सकते हैं।

ध्यान दें कि Framer विजेट की ऊँचाई सीमित करता है और ऑटो-रिसाइज़िंग को सपोर्ट नहीं करता, इसलिए हमने यहाँ Live Chat विजेट चुना है क्योंकि यह निश्चित ऊँचाई का होता है।

चरण 4: विजेट और पेज की ऊंचाई समायोजित करें

हम विजेट की पोज़िशनिंग को दो चीज़ें करके बेहतर बना सकते हैं।

सबसे पहले, बाएँ पैन में, विजेट की ऊँचाई fill और 1fr पर सेट करें:

Comment Widget Height

अगला, हमें Framer के डिफ़ॉल्ट पेज कॉन्फ़िग को ठीक करना होगा। डिफ़ॉल्ट रूप से यह पेज की ऊँचाई को एक निश्चित आकार पर सेट करता है, जिससे कमेंट थ्रेड्स कट सकते हैं। तो आइए इसे भी fill पर सेट करें।

Set Page Height

आपको पेज की ऊँचाई को अपनी इच्छा अनुसार समायोजित करने के लिए थोड़ा प्रयोग करना पड़ सकता है।

डोमेन त्रुटियाँ

आपको अधिकृति (authorization) संबंधी त्रुटि मिल सकती है, जैसे कि निम्नलिखित:

Domain Configuration Missing

ऐसा इसलिए है क्योंकि FastComments को नहीं पता है कि इस डोमेन पर आपके खाते के उपयोग की अनुमति दी जानी चाहिए।

इस स्थिति में, समाधान बहुत आसान है। आपको बस अपनी साइट को अपने FastComments.com खाते में जोड़ना होगा।

अपनी साइट को अपने खाते में जोड़ने के लिए यहाँ जाएँ।

अनुकूलन

FastComments को आपकी साइट से मेल खाने के लिए अनुकूलित (customize) करने के लिए डिज़ाइन किया गया है।

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

अपनी Framer साइट में पोल जोड़ें

FastComments के आपकी Framer साइट पर होने के बाद, आप कमेंट्स में ही लाइव पोल भी चला सकते हैं। अपनी विजेट कस्टमाइज़ेशन सेटिंग्स में Enable Polls चालू करें और कमेंट टूलबार में एक पोल बटन दिखाई देता है। पोल में 2 से 10 विकल्प हो सकते हैं, परिणाम पेज पर मौजूद सभी के लिए लाइव अपडेट होते हैं, और आप तय करते हैं कि कौन पोल बना सकता है और क्या वोट करने के लिए लॉग इन ज़रूरी है। Framer पर कुछ और इंस्टॉल करने की ज़रूरत नहीं है।

Live Polls डेमो आज़माएँ या उन्हें सेट अप करने के लिए Polls दस्तावेज़ीकरण पढ़ें।

भाषा 🇮🇳 हिन्दी

Framer इंस्टॉलेशन

पोल