इमेज चैट

FastComments Image Chat उपयोगकर्ताओं को छवि पर कहीं भी क्लिक करके चर्चा बिंदु बनाने की सुविधा देकर छवियों पर इंटरैक्टिव चर्चाओं को सक्षम बनाता है। उपयोगकर्ता छवियों के विशिष्ट हिस्सों पर क्लिक करके उन क्षेत्रों के बारे में बातचीत शुरू कर सकते हैं, जिससे ऐसे विज़ुअल मार्कर बनते हैं जो दिखाते हैं कि चर्चाएँ कहाँ स्थित हैं।

यह सुविधा डिज़ाइन फीडबैक, उत्पाद समीक्षाओं, आरेखों वाली शैक्षिक सामग्री, टिप्पणियों वाली फोटो गैलरी, और किसी भी ऐसे परिदृश्य के लिए आदर्श है जहाँ आप विशिष्ट छवि स्थानों से जुड़ी संदर्भात्मक चर्चाएँ चाहते हैं।

शुरुआत करें

उपयोग के मामले

Image Chat डिज़ाइन फीडबैक के लिए बहुत अच्छा काम करता है, जहाँ टीमों को मॉकअप या स्क्रीनशॉट में विशिष्ट तत्वों पर चर्चा करनी होती है। उत्पाद समीक्षा साइटें ग्राहकों को उत्पाद की तस्वीरों में दिखाई देने वाली विशिष्ट विशेषताओं पर चर्चा करने दे सकती हैं। शैक्षिक प्लेटफ़ॉर्म इसका उपयोग आरेखों, नक्शों या वैज्ञानिक छवियों पर चर्चा के लिए कर सकते हैं। फोटो गैलरी स्थान-विशिष्ट टिप्पणियों के साथ इंटरैक्टिव बन सकती हैं। रियल एस्टेट साइटें दर्शकों को संपत्ति की तस्वीरों में दिखाई देने वाली विशिष्ट विशेषताओं पर चर्चा करने दे सकती हैं।

त्वरित शुरुआत

Image Chat के साथ शुरुआत करना आसान है। आपको FastComments Image Chat स्क्रिप्ट, एक छवि वाला image element या container, और आपकी Tenant ID वाला एक configuration object चाहिए।

इंस्टॉलेशन

Image Chat स्क्रिप्ट को अपने पेज में जोड़ें:

Image Chat स्क्रिप्ट लोड करना

Copy

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

बुनियादी कार्यान्वयन

यहाँ एक न्यूनतम उदाहरण है:

बुनियादी Image Chat कार्यान्वयन

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Image Gallery with Image Chat</title>
</head>
<body>
    <!-- आपकी छवि -->
    <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
    <!-- Image Chat स्क्रिप्ट लोड करें -->
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <!-- Image Chat प्रारंभ करें -->
    <script>
        FastCommentsImageChat(document.getElementById('my-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

यदि पहले से नहीं है, तो 'demo' को अपनी वास्तविक FastComments Tenant ID से बदलें, जो आपको अपने FastComments डैशबोर्ड में मिल सकती है।

यह कैसे काम करता है

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

विजेट प्रतिशत-आधारित पोज़िशनिंग का उपयोग करता है, इसलिए छवि के आकार बदलने या विभिन्न स्क्रीन साइज़ पर देखे जाने पर भी मार्कर सही स्थान पर रहते हैं।

लाइव डेमो

आप Image Chat को क्रिया में हमारे लाइव डेमो पेज पर देख सकते हैं।

अगले कदम

अब जब आपकी बुनियादी सेटअप काम कर रही है, आप Configuration Options गाइड में रूप और व्यवहार को अनुकूलित कर सकते हैं। प्रतिशत-आधारित पोज़िशनिंग कैसे काम करती है, यह समझने के लिए Responsive Design गाइड देखें। स्टाइलिंग और डार्क मोड समर्थन के बारे में Customization गाइड में जानें। उन्नत एकीकरणों के लिए, API Reference देखें।

फ्रंटएंड लाइब्रेरी

सभी FastComments फ्रंटएंड लाइब्रेरी (react, vue, angular, आदि) में Image Chat है।

उदाहरण

मूल उदाहरण

Image Chat का उपयोग करने का सबसे सरल तरीका एक single image element को target करना है। यह उदाहरण दिखाता है कि किसी image पर interactive discussions को कैसे सक्षम किया जाए:

मूल Image Chat उदाहरण

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Product Image with Chat</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

Container Element के साथ उदाहरण

आप एक container element भी pass कर सकते हैं जिसके अंदर एक image हो:

Container के साथ Image Chat

Copy

Run

<div id="image-container">
    <img src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="System Diagram" />
</div>
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('image-container'), {
        tenantId: 'demo'
    });
</script>

Custom URL ID के साथ उदाहरण

डिफ़ॉल्ट रूप से, Image Chat conversations की पहचान करने के लिए page URL को image source और coordinates के साथ जोड़ता है। आप एक custom urlId प्रदान कर सकते हैं:

Custom URL ID के साथ Image Chat

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        urlId: 'product-v2-main-image'
    });
