Image Chat | FastComments Docs

FastComments Image Chat, kullanıcıların bir resmin herhangi bir yerine tıklayarak tartışma noktaları oluşturmasına olanak tanıyarak resimler üzerinde etkileşimli tartışmalar sağlar. Kullanıcılar, belirli resim bölgelerine tıklayarak o alanlar hakkında konuşmalar başlatabilir ve tartışmaların nerede olduğunu gösteren görsel işaretçiler oluşturabilir.

Bu özellik tasarım geri bildirimi, ürün incelemeleri, diyagramlı eğitim materyalleri, yorumlu fotoğraf galerileri ve bağlamsal tartışmaları belirli görüntü konumlarına sabitlemek istediğiniz her senaryo için mükemmeldir.

Başlarken

Kullanım Senaryoları

Image Chat, ekiplerin mockup veya ekran görüntülerindeki belirli öğeleri tartışması gerektiği tasarım geri bildirimleri için mükemmeldir. Ürün inceleme siteleri, müşterilerin ürün fotoğraflarında görünen belirli özellikleri tartışmasına izin verebilir. Eğitim platformları, diyagramlar, haritalar veya bilimsel görüntüler hakkında tartışmak için kullanabilir. Fotoğraf galerileri, konuma özgü yorumlarla etkileşimli hale gelebilir. Emlak siteleri, izleyicilerin mülk fotoğraflarında görünen belirli özellikleri tartışmasına olanak tanıyabilir.

Hızlı Başlangıç

Image Chat ile başlamak basittir. FastComments Image Chat betiğine, bir img öğesine veya görüntü içeren bir kap konteynerine ve Tenant ID'niz içeren bir yapılandırma nesnesine ihtiyacınız vardır.

Kurulum

Sayfanıza Image Chat betiğini ekleyin:

Image Chat Betiğini Yükleme

Copy

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

Temel Uygulama

İşte minimal bir örnek:

Temel Image Chat Uygulaması

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Image Gallery with Image Chat</title>
</head>
<body>
    <!-- Resminiz -->
    <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
    <!-- Image Chat betiğini yükleyin -->
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <!-- Image Chat'i Başlatın -->
    <script>
        FastCommentsImageChat(document.getElementById('my-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your FastComments dashboard.

Nasıl Çalışır

Başlatıldıktan sonra kullanıcılar resmin her hangi bir yerine tıklayabilir. Bir tıklama olduğunda, o konumda görsel bir kare işaretçi belirir ve bir sohbet penceresi açılır. Diğer kullanıcılar tüm işaretçileri görebilir ve bu tartışmaları görüntülemek veya katılmak için onları tıklayabilir. Tüm tartışmalar tüm ziyaretçiler arasında gerçek zamanlı olarak senkronize edilir.

Widget, yüzde tabanlı konumlandırma kullanır, bu nedenle görüntü yeniden boyutlandırıldığında veya farklı ekran boyutlarında görüntülendiğinde işaretçiler doğru konumda kalır.

Canlı Demo

Image Chat’i eylemde canlı demo sayfamızda görebilirsiniz.

Sonraki Adımlar

Artık temel yapı çalıştığına göre, Görünüm ve davranışı yapılandırma seçenekleri kılavuzunda özelleştirebilirsiniz. Yüzde tabanlı konumlandırmanın nasıl çalıştığını anlamak için Duyarlı Tasarım kılavuzuna göz atın. Stil ve karanlık mod desteği hakkında bilgi için Özelleştirme kılavuzunu inceleyin. İleri entegrasyonlar için API Referansını keşfedin.

Önyüz Kütüphaneleri

Tüm FastComments önyüz kütüphanelerinde (react, vue, angular, vb.) Image Chat bulunmaktadır.

Örnekler

Temel Örnek

Image Chat'i kullanmanın en basit yolu tek bir görüntü elementini hedeflemektir. Bu örnek, bir görüntü üzerinde etkileşimli tartışmaları nasıl etkinleştireceğinizi gösterir:

Temel Image Chat Örneği

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>

Konteyner Element ile Örnek

Ayrıca içinde bir görüntü olan bir konteyner elementi de verebilirsiniz:

Konteyner İçeren 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>

Özel URL ID ile Örnek

Varsayılan olarak Image Chat, konuşmaları tanımlamak için sayfa URL'sini görüntü kaynağı ve koordinatlarla birleştirir. Özel bir urlId sağlayabilirsiniz:

Özel URL ID ile 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 yapınız değişse bile aynı konuşmaları korumak istiyorsanız ya da aynı tartışma noktalarını birden fazla sayfa arasında paylaşmak istiyorsanız bu yararlıdır.

Karanlık Mod ile Örnek

Sitenizin arka planı koyuysa ve widget bunu otomatik olarak algılamıyorsa, karanlık mod desteğini manuel olarak etkinleştirebiliriz:

Karanlık Mod ile 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>

Özel Sohbet Karesi Boyutu ile Örnek

Görüntü üzerinde görünen tıklanabilir karelerin boyutunu ayarlayabilirsiniz. Boyut, görüntü genişliğinin yüzdesi olarak belirtilir:

Özel Kare Boyutu ile 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, // Daha küçük kareler (varsayılan 5)
        });
    </script>
