कोलैब चैट

बेसिक उदाहरण

Collab Chat का उपयोग करने का सबसे सरल तरीका एक सिंगल कंटेंट कंटेनर को टारगेट करना है। यह उदाहरण दिखाता है कि एक आर्टिकल पर टेक्स्ट एनोटेशन कैसे सक्षम करें:

बेसिक Collab Chat उदाहरण

Copy Run

1

2<!DOCTYPE html>

3<html>

4<head>

5 <title>My Article with Collab Chat</title>

6</head>

7<body>

8 <div id="article-content" style="min-height: 500px">

9 <h1>My Article Title</h1>

10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>

11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>

12 </div>

13

14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

15 <script>

16 FastCommentsCollabChat(document.getElementById('article-content'), {

17 tenantId: 'demo'

18 });

19 </script>

20</body>

21</html>

22

कस्टम URL ID के साथ उदाहरण (प्रति बुक पेज, आर्टिकल, आदि)

डिफ़ॉल्ट रूप से, Collab Chat बातचीत की पहचान करने के लिए पेज URL को एलिमेंट पाथ और टेक्स्ट रेंज के साथ जोड़ता है। आप बातचीत को ग्रुप करने के तरीके पर अधिक नियंत्रण पाने के लिए एक कस्टम urlId प्रदान कर सकते हैं:

कस्टम URL ID के साथ Collab Chat

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

3<script>

4 FastCommentsCollabChat(document.getElementById('article-content'), {

5 tenantId: 'demo',

6 urlId: 'book-one-page-2'

7 });

8</script>

9

यह तब उपयोगी है जब आपकी URL संरचना बदल जाती है लेकिन आप उन्हीं बातचीत को बनाए रखना चाहते हैं, या जब आप एक ही बातचीत के एनोटेशन को कई पेजों पर साझा करना चाहते हैं।

डार्क मोड के साथ उदाहरण

यदि आपकी साइट का बैकग्राउंड डार्क है, तो यह सुनिश्चित करने के लिए डार्क मोड सपोर्ट सक्षम करें कि चैट UI सही दिखे:

डार्क मोड के साथ Collab Chat

Copy Run

1

2<!DOCTYPE html>

3<html>

4<head>

5 <title>My Article with Collab Chat - Dark Mode</title>

6 <style>

7 body {

8 background-color: #1a1a1a !important;

9 color: #e0e0e0 !important;

10 font-family: system-ui, -apple-system, sans-serif;

11 padding: 20px;

12 margin: 0;

13 }

14 #article-content {

15 max-width: 800px;

16 margin: 0 auto;

17 background-color: #2d2d2d;

18 padding: 20px;

19 border-radius: 8px;

20 }

21 h1 {

22 color: #ffffff !important;

23 }

24 p {

25 color: #e0e0e0 !important;

26 line-height: 1.6;

27 }

28 .fastcomments-collab-chat-top-bar {

29 background-color: #2d2d2d !important;

30 color: #e0e0e0 !important;

31 border-bottom: 1px solid #444 !important;

32 }

33 </style>

34</head>

35<body>

36 <div id="article-content" style="min-height: 500px">

37 <h1>My Article Title</h1>

38 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>

39 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>

40 </div>

41

42 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

43 <script>

44 FastCommentsCollabChat(document.getElementById('article-content'), {

45 tenantId: 'demo',

46 hasDarkBackground: true

47 });

48 </script>

49</body>

50</html>

51

टॉप बार अक्षम के साथ उदाहरण

डिफ़ॉल्ट रूप से, Collab Chat यूज़र संख्या और चर्चा संख्या के साथ एक टॉप बार दिखाता है। आप इसे अक्षम कर सकते हैं:

टॉप बार अक्षम के साथ Collab Chat

Copy Run

1

2<!DOCTYPE html>

3<html>

4<head>

5 <title>My Article with Collab Chat - No Top Bar</title>

6</head>

7<body>

8 <div id="article-content" style="min-height: 500px">

9 <h1>My Article Title</h1>

10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>

11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>

12 </div>

13

14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

15 <script>

16 FastCommentsCollabChat(document.getElementById('article-content'), {

17 tenantId: 'demo',

18 topBarTarget: null

19 });

20 </script>

21</body>

22</html>

23