</script>

यह तब उपयोगी है जब आपकी URL संरचना बदल जाती है लेकिन आप उन्हीं conversations को बनाए रखना चाहते हैं, या जब आप एक ही discussion points को कई pages पर share करना चाहते हैं।

Dark Mode के साथ उदाहरण

यदि आपकी site का background dark है और widget इसे जैसा होना चाहिए वैसा auto detect नहीं कर पा रहा है, तो हम dark mode support को manually सक्षम कर सकते हैं:

Dark Mode के साथ Image Chat

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        hasDarkBackground: true
    });
</script>

Custom Chat Square Size के साथ उदाहरण

आप image पर दिखाई देने वाले clickable squares का आकार समायोजित कर सकते हैं। आकार image की width के percentage के रूप में निर्दिष्ट किया जाता है:

Custom Square Size के साथ Image Chat

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Image Chat with Custom Square Size</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo',
            chatSquarePercentage: 2, // छोटे squares (डिफ़ॉल्ट 5 है)
        });
    </script>
</body>
</html>

Comment Count Callback के साथ उदाहरण

commentCountUpdated callback का उपयोग करके track करें कि comments कब add या update होते हैं:

Comment Count Callback के साथ Image Chat

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        commentCountUpdated: function(count) {
            console.log('Total comments:', count);
            document.getElementById('comment-badge').textContent = count;
        }
    });
</script>

Multiple Images के साथ उदाहरण

आप कई images पर Image Chat initialize कर सकते हैं। प्रत्येक image के अपने स्वतंत्र discussion points होंगे:

Multiple Images पर Image Chat

Copy

Run

<img id="image-1" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 1" />
<img id="image-2" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 2" />
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    // पहली image पर initialize करें
    FastCommentsImageChat(document.getElementById('image-1'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-1'
    });
    // दूसरी image पर initialize करें
    FastCommentsImageChat(document.getElementById('image-2'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-2'
    });
</script>

कॉन्फ़िगरेशन विकल्प

अवलोकन

FastComments Image Chat मानक FastComments कमेंटिंग विजेट का विस्तार करता है, इसलिए यह बेस विजेट से सभी कॉन्फ़िगरेशन विकल्प प्राप्त करता है और साथ में इमेज एनोटेशन के लिए कुछ विशिष्ट विकल्प भी जोड़ता है।

आवश्यक कॉन्फ़िगरेशन

tenantId

आपकी FastComments Tenant ID आवश्यक है। आप इसे अपने FastComments डैशबोर्ड में पा सकते हैं।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo'
});

Image Chat विशिष्ट विकल्प

urlId

डिफ़ॉल्ट रूप से, Image Chat पेज URL, इमेज स्रोत और X/Y निर्देशांकों के आधार पर प्रत्येक बातचीत के लिए एक अद्वितीय पहचानकर्ता बनाता है। आप इसे कस्टम urlId से बदल सकते हैं।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    urlId: 'my-custom-image-id'
});

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