</body>
</html>

Yorum Sayısı Geri Çağrısı ile Örnek

Yorumlar eklendiğinde veya güncellendiğinde commentCountUpdated geri çağrısını kullanarak takip edebilirsiniz:

Yorum Sayısı Geri Çağrısı ile 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>

Birden Çok Görüntü ile Örnek

Image Chat'i birden çok görüntüde başlatabilirsiniz. Her görüntünün kendi bağımsız tartışma noktaları olacaktır:

Birden Çok Görüntüde 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>
    // İlk görüntüde başlat
    FastCommentsImageChat(document.getElementById('image-1'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-1'
    });
    // İkinci görüntüde başlat
    FastCommentsImageChat(document.getElementById('image-2'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-2'
    });
</script>

Yapılandırma Seçenekleri

Genel Bakış

FastComments Image Chat, standart FastComments yorum bileşenini genişletir; böylece temel bileşenin tüm yapılandırma seçeneklerini miras alır ve görüntü notlarıyla ilgili birkaç seçenek ekler.

Gerekli Yapılandırma

tenantId

FastComments Tenant ID'niz gereklidir. Bunu FastComments kontrol panelinizde bulabilirsiniz.

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

Image Chat'e Özgü Seçenekler

urlId

Varsayılan olarak Image Chat, her konuşma için sayfa URL'si, görüntü kaynağı ve X/Y koordinatlarına dayanarak benzersiz bir tanımlayıcı oluşturur. Bunu özel bir urlId ile geçersiz kılabilirsiniz.

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

Bu, URL yapınız değişebileceği halde aynı konuşmaları korumak istediğinizde veya notları birden fazla sayfa arasında paylaşmak istediğinizde faydalıdır.

chatSquarePercentage

Tıklanabilir sohbet işaretçilerinin boyutunu görüntü genişliğinin yüzde olarak kontrol eder. Varsayılan 5%'tir; bu, her işaretçinin görüntü genişliğinin %5'i olduğu anlamına gelir.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 8  // Daha büyük, daha görünür işaretçiler
});

Daha küçük değerler daha az müdahaleci işaretçiler oluşturur ve ayrıntılı görüntüler için daha iyi çalışır. Daha büyük değerler, yoğun görüntülerde veya mobil cihazlardaki kullanıcılar için işaretçilerin görülmesini ve tıklanmasını kolaylaştırır.

hasDarkBackground

Sayfanız koyu arka plana sahipse koyu mod stilini etkinleştirir.

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

commentCountUpdated

Yorum sayısı değiştiğinde tetiklenen bir geri çağırma fonksiyonu. Rozetler veya sayfa başlıkları gibi UI öğelerini güncellemek için yararlıdır.

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

Miras Alınan Yapılandırma Seçenekleri

Image Chat standart yorum bileşenini genişlettiği için, temel FastComments bileşeninin herhangi bir yapılandırma seçeneğini kullanabilirsiniz. İşte yaygın olarak kullanılan bazı seçenekler:

locale

Bileşenin UI'si için dili ayarlar. FastComments düzinelerce dili destekler.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'es'  // Spanish
});

readonly

Tüm konuşmaları salt okunur yapar. Kullanıcılar mevcut işaretçileri ve tartışmaları görüntüleyebilir, ancak yenisini oluşturamaz veya yanıtlayamaz.

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

sso and simpleSSO

Tek Oturum Açma (SSO) kullanarak kimlik doğrulama sisteminizle entegre edin.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    sso: {
        // SSO yapılandırması
    }
});

Kimlik doğrulama seçenekleri hakkında tam ayrıntılar için SSO belgelerine bakın.

maxReplyDepth

Yanıtların kaç seviye derinliğe kadar olabileceğini kontrol edin. Varsayılan olarak Image Chat bunu 0 olarak ayarlar; bu, tüm yorumların düz olduğu (iç içe yanıt yok) anlamına gelir. Konuşmaların dallanmasını istiyorsanız bunu değiştirebilirsiniz.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // 3 seviye iç içe izni ver
});