कमेंट काउंट कॉलबैक के साथ उदाहरण

आप commentCountUpdated कॉलबैक का उपयोग करके ट्रैक कर सकते हैं कि कमेंट कब जोड़े या अपडेट किए जाते हैं:

कमेंट काउंट कॉलबैक के साथ Collab Chat

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

3<script>

4 FastCommentsCollabChat(document.getElementById('article-content'), {

5 tenantId: 'demo',

6 commentCountUpdated: function(count) {

7 console.log('Total comments:', count);

8 document.getElementById('comment-badge').textContent = count;

9 }

10 });

11</script>

12

एकाधिक सेक्शन के साथ उदाहरण

आप अपने पेज के कई अलग-अलग सेक्शन पर Collab Chat इनिशियलाइज़ कर सकते हैं। प्रत्येक सेक्शन के अपने स्वतंत्र एनोटेशन होंगे:

एकाधिक सेक्शन पर Collab Chat

Copy

1

2<div id="intro-section">

3 <h2>Introduction</h2>

4 <p>Content for the introduction...</p>

5</div>

6

7<div id="main-section">

8 <h2>Main Content</h2>

9 <p>Content for the main article...</p>

10</div>

11

12<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

13<script>

14 // इंट्रो सेक्शन पर इनिशियलाइज़ करें

15 FastCommentsCollabChat(document.getElementById('intro-section'), {

16 tenantId: 'demo',

17 urlId: 'my-article-intro'

18 });

19

20 // मुख्य सेक्शन पर इनिशियलाइज़ करें

21 FastCommentsCollabChat(document.getElementById('main-section'), {

22 tenantId: 'demo',

23 urlId: 'my-article-main'

24 });

25</script>

26

आप चाहें तो Collab Chat को प्रति पेज इनिशियलाइज़ कर सकते हैं और प्रत्येक पेज के लिए अलग थ्रेड रख सकते हैं — बस urlId पैरामीटर को book-one-page1 जैसा कोई मान दें। यह कॉन्फ़िगरेशन सामान्य कमेंटिंग विजेट के लिए भी काम करता है।

टेक्स्ट चयन कैसे काम करता है

जब उपयोगकर्ता Collab Chat कंटेनर के भीतर टेक्स्ट चुनते हैं, तो विजेट उस चयन को कैप्चर करता है और उन्हें चर्चा शुरू करने की अनुमति देता है। चयन एक शब्द जितना छोटा या विभिन्न तत्वों में फैले कई पैराग्राफ जितना बड़ा हो सकता है।

चयन में देरी

डेस्कटॉप डिवाइस पर, उपयोगकर्ता द्वारा टेक्स्ट चुनने और चर्चा प्रॉम्प्ट दिखाई देने के बीच 3.5 सेकंड का विलंब होता है। यह उपयोगकर्ताओं द्वारा केवल कॉपी या पढ़ने के लिए टेक्स्ट हाइलाइट करते समय UI के टिमटिमाने से रोकता है। मोबाइल डिवाइस पर, प्रॉम्प्ट तुरंत दिखाई देता है क्योंकि टच स्क्रीन पर टेक्स्ट चयन अधिक जानबूझकर किया जाता है।

अद्वितीय बातचीत IDs

प्रत्येक बातचीत को एक अद्वितीय urlId मिलता है जो पेज URL, DOM तत्व पथ, और क्रमबद्ध टेक्स्ट रेंज को जोड़ता है। यह सुनिश्चित करता है कि प्रत्येक टेक्स्ट चयन एक अलग बातचीत बनाता है जिसे बाद में फिर से खोजा जा सकता है।

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

विज़ुअल हाइलाइट्स

जब किसी विशेष टेक्स्ट चयन के लिए एक बातचीत मौजूद होती है, तो उस टेक्स्ट को एक विज़ुअल हाइलाइट मिलता है। हाइलाइट को बैकग्राउंड रंगों का उपयोग करके लागू किया जाता है और यह होवर पर या संबंधित चैट विंडो खुलने पर दिखाई देता है।

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

चैट विंडो पोज़िशनिंग

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