chatSquarePercentage

क्लिक करने योग्य चैट मार्करों के आकार को इमेज की चौड़ाई के प्रतिशत के रूप में नियंत्रित करता है। डिफ़ॉल्ट 5% है, यानी प्रत्येक मार्कर इमेज की चौड़ाई का 5% होता है।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 8  // बड़े, अधिक दिखाई देने वाले मार्कर
});

छोटे मान कम बाधक मार्कर बनाते हैं जो विस्तृत इमेज के लिए बेहतर काम करते हैं। बड़े मान मार्करों को व्यस्त इमेज पर या मोबाइल डिवाइस उपयोगकर्ताओं के लिए देखने और क्लिक करने में आसान बनाते हैं।

hasDarkBackground

जब आपके पेज का बैकग्राउंड गहरा हो तो डार्क मोड स्टाइलिंग सक्षम करें।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

commentCountUpdated

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

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    commentCountUpdated: function(count) {
        console.log('Total comments:', count);
        document.getElementById('badge').textContent = count;
    }
});

विरासत में मिले कॉन्फ़िगरेशन विकल्प

चूंकि Image Chat मानक कमेंटिंग विजेट का विस्तार करता है, आप बेस FastComments विजेट का कोई भी कॉन्फ़िगरेशन विकल्प उपयोग कर सकते हैं। यहाँ कुछ सामान्यतः उपयोग किए जाने वाले विकल्प हैं:

locale

विजेट UI के लिए भाषा सेट करें। FastComments दर्जनों भाषाओं का समर्थन करता है।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'es'  // स्पेनिश
});

readonly

सभी बातचीत को केवल-पढ़ने योग्य बनाएं। उपयोगकर्ता मौजूदा मार्कर और चर्चाएँ देख सकते हैं लेकिन नई नहीं बना सकते या जवाब नहीं दे सकते।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    readonly: true
});

sso और simpleSSO

Single Sign-On का उपयोग करके अपने प्रमाणीकरण सिस्टम के साथ एकीकृत करें।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    sso: {
        // SSO कॉन्फ़िगरेशन
    }
});

प्रमाणीकरण विकल्पों के पूर्ण विवरण के लिए SSO दस्तावेज़ देखें।

maxReplyDepth

नियंत्रित करें कि जवाब कितने स्तर तक गहरे जा सकते हैं। डिफ़ॉल्ट रूप से, Image Chat इसे 0 पर सेट करता है, यानी सभी कमेंट फ्लैट होते हैं (कोई नेस्टेड जवाब नहीं)। यदि आप थ्रेडेड बातचीत चाहते हैं तो आप इसे बदल सकते हैं।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // 3 स्तर की नेस्टिंग की अनुमति दें
});

आंतरिक कॉन्फ़िगरेशन

ये विकल्प Image Chat द्वारा स्वचालित रूप से सेट किए जाते हैं और इन्हें ओवरराइड नहीं किया जाना चाहिए:

Image Chat के लिए productId स्वचालित रूप से 2 पर सेट होता है। चैट विंडो कार्यक्षमता प्रदान करने के लिए floating-chat एक्सटेंशन स्वचालित रूप से लोड होता है। विजेट स्वचालित रूप से मोबाइल डिवाइसों (768px से कम चौड़ाई वाली स्क्रीन) का पता लगाता है और फुलस्क्रीन चैट विंडो के साथ UI को तदनुसार समायोजित करता है।

टारगेट एलिमेंट की लचीलापन

FastCommentsImageChat का पहला पैरामीटर सीधे एक <img> एलिमेंट हो सकता है या अंदर इमेज वाला एक कंटेनर एलिमेंट:

// सीधा इमेज एलिमेंट
FastCommentsImageChat(document.getElementById('my-image'), config);

// अंदर इमेज वाला कंटेनर
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);

यदि आप कंटेनर एलिमेंट पास करते हैं तो विजेट इमेज को स्वचालित रूप से ढूंढ लेगा।

पूर्ण उदाहरण