Dahili Yapılandırma

Bu seçenekler Image Chat tarafından otomatik olarak ayarlanır ve üzerine yazılmamalıdır:

productId Image Chat için otomatik olarak 2 olarak ayarlanır. Sohbet penceresi işlevselliği sağlamak için floating-chat uzantısı otomatik olarak yüklenir. Bileşen, mobil cihazları (genişliği 768px'den az ekranlar) otomatik olarak algılar ve UI'yi buna göre tam ekran sohbet pencereleriyle ayarlar.

Hedef Öğe Esnekliği

FastCommentsImageChat'e verilen ilk parametre ya doğrudan bir <img> elementi ya da içinde bir görüntü bulunan bir konteyner elementi olabilir:

// Doğrudan görüntü elementi
FastCommentsImageChat(document.getElementById('my-image'), config);

// İçinde görüntü olan konteyner
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);

Bir konteyner elementi geçirirseniz bileşen görüntüyü otomatik olarak bulacaktır.

Tam Örnek

İşte birden fazla yapılandırma seçeneğini bir arada gösteren bir örnek:

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 yapılandırmanız
    },
    maxReplyDepth: 1
});

Temel bileşenden miras alınan tüm kullanılabilir yapılandırma seçeneklerinin eksiksiz listesi için ana FastComments yapılandırma belgelerine bakın.

Duyarlı Tasarım

Yüzde Tabanlı Konumlandırma

Image Chat, görüntü üzerindeki sohbet işaretlerini konumlandırmak için piksel koordinatları yerine yüzde tabanlı koordinatları kullanır. Bir kullanıcı bir görüntüye tıkladığında, widget tıklamanın piksel koordinatlarını görüntü genişliğinin ve yüksekliğinin yüzdelerine dönüştürür. Bu yaklaşım, görüntü nasıl gösterilirse gösterilsin işaretlerin doğru konumda kalmasını sağlar.

Örneğin, bir kullanıcı 1000px genişliğindeki bir görüntünün sol kenarından 250 piksel uzaklığa tıklarsa, widget bunu sol kenardan %25 olarak kaydeder. Başka bir kullanıcı aynı görüntüyü mobil cihazda 500px genişlikte görüntülediğinde, işaret sol kenardan 125 pikselde görünür ki bu hâlâ genişliğin %25'idir.

Duyarlı Düzenler için Faydalar

Bu yüzde sistemi Image Chat'in tüm cihaz boyutlarında ve yönlerinde sorunsuz çalışmasını sağlar. Görüntüleriniz ekran genişliğine, CSS kurallarına veya kapsayıcı kısıtlamalarına bağlı olarak farklı boyutlarda gösterilebilir, ancak işaretler her zaman hedeflenen konumlarla doğru şekilde hizalanır.

Büyük monitörlü masaüstü bilgisayarlardaki kullanıcılar, küçük ekranlı akıllı telefonlardaki kullanıcılarla aynı göreli konumlarda işaretleri görür. İşaretler, görüntünün kendisiyle orantılı olarak ölçeklenir.

Görüntü Ölçeklendirme ve En-Boy Oranı

Görüntünüz ölçeklenirken en-boy oranını koruduğu sürece (ki bu varsayılan tarayıcı davranışıdır), yüzde tabanlı işaretler mükemmel şekilde hizalanmış kalır. Widget, görüntülerin orantılı olarak ölçeklendiğini varsayar ve konumları bu varsayıma göre hesaplar.

Eğer görüntünün en-boy oranını bozan CSS uygularsanız (örneğin belirli boyutlarla object-fit: cover kullanmak gibi), işaret konumları doğru hizalanmayabilir. En iyi sonuçlar için görüntülerin doğal olarak ölçeklenmesine izin verin veya en-boy oranını korumak için object-fit: contain kullanın.

Sohbet Karesi Boyutlandırması

Sohbet işaretlerinin görsel boyutu da yüzde tabanlıdır. chatSquarePercentage yapılandırma seçeneğinin varsayılanı %5'tir; bu, her karenin görüntü genişliğinin %5'i olduğu anlamına gelir. Bu, farklı görüntü boyutlarında tutarlı bir görsel yoğunluk sağlar.

Varsayılan %5 ayarıyla 1000px genişliğindeki bir görüntüde işaretler 50px kare olur. 500px genişliğindeki bir görüntüde aynı işaretler 25px kare olur. Bunlar görüntü boyutuna orantılı kalır.

Mobil Davranış