पोज़िशनिंग सिस्टम to-right, to-left, to-top, और to-bottom जैसी CSS क्लासेस का उपयोग करता है यह इंगित करने के लिए कि चैट विंडो हाइलाइट से किस दिशा में विस्तारित होनी चाहिए। मोबाइल डिवाइस पर (768px से कम चौड़ी स्क्रीन), बेहतर उपयोगिता के लिए चैट विंडो हमेशा फुलस्क्रीन दिखाई देती है।

चैट विंडो आयाम

चैट विंडो डेस्कटॉप पर 410px चौड़ी होती है, जिसमें 20px स्पेसिंग और हाइलाइट किए गए टेक्स्ट की ओर इशारा करता हुआ 16px का विज़ुअल तीर होता है। इन आयामों को सुसंगत व्यवहार सुनिश्चित करने के लिए निश्चित रखा गया है, लेकिन आप CSS के साथ उपस्थिति को अनुकूलित कर सकते हैं।

क्रॉस-तत्व चयन

उपयोगकर्ता ऐसा टेक्स्ट चुन सकते हैं जो कई HTML तत्वों में फैला हो, जैसे एक पैराग्राफ के मध्य से दूसरे के आरंभ तक हाइलाइट करना। रेंज सीरियलाइज़ेशन सिस्टम इसे सही ढंग से संभालता है और तत्व सीमाओं के पार भी सभी चयनित टेक्स्ट को हाइलाइट करेगा।

ब्राउज़र संगतता

टेक्स्ट चयन सिस्टम मानक window.getSelection() API का उपयोग करता है जो सभी आधुनिक ब्राउज़रों में समर्थित है। Internet Explorer के पुराने संस्करणों के लिए, यह संगतता के लिए document.selection पर वापस आ जाता है।

चयन निरंतरता

एक बार टेक्स्ट चयन के लिए बातचीत बन जाने पर, वह एनोटेशन तब भी बना रहता है यदि पेज रीलोड हो जाए। क्रमबद्ध रेंज और DOM पथ विजेट को उपयोगकर्ताओं के पेज पर वापस आने पर बिल्कुल उसी स्थान पर हाइलाइट्स पुनर्स्थापित करने की अनुमति देते हैं।

यह तब तक विश्वसनीय रूप से काम करता है जब तक आपका पेज कंटेंट स्थिर रहता है। यदि आप टेक्स्ट कंटेंट बदलते हैं या अपनी HTML को पुनर्गठित करते हैं, तो मौजूदा एनोटेशन अब टेक्स्ट के साथ सही ढंग से संरेखित नहीं हो सकते। इस कारण से, सक्रिय एनोटेशन वाले पेजों पर बड़े कंटेंट परिवर्तनों से बचना सबसे अच्छा है, या जब कंटेंट परिवर्तन आवश्यक हों तो एनोटेशन को माइग्रेट करने पर विचार करें।

डार्क मोड सपोर्ट

डायनामिक डार्क मोड

यदि आपकी साइट का डार्क मोड body एलिमेंट में .dark क्लास जोड़कर नियंत्रित होता है, तो Collab Chat UI इसे बिना री-इनिशियलाइज़ेशन के स्वतः ही सम्मानित करेगा। विजेट की स्टाइल्स इस क्लास की उपस्थिति के प्रति प्रतिक्रिया देने के लिए डिज़ाइन की गई हैं।

डार्क मोड CSS उदाहरण

Copy

1

2/* आपकी डार्क मोड CSS */

3body.dark {

4 background: #1a1a1a;

5 color: #ffffff;

6}

7

CSS के साथ कस्टम स्टाइलिंग

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

टेक्स्ट हाइलाइट्स FastComments कमेंट बबल स्टाइलिंग सिस्टम का उपयोग करते हैं, इसलिए स्टैंडर्ड कमेंटिंग विजेट पर आपके द्वारा लागू की गई कोई भी कस्टमाइज़ेशन Collab Chat को भी प्रभावित करेगी।

टॉप बार कस्टमाइज़ेशन

टॉप बार ऑनलाइन उपयोगकर्ताओं की संख्या और चर्चाओं की संख्या दिखाता है। आप topBarTarget के रूप में एक कस्टम एलिमेंट प्रदान करके इसकी स्थिति को कस्टमाइज़ कर सकते हैं:

कस्टम टॉप बार स्थान

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 topBarTarget: document.getElementById('my-custom-header')

5});

6

या इसे null सेट करके पूरी तरह अक्षम करें:

टॉप बार अक्षम करें

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 topBarTarget: null

5});

6

मोबाइल व्यवहार

768px से कम चौड़ाई वाली स्क्रीन पर, Collab Chat स्वतः ही मोबाइल-अनुकूलित लेआउट पर स्विच हो जाता है। चैट विंडोज़ टेक्स्ट के बगल में फ्लोटिंग होने के बजाय फुलस्क्रीन दिखाई देती हैं, और अधिक तुरंत इंटरैक्शन के लिए सिलेक्शन डिले हटा दिया जाता है।

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

चैट विंडो की उपस्थिति

चैट विंडोज़ डेस्कटॉप पर 410px चौड़ी होती हैं और हाइलाइट किए गए टेक्स्ट की ओर इशारा करने वाला 16px का तीर होता है। विंडोज़ उपलब्ध व्यूपोर्ट स्पेस के आधार पर स्वतः स्थिति निर्धारित करती हैं, जिसमें to-right, to-left, to-top, और to-bottom जैसी पोज़िशनिंग क्लासेस का उपयोग होता है।

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

लोकलाइज़ेशन

Collab Chat स्टैंडर्ड FastComments विजेट के समान सभी लोकलाइज़ेशन विकल्पों का समर्थन करता है। विभिन्न भाषाओं में UI टेक्स्ट दिखाने के लिए locale विकल्प सेट करें:

लोकेल सेट करें

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 locale: 'es' // स्पेनिश

5});

6

FastComments दर्जनों भाषाओं का समर्थन करता है। लोकेल सेटिंग प्रॉम्प्ट्स, बटन और प्लेसहोल्डर टेक्स्ट सहित सभी UI टेक्स्ट को प्रभावित करती है।

विरासत में मिले कस्टमाइज़ेशन विकल्प

चूंकि Collab Chat स्टैंडर्ड कमेंटिंग विजेट का विस्तार करता है, यह बेस विजेट से सभी कस्टमाइज़ेशन विकल्प विरासत में लेता है। इसमें कस्टम CSS क्लासेस, कस्टम अनुवाद, अवतार कस्टमाइज़ेशन, दिनांक फ़ॉर्मेटिंग और बहुत कुछ शामिल है।

उपलब्ध कस्टमाइज़ेशन विकल्पों की पूरी सूची के लिए मुख्य FastComments कस्टमाइज़ेशन दस्तावेज़ीकरण देखें।

कस्टम फ़ॉन्ट्स के साथ कार्य करना

यदि आपकी साइट कस्टम फ़ॉन्ट्स का उपयोग करती है, तो Collab Chat UI आपके पेज की CSS से उन फ़ॉन्ट्स को विरासत में लेगा। यदि आप चाहते हैं कि फ्लोटिंग चैट विंडो वही फ़ॉन्ट्स उपयोग करे, तो आपको एक विजेट कस्टमाइज़ेशन रूल बनाना पड़ सकता है और उस रूल की कस्टम CSS में फ़ॉन्ट्स को @import करना पड़ सकता है।

रियल-टाइम अपडेट

Collab Chat सभी जुड़े हुए उपयोगकर्ताओं के बीच सभी बातचीत को रियल-टाइम में सिंक करने के लिए WebSocket कनेक्शन का उपयोग करता है। जब कोई नया एनोटेशन बनाता है, कोई कमेंट जोड़ता है, या कोई चर्चा हटाता है, तो उसी पेज को देख रहे अन्य सभी उपयोगकर्ता रिफ्रेश किए बिना अपडेट तुरंत देखते हैं।

WebSocket सिंक कैसे काम करता है

जब आप Collab Chat को इनिशियलाइज़ करते हैं, तो विजेट FastComments सर्वर्स से एक WebSocket कनेक्शन स्थापित करता है। यह कनेक्शन उपयोगकर्ता के सेशन की अवधि के दौरान खुला रहता है और वर्तमान पेज से संबंधित अपडेट के लिए सुनता रहता है।

WebSocket सिस्टम Collab Chat के लिए तीन प्रकार के ब्रॉडकास्ट संदेशों का उपयोग करता है। new-text-chat इवेंट तब फायर होता है जब कोई पेज पर नया एनोटेशन बनाता है। updated-text-chat इवेंट तब फायर होता है जब कोई किसी मौजूदा बातचीत को अपडेट करता है। deleted-text-chat इवेंट तब फायर होता है जब कोई एनोटेशन हटाता है।