यहाँ कई कॉन्फ़िगरेशन विकल्पों को एक साथ दिखाने वाला एक उदाहरण है:

FastCommentsImageChat(document.getElementById('product-image'), {
    tenantId: 'demo',
    urlId: 'product-v2-main',
    chatSquarePercentage: 6,
    hasDarkBackground: false,
    locale: 'en',
    commentCountUpdated: function(count) {
        document.title = count > 0 ? `(${count}) Product Photo` : 'Product Photo';
    },
    sso: {
        // आपका SSO कॉन्फ़िगरेशन
    },
    maxReplyDepth: 1
});

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

रिस्पॉन्सिव डिज़ाइन

प्रतिशत-आधारित पोज़िशनिंग

Image Chat छवियों पर चैट मार्कर पोज़िशन करने के लिए पिक्सेल कोऑर्डिनेट्स के स्थान पर प्रतिशत-आधारित कोऑर्डिनेट्स का उपयोग करता है। जब कोई उपयोगकर्ता किसी छवि पर क्लिक करता है, तो विजेट क्लिक के पिक्सेल कोऑर्डिनेट्स को छवि की चौड़ाई और ऊंचाई के प्रतिशत में बदल देता है। यह दृष्टिकोण सुनिश्चित करता है कि छवि कैसे भी दिखाई जाए, मार्कर सही स्थान पर बने रहें।

उदाहरण के लिए, यदि कोई उपयोगकर्ता 1000px चौड़ी छवि के बाएं किनारे से 250 पिक्सेल दूर क्लिक करता है, तो विजेट इसे बाईं ओर से 25% के रूप में सहेजता है। जब कोई अन्य उपयोगकर्ता मोबाइल डिवाइस पर उसी छवि को 500px चौड़ाई पर देखता है, तो मार्कर बाईं ओर से 125 पिक्सेल पर दिखाई देता है, जो अभी भी चौड़ाई का 25% है।

रिस्पॉन्सिव लेआउट के लिए लाभ

यह प्रतिशत सिस्टम Image Chat को सभी डिवाइस साइज़ और ओरिएंटेशन पर सहजता से काम करने देता है। आपकी छवियां स्क्रीन चौड़ाई, CSS नियमों या कंटेनर बाधाओं के आधार पर अलग-अलग साइज़ में दिखाई जा सकती हैं, लेकिन मार्कर हमेशा इच्छित स्थानों के साथ सही ढंग से संरेखित रहते हैं।

बड़े मॉनिटर वाले डेस्कटॉप कंप्यूटर पर उपयोगकर्ता मार्कर को उन्हीं सापेक्ष स्थितियों में देखते हैं जिनमें छोटी स्क्रीन वाले स्मार्टफोन पर उपयोगकर्ता देखते हैं। मार्कर छवि के साथ आनुपातिक रूप से स्केल होते हैं।

छवि स्केलिंग और आस्पेक्ट रेशियो

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

यदि आप ऐसा CSS लागू करते हैं जो छवि के आस्पेक्ट रेशियो को विकृत करता है (जैसे विशिष्ट आयामों के साथ object-fit: cover का उपयोग), तो मार्कर पोज़िशन सही ढंग से संरेखित नहीं हो सकते। सर्वोत्तम परिणामों के लिए, छवियों को स्वाभाविक रूप से स्केल होने दें या आस्पेक्ट रेशियो बनाए रखने के लिए object-fit: contain का उपयोग करें।

चैट स्क्वायर साइज़िंग

चैट मार्कर का विज़ुअल साइज़ भी प्रतिशत-आधारित है। chatSquarePercentage कॉन्फ़िगरेशन विकल्प डिफ़ॉल्ट रूप से 5% होता है, जिसका अर्थ है कि प्रत्येक स्क्वायर छवि चौड़ाई का 5% है। यह विभिन्न छवि साइज़ में सुसंगत विज़ुअल वेट सुनिश्चित करता है।