768px'den daha dar ekranlarda Image Chat mobil için optimize edilmiş bir düzene geçer. Sohbet pencereleri markerın yanında kayan pencere yerine tam ekran açılır. Bu, kayan pencerelerin görüntünün çok büyük kısmını kapatacağı küçük ekranlarda daha iyi kullanılabilirlik sağlar.

İşaretlerin kendileri yüzde tabanlı konumlarında görünür ve tıklanabilir kalır. Kullanıcılar tüm tartışmaların nerede olduğunu görebilir ve tam ekran sohbet arayüzünü açmak için işaretlere dokunabilir.

Dinamik Görüntü Yükleme

Yüzde tabanlı sistem, görüntüler asenkron olarak yüklendiğinde veya sayfa yüklendikten sonra boyutları değiştiğinde bile doğru çalışır. Widget, görüntü öğesini izler ve görüntü boyutları değiştiğinde işaret konumlarını yeniden hesaplar.

Eğer görüntüleri tembel yükleme (lazy-loading) yapıyorsanız veya farklı kırılma noktalarında farklı boyutlara sahip duyarlı görüntüler (responsive images) uyguluyorsanız, görüntü boyutu değiştiğinde işaretler otomatik olarak ayarlanır.

Cihazlar Arası Tutarlılık

Koordinatlar veritabanında yüzde olarak saklandığı için, bir masaüstü bilgisayarda oluşturulan tartışma tablet veya telefonda görüntülendiğinde aynı göreli konumda görünür. Kullanıcılar cihazlar arasında konumlandırma tutarsızlığı olmadan işbirliği yapabilir.

Bu iki yönlü olarak çalışır. Mobil cihazda belirli bir noktaya dokunarak oluşturulan bir tartışma, büyük bir masaüstü monitörde görüntülendiğinde aynı göreli konumda görünür.

Görünüm Penceresi (Viewport) Hususları

Widget yüzdeleri görünüm penceresi yerine görüntü öğesinin kendisine göre hesaplar. Bu, sayfayı kaydırmanın veya tarayıcı pencere boyutunu değiştirmenin işaret konumlarını etkilemediği anlamına gelir. Görünüm penceresi değişikliklerine bakılmaksızın işaretler görüntü üzerindeki konumlarına sabitlenmiş kalır.

İçeriği Geleceğe Hazırlama

Yüzde tabanlı yaklaşım, görüntü tartışmalarınızı düzen, tasarım veya cihaz ekosistemindeki değişikliklere karşı dayanıklı kılar. Yeni ekran boyutları ve cihazlar ortaya çıktıkça, mevcut tartışmalar herhangi bir güncelleme veya taşıma gerektirmeden doğru şekilde görüntülenmeye devam edecektir.

Özelleştirme

Karanlık Mod Desteği

Image Chat yerleşik karanlık mod desteği içerir. Yapılandırmanızda hasDarkBackground: true olarak ayarladığınızda, sohbet pencereleri ve UI öğeleri koyu arka planlarda iyi görünmeleri için otomatik olarak uyum sağlar.

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

Karanlık mod stil uygulaması sohbet pencerelerine, işaretçi karelerine ve tüm etkileşimli öğelere uygulanır. Sitenizde bir karanlık mod seçeneği varsa, mod değiştiğinde widget'ı yeniden başlatabilir veya aşağıda açıklanan body sınıfı yaklaşımını kullanabilirsiniz.

Dinamik Karanlık Mod

Sitenizin karanlık modu body öğesine .dark sınıfı ekleyerek kontrol ediliyorsa, Image Chat UI bunu yeniden başlatma gerektirmeden otomatik olarak dikkate alır. Widget'ın stilleri bu sınıfın varlığına yanıt verecek şekilde tasarlanmıştır.

/* Karanlık mod CSS'iniz */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

Özel Stil ile CSS

İşaretçilerin, sohbet pencerelerinin ve diğer öğelerin görünümünü CSS ile özelleştirebilirsiniz. Widget, stil sayfanızda hedefleyebileceğiniz belirli sınıflar ekler.

Sohbet kareleri ve pencereleri FastComments yorum balonu stil sistemi kullanır, bu nedenle standart yorum widget'ına uyguladığınız herhangi bir özelleştirme Image Chat'i de etkiler.

Sohbet Karesi Boyutlandırma

chatSquarePercentage seçeneği tıklanabilir işaretçilerin boyutunu kontrol eder. Varsayılan, görüntü genişliğinin %5'idir:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // Daha büyük, daha görünür kareler
});