ब्रॉडकास्ट ID सिस्टम

इको इफेक्ट को रोकने के लिए, जिसमें उपयोगकर्ता अपनी ही क्रियाओं को वापस ब्रॉडकास्ट होते देखते हैं, प्रत्येक अपडेट में एक अद्वितीय broadcastId शामिल होता है। जब कोई उपयोगकर्ता एनोटेशन बनाता या अपडेट करता है, तो उसका क्लाइंट उस ऑपरेशन के लिए एक UUID जनरेट करता है। जब WebSocket अपडेट को सभी क्लाइंट्स को वापस ब्रॉडकास्ट करता है, तो मूल क्लाइंट उस अपडेट को अनदेखा कर देता है क्योंकि वह अपने ही broadcastId से मेल खाता है।

इससे एक सहज इंटरैक्शन सुनिश्चित होता है जिसमें उपयोगकर्ता सर्वर के माध्यम से राउंड-ट्रिप की प्रतीक्षा किए बिना अपने परिवर्तन UI में तुरंत देखते हैं, जबकि अन्य सभी उपयोगकर्ताओं को अपडेट मिलना भी सुनिश्चित रहता है।

लाइव उपयोगकर्ता संख्या

टॉप बार वर्तमान में पेज देख रहे उपयोगकर्ताओं की संख्या प्रदर्शित करता है। यह संख्या उपयोगकर्ताओं के जुड़ने और छोड़ने के साथ रियल-टाइम में अपडेट होती रहती है। उपयोगकर्ता संख्या उसी WebSocket कनेक्शन के माध्यम से प्रदान की जाती है और कनेक्शन तथा डिस्कनेक्शन इवेंट्स के आधार पर स्वचालित रूप से बढ़ती/घटती है।

कनेक्शन लचीलापन

यदि नेटवर्क समस्याओं या सर्वर रखरखाव के कारण WebSocket कनेक्शन टूट जाता है, तो विजेट स्वचालित रूप से फिर से कनेक्ट होने का प्रयास करता है। पुनःकनेक्शन अवधि के दौरान, उपयोगकर्ता मौजूदा एनोटेशन के साथ इंटरैक्ट कर सकते हैं, लेकिन कनेक्शन फिर से स्थापित होने तक अन्य उपयोगकर्ताओं के रियल-टाइम अपडेट नहीं देख पाएंगे।

पुनः कनेक्ट होने के बाद, विजेट यह सुनिश्चित करने के लिए रीसिंक्रोनाइज़ करता है कि कोई अपडेट न छूटा हो। यह पारदर्शी रूप से होता है, बिना उपयोगकर्ता के हस्तक्षेप की आवश्यकता के।

बैंडविड्थ विचार

WebSocket संदेश हल्के होते हैं और उनमें केवल स्थिति सिंक करने के लिए आवश्यक आवश्यक जानकारी होती है। नया एनोटेशन बनाने में आमतौर पर 1KB से कम बैंडविड्थ का उपयोग होता है। सिस्टम में उच्च-गतिविधि अवधियों के दौरान संदेश आवृत्ति को कम करने के लिए बुद्धिमान बैचिंग भी शामिल है।

FastComments डैशबोर्ड में आपके उपयोग मेट्रिक्स pubSubMessageCount और pubSubBandwidth को ट्रैक करते हैं ताकि आप अपनी साइटों में रियल-टाइम सिंक गतिविधि की निगरानी कर सकें।

क्रॉस-टैब सिंक्रोनाइज़ेशन

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

सुरक्षा

WebSocket संदेश सुरक्षित कनेक्शन (WSS) के माध्यम से प्रसारित होते हैं और टेनेंट सत्यापन शामिल करते हैं ताकि यह सुनिश्चित हो कि उपयोगकर्ताओं को केवल उन बातचीत के अपडेट मिलें जिन्हें देखने के लिए वे अधिकृत हैं। अनधिकृत पहुंच या हेरफेर को रोकने के लिए सर्वर सभी ऑपरेशनों को ब्रॉडकास्ट करने से पहले सत्यापित करता है।