डिफ़ॉल्ट 5% सेटिंग के साथ 1000px चौड़ी छवि पर, मार्कर 50px स्क्वायर होते हैं। 500px चौड़ी छवि पर, वही मार्कर 25px स्क्वायर होते हैं। वे छवि साइज़ के अनुपात में बने रहते हैं।

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

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

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

डायनामिक छवि लोडिंग

प्रतिशत-आधारित सिस्टम तब भी सही ढंग से काम करता है जब छवियां एसिंक्रोनस रूप से लोड हों या पेज लोड होने के बाद साइज़ बदल जाए। विजेट छवि एलिमेंट की निगरानी करता है और जब भी छवि के आयाम बदलते हैं, मार्कर पोज़िशन की पुनः गणना करता है।

यदि आप छवियों को लेज़ी-लोड कर रहे हैं या विभिन्न ब्रेकपॉइंट पर अलग-अलग साइज़ के साथ रिस्पॉन्सिव छवियां लागू कर रहे हैं, तो छवि साइज़ बदलने पर मार्कर स्वचालित रूप से समायोजित हो जाते हैं।

क्रॉस-डिवाइस सुसंगतता

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

यह द्विदिशात्मक रूप से काम करता है। मोबाइल डिवाइस पर किसी विशिष्ट स्थान पर टैप करके बनाई गई चर्चा बड़े डेस्कटॉप मॉनिटर पर देखने पर उसी सापेक्ष पोज़िशन पर दिखाई देती है।

व्यूपोर्ट विचार

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

सामग्री को भविष्य के लिए सुरक्षित बनाना

प्रतिशत-आधारित दृष्टिकोण आपकी छवि चर्चाओं को लेआउट, डिज़ाइन या डिवाइस इकोसिस्टम में परिवर्तनों के प्रति लचीला बनाता है। जैसे-जैसे नए स्क्रीन साइज़ और डिवाइस सामने आएंगे, मौजूदा चर्चाएं किसी अपडेट या माइग्रेशन की आवश्यकता के बिना सही ढंग से प्रदर्शित होती रहेंगी।

अनुकूलन

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

Image Chat में बिल्ट-इन डार्क मोड सपोर्ट शामिल है। जब आप अपनी कॉन्फ़िगरेशन में hasDarkBackground: true सेट करते हैं, तो चैट विंडो और UI एलिमेंट्स स्वचालित रूप से डार्क बैकग्राउंड पर अच्छी तरह काम करने के लिए एडजस्ट हो जाते हैं।

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

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

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

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

/* आपकी डार्क मोड CSS */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

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

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

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

चैट स्क्वायर साइज़िंग

chatSquarePercentage विकल्प क्लिक करने योग्य मार्कर के आकार को नियंत्रित करता है। डिफ़ॉल्ट इमेज चौड़ाई का 5% है:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // बड़े, अधिक दिखाई देने वाले स्क्वायर
});

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

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

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

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

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

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

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

लेज़ी इनिशियलाइज़ेशन

चैट विंडो डेस्कटॉप उपयोगकर्ताओं के लिए होवर पर या बनाए जाने पर तुरंत इनिशियलाइज़ होती हैं। यह चैट इंटरफ़ेस को केवल तब रेंडर करके प्रारंभिक लोड ओवरहेड को कम करता है जब उपयोगकर्ता वास्तव में किसी मार्कर के साथ इंटरैक्ट करते हैं।

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

लोकलाइज़ेशन

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

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // फ्रेंच
});

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

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

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

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

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

यदि आपकी साइट कस्टम फ़ॉन्ट का उपयोग करती है, तो Image Chat UI आपके पेज की CSS से उन फ़ॉन्ट को इनहेरिट करेगा। चैट विंडो आपके पेज के DOM के अंदर रेंडर होती हैं और आपकी मौजूदा टाइपोग्राफी सेटिंग्स का सम्मान करती हैं।

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

मार्कर विज़ुअल डिज़ाइन

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

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

लाइव सिंक

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

सुरक्षा

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

ऑफ़लाइन व्यवहार

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

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

परफ़ॉर्मेंस पर प्रभाव

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

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

सहयोगी उपयोग के मामले