Daha küçük değerler görüntüye daha sinsi şekilde karışan işaretçiler oluşturur. Daha büyük değerler, özellikle mobil cihazlarda veya erişilebilirlik amaçları için işaretçileri daha belirgin ve tıklanması daha kolay hale getirir.

Mobil Davranış

768px'den dar ekranlarda, Image Chat otomatik olarak mobil için optimize edilmiş bir düzen kullanır. Sohbet pencereleri işaretçilerin yanında kayan şekilde görünmek yerine tam ekran olarak görünür, küçük ekranlarda daha iyi kullanılabilirlik sağlar.

İşaretçiler görüntü üzerindeki duyarlı konumlarında görünür kalır. Kullanıcılar herhangi bir işaretçiye dokunarak tam ekran sohbet arayüzünü açabilir. Bu davranış yerleşiktir ve herhangi bir yapılandırma gerektirmez.

Sohbet Penceresi Görünümü

Sohbet pencereleri masaüstünde 300px genişliğindedir ve işaretçiye işaret eden 16px'lik bir ok bulunur. Pencereler, to-right, to-left, to-top ve to-bottom gibi konumlandırma sınıflarını kullanarak mevcut görünüm alanına (viewport) göre otomatik olarak konumlanır.

Bu pencerelerin renklerini, yazı tiplerini, boşluklarını veya diğer görsel özelliklerini ayarlamak için özel CSS ekleyebilirsiniz. Sohbet pencereleri standart FastComments widget'ı ile aynı bileşen yapısını kullandığından, uyguladığınız herhangi bir genel özelleştirmeyi devralır.

Tembel Başlatma

Sohbet pencereleri masaüstü kullanıcıları için hover ile veya oluşturulduğunda hemen başlatılır. Bu, kullanıcılar gerçekten bir işaretçi ile etkileşime girene kadar sohbet arayüzünü yalnızca render ederek başlangıç yükünü azaltır.

Tembel başlatma şeffaf bir şekilde gerçekleşir. Kullanıcılar herhangi bir gecikme fark etmez, ancak tarayıcının bir görüntüde birden çok işaretçi varsa onlarca gizli sohbet penceresini render etmesine gerek kalmaz.

Yerelleştirme

Image Chat, standart FastComments widget'ı ile aynı yerelleştirme seçeneklerinin tümünü destekler. UI metinlerini farklı dillerde göstermek için locale seçeneğini ayarlayın:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // Fransızca
});

FastComments onlarca dili destekler. Locale ayarı istemler, düğmeler ve yer tutucu metinler dahil tüm UI metinlerini etkiler.

Devralınan Özelleştirme Seçenekleri

Image Chat, standart yorum widget'ını genişlettiğinden, temel widget'tan tüm özelleştirme seçeneklerini devralır. Bu, özel CSS sınıfları, özel çeviriler, avatar özelleştirmesi, tarih formatlama ve çok daha fazlasını içerir.

Mevcut tüm özelleştirme seçenekleri listesi için ana FastComments özelleştirme belgelerine bakın.

Özel Yazı Tipleriyle Çalışma

Siteniz özel yazı tipleri kullanıyorsa, Image Chat UI bu yazı tiplerini sayfanızın CSS'inden devralır. Sohbet pencereleri sayfanızın DOM'u içinde render edilir ve mevcut tipografi ayarlarınızı dikkate alır.

En iyi sonuçlar için özel yazı tiplerinizin Image Chat'i başlatmadan önce yüklendiğinden emin olun veya yazı tipleri yüklenene kadar kısa bir sürede biçimsiz metin yanıp sönmesi olabileceğini kabul edin.

İşaretçi Görsel Tasarımı

Kare işaretçiler, görüntüyü bunaltmadan fark edilmelerini sağlayan ince bir görsel tasarıma sahiptir. Farklı bir görsel işlem istiyorsanız görünümünü CSS ile özelleştirebilirsiniz.

İşaretçiler, kullanıcı fareyi üzerlerine getirdiğinde geri bildirim sağlayan hover durumlarını içerir. Dokunmatik cihazlarda, dokunma etkileşimi sohbet penceresini açarak anında geri bildirim sağlar.

Canlı Senkronizasyon

Real-Time Updates

Image Chat, tüm bağlı kullanıcılar arasında tüm konuşmaları gerçek zamanlı senkronize etmek için WebSocket bağlantıları kullanır. Biri yeni bir işaretçi oluşturduğunda, yorum eklediğinde veya bir tartışmayı sildiğinde, aynı resmi görüntüleyen diğer tüm kullanıcılar sayfayı yenilemeye gerek kalmadan güncellemeyi hemen görür.

How WebSocket Sync Works

Image Chat başlatıldığında, widget FastComments sunucularına bir WebSocket bağlantısı kurar. Bu bağlantı kullanıcının oturumu süresince açık kalır ve geçerli resimle ilgili güncellemeleri dinler.

WebSocket sistemi Image Chat için üç tür yayın mesajı kullanır. new-image-chat olayı birisi resme yeni bir işaretçi oluşturduğunda tetiklenir. image-chat-updated olayı birisi mevcut bir konuşmayı güncellediğinde tetiklenir. deleted-image-chat olayı birisi bir işaretçiyi sildiğinde tetiklenir.

Broadcast ID System

Kullanıcıların kendi eylemlerinin kendilerine geri yayıldığını görerek yankı etkilerini önlemek için her güncelleme benzersiz bir broadcastId içerir. Bir kullanıcı bir işaretçi oluşturduğunda veya güncellediğinde, istemcisi o işlem için bir UUID üretir. WebSocket güncellemeyi tüm istemcilere yayınladığında, kaynağı oluşturan istemci kendi broadcastId ile eşleştiği için güncellemeyi yok sayar.

Bu, kullanıcıların sunucu üzerinden gidip gelmeyi beklemeden değişikliklerini arayüzde anında görmesini sağlarken, diğer tüm kullanıcıların da güncellemeyi almasını garanti eder.

Connection Resilience

WebSocket bağlantısı ağ sorunları veya sunucu bakımı nedeniyle kesilirse, widget otomatik olarak yeniden bağlanmaya çalışır. Yeniden bağlanma süresince kullanıcılar mevcut işaretçilerle etkileşime devam edebilir, ancak bağlantı yeniden kurulana kadar diğer kullanıcıların gerçek zamanlı güncellemelerini göremezler.

Bir kez yeniden bağlanıldığında, widget herhangi bir güncellemenin kaçırılmadığından emin olmak için yeniden senkronize olur. Bu, kullanıcı müdahalesi gerektirmeden şeffaf bir şekilde gerçekleşir.

Bandwidth Considerations

WebSocket mesajları hafiftir ve yalnızca durumu senkronize etmek için gerekli temel bilgileri içerir. Yeni bir işaretçi oluşturmak genellikle 1KB'den daha az bant genişliği kullanır. Sistem ayrıca yüksek etkinlik dönemlerinde mesaj sıklığını azaltmak için akıllı toplu işlemeyi içerir.

FastComments kontrol panelinizdeki kullanım metrikleriniz pubSubMessageCount ve pubSubBandwidth ile gerçek zamanlı senkronizasyon etkinliğini siteleriniz genelinde izlemenizi sağlar.

Cross-Tab Synchronization

Kullanıcının aynı sayfayı birden fazla tarayıcı sekmesinde açık tutması durumunda, bir sekmedeki güncellemeler diğer sekmelerde hemen görünür. Bu, aynı WebSocket senkronizasyon mekanizmasıyla çalışır ve ek bir yapılandırma gerektirmez.

Kullanıcılar sitenizi aynı anda birden fazla cihazda açık tutabilir ve hepsi senkronize kalır. Masaüstünde oluşturulan bir işaretçi, her iki cihaz da aynı resmi görüntülüyorsa kullanıcının tabletinde anında görünür.

Security

WebSocket mesajları güvenli bağlantılar (WSS) üzerinden aktarılır ve kullanıcıların yalnızca yetkili oldukları konuşmalar için güncellemeleri almasını sağlamak üzere kiracı doğrulaması içerir. Sunucu, yetkisiz erişimi veya manipülasyonu önlemek için yayınlamadan önce tüm işlemleri doğrular.

Offline Behavior

Kullanıcılar tamamen çevrimdışıyken mevcut işaretçileri görüntüleyebilirler ancak yeni bir işaretçi oluşturamaz veya başkalarının güncellemelerini göremezler. Widget çevrimdışı durumu algılar ve uygun bir ileti gösterir.

Bir kullanıcı çevrimdışıyken bir işaretçi oluşturmaya çalışır ve ardından çevrimiçi hale gelirse, işlem kuyruklanmak yerine başarısız olur; bu, veri tutarlılığını sağlar. Kullanıcılar bağlantıları geri geldiğinde işlemi yeniden denemelidir.

Performance Impact

WebSocket bağlantısının performans üzerinde minimal etkisi vardır. Güncelleme olmadığında bağlantı boşta kalır ve yalnızca etkinlik olduğunda mesajları işler. Orta düzey işaretçi etkinliğine sahip tipik bir resimde, WebSocket görüntünün kendisini render etmekten daha az CPU kullanır.