रियल-टाइम सिंक Image Chat को सहयोगी वर्कफ़्लोज़ के लिए विशेष रूप से शक्तिशाली बनाता है। डिज़ाइन टीमें मॉकअप्स की समीक्षा एक साथ कर सकती हैं, जिसमें सभी को मार्कर प्लेसमेंट रियल-टाइम में दिखाई देता है। कस्टमर सपोर्ट टीमें समस्याओं की पहचान के लिए स्क्रीनशॉट्स पर सहयोगात्मक रूप से एनोटेशन कर सकती हैं। शैक्षिक समूह आरेखों पर चर्चा कर सकते हैं, जिसमें सभी प्रतिभागियों को एक-दूसरे के मार्कर बनते ही दिखाई देते हैं।

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

API संदर्भ

API अवलोकन

Image Chat प्रोग्रामेटिक रूप से इमेज बातचीत प्रबंधित करने के लिए तीन REST API एंडपॉइंट प्रदान करता है। ये एंडपॉइंट आपको ब्राउज़र विजेट का उपयोग किए बिना मार्कर प्राप्त करने, बनाने और हटाने की अनुमति देते हैं।

सभी API एंडपॉइंट के लिए प्रमाणीकरण आवश्यक है और वे मानक FastComments API पैटर्न का पालन करते हैं। ये सार्वजनिक एंडपॉइंट हैं जो API कुंजियों के बजाय ब्राउज़र कुकीज़ के माध्यम से प्रमाणीकरण करते हैं।

बेस URL

सभी Image Chat API एंडपॉइंट निम्नलिखित के अंतर्गत हैं:

https://fastcomments.com/comment-image-chats

प्रमाणीकरण

ये एंडपॉइंट ब्राउज़र कुकीज़ के माध्यम से उपयोगकर्ताओं का प्रमाणीकरण करते हैं। वे API कुंजियों का उपयोग नहीं करते। इन एंडपॉइंट तक पहुँचने के लिए उपयोगकर्ताओं का अपने ब्राउज़र में FastComments में लॉग इन होना आवश्यक है।

सभी बातचीत प्राप्त करें

किसी विशिष्ट इमेज के लिए सभी इमेज बातचीत प्राप्त करें।

एंडपॉइंट

GET /comment-image-chats/:tenantId?urlId=<urlId>

पैरामीटर

tenantId (पाथ पैरामीटर, आवश्यक) आपकी FastComments Tenant ID है।

urlId (क्वेरी पैरामीटर, आवश्यक) वह इमेज पहचानकर्ता है जिसके लिए आप बातचीत प्राप्त करना चाहते हैं।

प्रतिक्रिया

प्रतिक्रिया में API स्थिति, प्रमाणित होने पर वर्तमान उपयोगकर्ता सत्र की जानकारी, उनकी IDs, URLs और X/Y निर्देशांक के साथ बातचीत की एक सरणी, एक साफ़ किया गया URL पहचानकर्ता, यह दर्शाने वाला फ़्लैग कि वर्तमान उपयोगकर्ता साइट एडमिन या मॉडरेटर है या नहीं, और tenantIdWS, urlIdWS, तथा userIdWS सहित लाइव सिंक के लिए WebSocket कनेक्शन विवरण शामिल हैं।

उदाहरण अनुरोध

curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
  --cookie "your-session-cookie"

उदाहरण प्रतिक्रिया

{
  "status": "success",
  "user": {
    "id": "user123",
    "username": "john_doe"
  },
  "conversations": [
    {
      "_id": "conv123",
      "urlId": "my-product-image:/images/product.jpg:25:30",
      "x": 25.5,
      "y": 30.2
    },
    {
      "_id": "conv456",
      "urlId": "my-product-image:/images/product.jpg:60:45",
      "x": 60.8,
      "y": 45.1
    }
  ],
  "urlIdClean": "my-product-image",
  "isSiteAdmin": false,
  "tenantIdWS": "demo",
  "urlIdWS": "my-product-image",
  "userIdWS": "user123"
}

बातचीत बनाएँ