Yüzlerce eşzamanlı kullanıcı ve yüksek işaretçi oluşturma etkinliği olan sayfalarda, sistem bireysel istemci bağlantılarını etkilemeden performansı korumak için yatay olarak ölçeklenir.

Collaborative Use Cases

Gerçek zamanlı senkronizasyon, Image Chat'i işbirlikçi iş akışları için özellikle güçlü kılar. Tasarım ekipleri, herkes işaretçi yerleşimlerini gerçek zamanlı görerek mockup'ları birlikte gözden geçirebilir. Müşteri destek ekipleri, sorunları belirlemek için ekran görüntülerini birlikte notlandırabilir. Eğitim grupları, oluşturuldukça herkesin birbirinin işaretçilerini gördüğü diyagramları tartışabilir.

Anında geri bildirim, kullanıcıların güncellemeleri görmek için yenileme yapması gereken geleneksel yorum sistemlerine kıyasla daha ilgi çekici ve üretken bir işbirliği deneyimi yaratır.

API Referansı

API Overview

Image Chat, görüntü konuşmalarını programlı olarak yönetmek için üç REST API uç noktası sağlar. Bu uç noktalar, tarayıcı widget'ını kullanmadan marker'ları (işaretleri) almanıza, oluşturmanıza ve silmenize olanak tanır.

Tüm API uç noktaları kimlik doğrulama gerektirir ve standart FastComments API desenlerini izler. Bunlar tarayıcı çerezleri aracılığıyla kimlik doğrulayan herkese açık uç noktalardır; API anahtarları kullanılmaz.

Base URL

Tüm Image Chat API uç noktaları şunun altında bulunur:

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

Authentication

Bu uç noktalar kullanıcıları tarayıcı çerezleriyle doğrular. API anahtarları kullanılmaz. Bu uç noktalara erişebilmek için kullanıcıların tarayıcılarında FastComments'e giriş yapmış olmaları gerekir.

Get All Conversations

Belirli bir görüntü için tüm görüntü konuşmalarını alın.

Endpoint

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

Parameters

tenantId (yol parametresi, zorunlu) FastComments Tenant ID'nizdir.

urlId (sorgu parametresi, zorunlu) konuşmaları almak istediğiniz görüntü tanımlayıcısıdır.

Response

Yanıt, API durumunu, doğrulanmışsa mevcut kullanıcı oturum bilgilerini, kimlikleri, URL'leri ve X/Y koordinatlarıyla birlikte konuşma dizisini, temizlenmiş bir URL tanımlayıcısını, mevcut kullanıcının site yöneticisi veya moderatör olup olmadığını belirten bir bayrağı ve canlı senkronizasyon için tenantIdWS, urlIdWS ve userIdWS dahil WebSocket bağlantı ayrıntılarını içerir.

Example Request

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

Example Response

{
  "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"
}

Create Conversation

Bir görüntü üzerinde belirli bir konum için yeni bir görüntü konuşması oluşturun.

Endpoint

POST /comment-image-chats/:tenantId

Parameters

tenantId (yol parametresi, zorunlu) FastComments Tenant ID'nizdir.

İstek gövdesi JSON olmalı ve aşağıdaki zorunlu alanları içermelidir.

urlId (string, zorunlu) temel sayfa tanımlayıcısıdır.

windowUrlId (string, zorunlu) URL'nin, görüntü kaynağı ve koordinatlarla birleşmiş halidir; örneğin my-page:/images/photo.jpg:25.5:30.2.

pageTitle (string, zorunlu) sayfanın başlığıdır.

src (string, zorunlu) görüntü kaynak URL'sidir.

x (number, zorunlu) X koordinatıdır ve yüzde olarak (0-100) ifade edilir.

y (number, zorunlu) Y koordinatıdır ve yüzde olarak (0-100) ifade edilir.

createdFromCommentId (string, zorunlu) bu sohbeti başlatan yorumun ID'sidir.

broadcastId (string, zorunlu) yankı efektlerini önlemek için canlı senkronizasyon amacıyla kullanılan bir UUID'dir.

Response

Yanıt, API durumunu ve yeni oluşturulan konuşmanın ID'sini içerir.

Example Request

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"
  }'

Example Response

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

Delete Conversation

Mevcut bir görüntü konuşmasını silin. Bu uç nokta yönetici veya moderatör izinleri gerektirir veya konuşma doğrulanmış kullanıcı tarafından oluşturulmuş olmalıdır.

Endpoint

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

Parameters

tenantId (yol parametresi, zorunlu) FastComments Tenant ID'nizdir.