किसी इमेज पर एक विशिष्ट स्थान के लिए नई इमेज बातचीत बनाएँ।

एंडपॉइंट

POST /comment-image-chats/:tenantId

पैरामीटर

tenantId (पाथ पैरामीटर, आवश्यक) आपकी FastComments Tenant ID है।

अनुरोध बॉडी JSON होनी चाहिए और इसमें ये आवश्यक फ़ील्ड शामिल होने चाहिए।

urlId (स्ट्रिंग, आवश्यक) बेस पेज पहचानकर्ता है।

windowUrlId (स्ट्रिंग, आवश्यक) इमेज स्रोत और निर्देशांकों के साथ संयुक्त URL है, उदाहरण के लिए my-page:/images/photo.jpg:25.5:30.2।

pageTitle (स्ट्रिंग, आवश्यक) पेज का शीर्षक है।

src (स्ट्रिंग, आवश्यक) इमेज स्रोत URL है।

x (संख्या, आवश्यक) प्रतिशत (0-100) के रूप में X निर्देशांक है।

y (संख्या, आवश्यक) प्रतिशत (0-100) के रूप में Y निर्देशांक है।

createdFromCommentId (स्ट्रिंग, आवश्यक) उस टिप्पणी की ID है जिसने यह चैट शुरू की।

broadcastId (स्ट्रिंग, आवश्यक) इको प्रभावों को रोकने के लिए लाइव सिंक्रोनाइज़ेशन के लिए एक UUID है।

प्रतिक्रिया

प्रतिक्रिया में API स्थिति और नई बनाई गई बातचीत की ID शामिल है।

उदाहरण अनुरोध

curl -X POST "https://fastcomments.com/comment-image-chats/demo" \
  --cookie "your-session-cookie" \
  -H "Content-Type: application/json" \
  -d '{
    "urlId": "my-product-image",
    "windowUrlId": "my-product-image:/images/product.jpg:25.5:30.2",
    "pageTitle": "Product Gallery",
    "src": "/images/product.jpg",
    "x": 25.5,
    "y": 30.2,
    "createdFromCommentId": "comment789",
    "broadcastId": "550e8400-e29b-41d4-a716-446655440000"
  }'

उदाहरण प्रतिक्रिया

{
  "status": "success",
  "createdChatId": "conv789"
}

बातचीत हटाएँ

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

एंडपॉइंट

DELETE /comment-image-chats/:tenantId/:chatId

पैरामीटर

tenantId (पाथ पैरामीटर, आवश्यक) आपकी FastComments Tenant ID है।

chatId (पाथ पैरामीटर, आवश्यक) हटाने के लिए बातचीत की ID है।

broadcastId (अनुरोध बॉडी, आवश्यक) लाइव सिंक्रोनाइज़ेशन के लिए एक UUID है।

उदाहरण अनुरोध

curl -X DELETE "https://fastcomments.com/comment-image-chats/demo/conv789" \
  --cookie "your-session-cookie" \
  -H "Content-Type: application/json" \
  -d '{
    "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
  }'

उदाहरण प्रतिक्रिया

{
  "status": "success"
}

निर्देशांक प्रणाली

X और Y निर्देशांक इमेज के आयामों के प्रतिशत के रूप में संग्रहीत होते हैं। X बाएँ किनारे से क्षैतिज स्थिति का प्रतिनिधित्व करता है (0 = बायाँ किनारा, 100 = दायाँ किनारा)। Y ऊपरी किनारे से लंबवत स्थिति का प्रतिनिधित्व करता है (0 = ऊपरी किनारा, 100 = निचला किनारा)।

ये प्रतिशत मान सटीकता के लिए दशमलव शामिल कर सकते हैं। उदाहरण के लिए, x: 25.5 का अर्थ है इमेज के बाएँ किनारे से 25.5%।

दर सीमित करना

ये एंडपॉइंट मानक FastComments API दर सीमा के अधीन हैं। दर सीमा मिडलवेयर सामान्य उपयोग पैटर्न की अनुमति देते हुए दुरुपयोग को रोकने के लिए प्रति-टेनेंट लागू होता है।