chatId (yol parametresi, zorunlu) silinecek konuşmanın ID'sidir.

broadcastId (istek gövdesi, zorunlu) canlı senkronizasyon için bir UUID'dir.

Example Request

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"
  }'

Example Response

{
  "status": "success"
}

Coordinate System

X ve Y koordinatları, görüntü boyutlarının yüzdesi olarak saklanır. X, sol kenardan yatay konumu temsil eder (0 = sol kenar, 100 = sağ kenar). Y, üst kenardan dikey konumu temsil eder (0 = üst kenar, 100 = alt kenar).

Bu yüzde değerleri hassasiyet için ondalık değerler içerebilir. Örneğin, x: 25.5 görüntünün sol kenarından %25.5 uzaklıkta olduğu anlamına gelir.

Rate Limiting

Bu uç noktalar, standart FastComments API hız sınırlamasına tabidir. Hız sınırlama ara yazılımı, kötüye kullanımı önlemek ve normal kullanım desenlerine izin vermek için tenant başına uygulanır.

Error Responses

Tüm uç noktalar standart HTTP durum kodları döner. 400 yanıtı geçersiz istek parametrelerini gösterir. 401 yanıtı kimlik doğrulamanın başarısız olduğunu belirtir. 403 yanıtı yetersiz izinleri gösterir. 404 yanıtı konuşmanın bulunamadığını belirtir. 429 yanıtı hız sınırının aşıldığını gösterir.

Hata yanıtları şu ayrıntıları içeren bir JSON gövdesi içerir:

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

Usage Tracking

Konuşma oluşturma, conversationCreateCount kullanım metriklerinizi artırır. Tüm WebSocket senkronizasyon etkinlikleri pubSubMessageCount ve pubSubBandwidth değerlerini artırır. Bu metrikleri FastComments kontrol panelinizde kullanım analizleri altında izleyebilirsiniz.

Sorularınız mı var?

FastComments Image Chat için bu kadar! Herhangi bir sorunuz varsa, uygulama konusunda yardıma ihtiyacınız olursa veya özellik önerileriniz varsa, lütfen aşağıda bize bildirin ya da destek ekibimizle iletişime geçin.

Image Chat'in nasıl çalıştığını görmek için canlı demoyu demo sayfamızda inceleyin.

Dil 🇹🇷 Türkçe

Başlarken

Yapılandırma

Özelleştirme

Gelişmiş

Başlarken

Kullanım Senaryoları

Hızlı Başlangıç

Kurulum

Temel Uygulama

Nasıl Çalışır

Canlı Demo

Sonraki Adımlar

Önyüz Kütüphaneleri

Örnekler

Temel Örnek

Konteyner Element ile Örnek

Özel URL ID ile Örnek

Karanlık Mod ile Örnek

Özel Sohbet Karesi Boyutu ile Örnek

Yorum Sayısı Geri Çağrısı ile Örnek

Birden Çok Görüntü ile Örnek

Yapılandırma Seçenekleri

Genel Bakış

Gerekli Yapılandırma

tenantId

Image Chat'e Özgü Seçenekler

urlId

chatSquarePercentage

hasDarkBackground

commentCountUpdated

Miras Alınan Yapılandırma Seçenekleri

locale

readonly

sso and simpleSSO

maxReplyDepth

Dahili Yapılandırma

Hedef Öğe Esnekliği

Tam Örnek

Duyarlı Tasarım

Yüzde Tabanlı Konumlandırma

Duyarlı Düzenler için Faydalar

Görüntü Ölçeklendirme ve En-Boy Oranı

Sohbet Karesi Boyutlandırması

Mobil Davranış

Dinamik Görüntü Yükleme

Cihazlar Arası Tutarlılık

Görünüm Penceresi (Viewport) Hususları

İçeriği Geleceğe Hazırlama

Özelleştirme

Karanlık Mod Desteği

Dinamik Karanlık Mod

Özel Stil ile CSS

Sohbet Karesi Boyutlandırma

Mobil Davranış

Sohbet Penceresi Görünümü

Tembel Başlatma

Yerelleştirme

Devralınan Özelleştirme Seçenekleri

Özel Yazı Tipleriyle Çalışma

İşaretçi Görsel Tasarımı

Canlı Senkronizasyon

Real-Time Updates

How WebSocket Sync Works

Broadcast ID System

Connection Resilience

Bandwidth Considerations

Cross-Tab Synchronization

Security

Offline Behavior

Performance Impact

Collaborative Use Cases

API Referansı

API Overview

Base URL

Authentication

Get All Conversations

Endpoint

Parameters

Response