त्रुटि प्रतिक्रियाएँ

सभी एंडपॉइंट मानक HTTP स्थिति कोड लौटाते हैं। 400 प्रतिक्रिया अमान्य अनुरोध पैरामीटर दर्शाती है। 401 प्रतिक्रिया का अर्थ है प्रमाणीकरण विफल। 403 प्रतिक्रिया अपर्याप्त अनुमतियाँ दर्शाती है। 404 प्रतिक्रिया का अर्थ है कि बातचीत नहीं मिली। 429 प्रतिक्रिया दर सीमा पार होने का संकेत देती है।

त्रुटि प्रतिक्रियाओं में विवरण के साथ एक JSON बॉडी शामिल होती है:

{
  "status": "error",
  "message": "Conversation not found"
}

उपयोग ट्रैकिंग

बातचीत बनाने से आपका conversationCreateCount उपयोग मीट्रिक बढ़ता है। सभी WebSocket सिंक गतिविधि pubSubMessageCount और pubSubBandwidth को बढ़ाती है। आप इन मीट्रिक्स को अपने FastComments डैशबोर्ड में उपयोग विश्लेषण के अंतर्गत मॉनिटर कर सकते हैं।

कोई सवाल हैं?

FastComments Image Chat के लिए बस इतना ही! यदि आपके कोई प्रश्न हैं, कार्यान्वयन में मदद चाहिए, या फीचर सुझाव हैं, तो कृपया नीचे हमें बताएं या हमारी सहायता टीम से संपर्क करें।

Image Chat को क्रिया में देखने के लिए हमारे डेमो पेज पर लाइव डेमो देखें।

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

शुरुआत करें

कॉन्फ़िगरेशन

अनुकूलन

उन्नत

इमेज चैट

शुरुआत करें

उपयोग के मामले

त्वरित शुरुआत

इंस्टॉलेशन

बुनियादी कार्यान्वयन

यह कैसे काम करता है

लाइव डेमो

अगले कदम

फ्रंटएंड लाइब्रेरी

उदाहरण

मूल उदाहरण

Container Element के साथ उदाहरण

Custom URL ID के साथ उदाहरण

Dark Mode के साथ उदाहरण

Custom Chat Square Size के साथ उदाहरण

Comment Count Callback के साथ उदाहरण

Multiple Images के साथ उदाहरण

कॉन्फ़िगरेशन विकल्प

अवलोकन

आवश्यक कॉन्फ़िगरेशन

tenantId

Image Chat विशिष्ट विकल्प

urlId

chatSquarePercentage

hasDarkBackground

commentCountUpdated

विरासत में मिले कॉन्फ़िगरेशन विकल्प

locale

readonly

sso और simpleSSO

maxReplyDepth

आंतरिक कॉन्फ़िगरेशन

टारगेट एलिमेंट की लचीलापन

पूर्ण उदाहरण

रिस्पॉन्सिव डिज़ाइन

प्रतिशत-आधारित पोज़िशनिंग

रिस्पॉन्सिव लेआउट के लिए लाभ

छवि स्केलिंग और आस्पेक्ट रेशियो

चैट स्क्वायर साइज़िंग

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

डायनामिक छवि लोडिंग

क्रॉस-डिवाइस सुसंगतता

व्यूपोर्ट विचार

सामग्री को भविष्य के लिए सुरक्षित बनाना

अनुकूलन

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

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

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

चैट स्क्वायर साइज़िंग

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

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

लेज़ी इनिशियलाइज़ेशन

लोकलाइज़ेशन

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

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

मार्कर विज़ुअल डिज़ाइन

लाइव सिंक

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

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

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

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

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

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

सुरक्षा

ऑफ़लाइन व्यवहार

परफ़ॉर्मेंस पर प्रभाव

सहयोगी उपयोग के मामले

API संदर्भ

API अवलोकन

बेस URL

प्रमाणीकरण

सभी बातचीत प्राप्त करें

एंडपॉइंट

पैरामीटर