Resim Sohbeti

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'larda veya ekran görüntülerinde belirli öğeleri tartışması gereken tasarım geri bildirimleri için mükemmel çalışır. Ürün inceleme siteleri, müşterilerin ürün fotoğraflarında görünen belirli özellikleri tartışmasını sağlayabilir. Eğitim platformları, diyagramları, haritaları veya bilimsel görselleri tartışmak için kullanabilir. Fotoğraf galerileri, konuma özgü yorumlarla etkileşimli hale gelebilir. Emlak siteleri, ziyaretçilerin mülk fotoğraflarında görünen belirli özellikleri tartışmasını sağlayabilir.

Hızlı Başlangıç

Image Chat ile başlamak basittir. FastComments Image Chat betiğine, bir görsel içeren bir image öğesine veya konteynere ve Tenant ID'nizi içeren bir yapılandırma nesnesine ihtiyacınız var.

Kurulum

Image Chat betiğini sayfanıza 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>
    <!-- Your image -->
    <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
    <!-- Load the Image Chat script -->
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <!-- Initialize Image Chat -->
    <script>
        FastCommentsImageChat(document.getElementById('my-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

Henüz değilse 'demo' değerini gerçek FastComments Tenant ID'nizle değiştirin; bunu FastComments panonuzda bulabilirsiniz.

Nasıl Çalışır

Başlatıldıktan sonra, kullanıcılar görselin herhangi bir yerine tıklayabilir. Bir tıklama gerçekleştiğinde, 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 onlara 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, böylece işaretçiler görsel yeniden boyutlandırıldığında veya farklı ekran boyutlarında görüntülendiğinde bile doğru konumda kalır.

Canlı Demo

Image Chat'i çalışır halde canlı demo sayfamızda görebilirsiniz.

Sonraki Adımlar

Artık temelleri çalışır hale getirdiğinize 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 Özelleştirme kılavuzundan bilgi edinin. Gelişmiş entegrasyonlar için API Referansını inceleyin.

Frontend Kütüphaneleri

Tüm FastComments frontend kütüphanelerinde (react, vue, angular vb.) Image Chat bulunur.

Ö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 widget'ını genişletir; böylece temel widget'ın tüm yapılandırma seçeneklerini devralır ve görüntü ek açıklamalarına özgü birkaç seçenek ekler.

Gerekli Yapılandırma

tenantId

FastComments Tenant ID'niz gereklidir. Bunu FastComments panonuzda 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 dayalı 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ğinde ancak aynı konuşmaları korumak istediğinizde veya ek açıklamaları birden fazla sayfada paylaşmak istediğinizde kullanışlıdır.

chatSquarePercentage

Tıklanabilir sohbet işaretçilerinin boyutunu, görüntü genişliğinin yüzdesi olarak kontrol eder. Varsayılan %5'tir, yani her işaretçi görüntü genişliğinin %5'idir.

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

Daha küçük değerler, detaylı görüntüler için daha iyi çalışan, daha az dikkat dağıtan işaretçiler oluşturur. Daha büyük değerler, işaretçileri yoğun görüntülerde veya mobil cihaz kullanan kullanıcılar için daha kolay görünür ve tıklanabilir hale getirir.

hasDarkBackground

Sayfanız koyu bir arka plana sahipken koyu mod stili etkinleştirin.

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

commentCountUpdated

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

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

Devralınan Yapılandırma Seçenekleri

Image Chat standart yorum widget'ını genişlettiğinden, temel FastComments widget'ından herhangi bir yapılandırma seçeneğini kullanabilirsiniz. İşte yaygın olarak kullanılan bazı seçenekler:

locale

Widget UI'sinin dilini ayarlayın. FastComments onlarca dili destekler.

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

readonly

Tüm konuşmaları salt okunur yapın. Kullanıcılar mevcut işaretçileri ve tartışmaları görüntüleyebilir ancak yenilerini oluşturamaz veya yanıt veremez.

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

sso ve simpleSSO

Tek Oturum Açma (Single Sign-On) kullanarak kimlik doğrulama sisteminizle entegre olun.

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

Kimlik doğrulama seçenekleriyle ilgili tüm ayrıntılar için SSO belgelerine bakın.

maxReplyDepth

Yanıtların kaç seviye derine gidebileceğini kontrol edin. Varsayılan olarak, Image Chat bunu 0 olarak ayarlar, yani tüm yorumlar düzdür (iç içe yanıtlar yok). Dallı konuşmalar istiyorsanız bunu değiştirebilirsiniz.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // 3 seviyeye kadar iç içe geçmeye izin ver
});

Dahili Yapılandırma

Bu seçenekler Image Chat tarafından otomatik olarak ayarlanır ve geçersiz kılınmamalıdır:

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

Hedef Öğe Esnekliği

FastCommentsImageChat'in ilk parametresi, doğrudan bir <img> öğesi veya içinde görüntü bulunan bir kapsayıcı öğe olabilir:

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

// İçinde görüntü bulunan kapsayıcı
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);

Bir kapsayıcı öğe geçirirseniz widget, görüntüyü otomatik olarak bulur.

Tam Örnek

Birden fazla yapılandırma seçeneğini birlikte 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}) Ürün Fotoğrafı` : 'Ürün Fotoğrafı';
    },
    sso: {
        // SSO yapılandırmanız
    },
    maxReplyDepth: 1
});

Temel widget'tan devralınan tüm kullanılabilir yapılandırma seçeneklerinin tam 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

Gerçek Zamanlı Güncellemeler

Image Chat, tüm konuşmaları bağlı tüm kullanıcılar arasında gerçek zamanlı olarak senkronize etmek için WebSocket bağlantıları kullanır. Birisi yeni bir işaretleyici oluşturduğunda, yorum eklediğinde veya bir tartışmayı sildiğinde, aynı görüntüyü görüntüleyen diğer tüm kullanıcılar sayfayı yenilemeden güncellemeyi anında görür.

WebSocket Senkronizasyonu Nasıl Çalışır

Image Chat'i başlattığınızda, widget FastComments sunucularına bir WebSocket bağlantısı kurar. Bu bağlantı, kullanıcının oturumu boyunca açık kalır ve mevcut görüntüyle ilgili güncellemeleri dinler.

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

Yayın Kimliği Sistemi

Kullanıcıların kendi eylemlerinin kendilerine geri yayınlandığı yankı etkilerini önlemek için her güncelleme benzersiz bir broadcastId içerir. Bir kullanıcı bir işaretleyici oluşturduğunda veya güncellediğinde, istemcisi bu işlem için bir UUID oluşturur. WebSocket güncellemeyi tüm istemcilere geri yayınladığında, kaynak istemci, güncelleme kendi broadcastId değeriyle eşleştiği için onu yok sayar.

Bu, kullanıcıların değişikliklerini sunucu üzerinden gidiş-dönüşü beklemek zorunda kalmadan UI'da anında görmesini sağlarken, diğer tüm kullanıcıların da güncellemeyi almasını garanti eder.

Bağlantı Dayanıklılığı

WebSocket bağlantısı ağ sorunları veya sunucu bakımı nedeniyle kesilirse, widget otomatik olarak yeniden bağlanmayı dener. Yeniden bağlanma süresi boyunca kullanıcılar mevcut işaretleyicilerle etkileşime devam edebilir, ancak bağlantı yeniden kurulana kadar diğer kullanıcılardan gelen gerçek zamanlı güncellemeleri göremezler.

Yeniden bağlandıktan sonra, widget hiç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.

Bant Genişliği Hususları

WebSocket mesajları hafiftir ve durumu senkronize etmek için gereken yalnızca temel bilgileri içerir. Yeni bir işaretleyici 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şlem (batching) içerir.

FastComments panelindeki kullanım metrikleriniz pubSubMessageCount ve pubSubBandwidth değerlerini takip eder, böylece siteleriniz genelindeki gerçek zamanlı senkronizasyon etkinliğini izleyebilirsiniz.

Sekmeler Arası Senkronizasyon

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

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

Güvenlik

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

Çevrimdışı Davranış

Kullanıcılar tamamen çevrimdışıyken mevcut işaretleyicileri görüntülemeye devam edebilir, ancak yenilerini oluşturamaz veya başkalarından gelen güncellemeleri göremezler. Widget çevrimdışı durumu algılar ve uygun bir mesaj görüntüler.

Bir kullanıcı çevrimdışıyken bir işaretleyici oluşturmaya çalışır ve ardından tekrar çevrimiçi olursa, işlem veri tutarlılığını sağlamak için kuyruğa alınmak yerine başarısız olur. Kullanıcılar bağlantıları geri yüklendikten sonra işlemi yeniden denemelidir.

Performans Etkisi

WebSocket bağlantısının performans üzerindeki etkisi minimumdur. Güncelleme olmadığında bağlantı boşta kalır ve yalnızca etkinlik gerçekleştiğinde mesajları işler. Orta düzeyde işaretleyici etkinliğine sahip tipik bir görüntüde, WebSocket, görüntünün kendisini oluşturmaktan daha az CPU kullanır.

Aynı anda yüzlerce kullanıcıya ve yüksek işaretleyici oluşturma etkinliğine sahip sayfalarda, sistem bireysel istemci bağlantılarını etkilemeden performansı korumak için yatay olarak ölçeklenir.

İşbirliğine Dayalı Kullanım Senaryoları

Gerçek zamanlı senkronizasyon, Image Chat'i işbirliğine dayalı iş akışları için özellikle güçlü kılar. Tasarım ekipleri, herkes işaretleyici yerleşimlerini gerçek zamanlı görerek mockup'ları birlikte inceleyebilir. Müşteri destek ekipleri, sorunları belirlemek için ekran görüntülerini işbirliği içinde işaretleyebilir. Eğitim grupları, tüm katılımcıların birbirlerinin işaretleyicilerini oluşturuldukları anda 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 Genel Bakış

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

Tüm API endpoint'leri kimlik doğrulaması gerektirir ve standart FastComments API desenlerini takip eder. Bunlar, API anahtarları yerine tarayıcı çerezleri aracılığıyla kimlik doğrulaması yapan herkese açık endpoint'lerdir.

Temel URL

Tüm Image Chat API endpoint'leri şunun altındadır:

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

Kimlik Doğrulama

Bu endpoint'ler kullanıcıların kimliğini tarayıcı çerezleri aracılığıyla doğrular. API anahtarları kullanmazlar. Bu endpoint'lere erişmek için kullanıcıların tarayıcılarında FastComments'e giriş yapmış olmaları gerekir.

Tüm Konuşmaları Getir

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>

Parametreler

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

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

Yanıt

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

Örnek İstek

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

Örnek Yanıt

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

Konuşma Oluştur

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

Parametreler

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

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

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

windowUrlId (string, zorunlu) görüntü kaynağı ve koordinatlarla birleştirilmiş URL'dir, ö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) yüzde (0-100) olarak X koordinatıdır.

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

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

broadcastId (string, zorunlu) yankı etkilerini önlemek için canlı senkronizasyona yönelik bir UUID'dir.

Yanıt

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

Örnek İstek

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

Örnek Yanıt

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

Konuşma Sil

Mevcut bir görüntü konuşmasını silin. Bu endpoint yönetici veya moderatör izinleri gerektirir ya da konuşmanın kimliği doğrulanmış kullanıcı tarafından oluşturulmuş olması gerekir.

Endpoint

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

Parametreler

tenantId (yol parametresi, zorunlu) sizin 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.

Örnek İstek

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

Örnek Yanıt

{
  "status": "success"
}

Koordinat Sistemi

X ve Y koordinatları, görüntü boyutlarının yüzdeleri 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 sayılar içerebilir. Örneğin, x: 25.5, görüntünün sol kenarından %25,5 anlamına gelir.

Hız Sınırlandırma

Bu endpoint'ler standart FastComments API hız sınırlandırmaya tabidir. Hız sınırı middleware'ı, normal kullanım desenlerine izin verirken kötüye kullanımı önlemek için kiracı (tenant) başına uygulanır.

Hata Yanıtları

Tüm endpoint'ler standart HTTP durum kodlarını döndürür. 400 yanıtı geçersiz istek parametrelerini gösterir. 401 yanıtı kimlik doğrulamasının başarısız olduğu anlamına gelir. 403 yanıtı yetersiz izinleri gösterir. 404 yanıtı konuşmanın bulunamadığı anlamına gelir. 429 yanıtı hız sınırının aşıldığını gösterir.

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

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

Kullanım Takibi

Konuşma oluşturmak, conversationCreateCount kullanım metriğinizi artırır. Tüm WebSocket senkronizasyon etkinliği pubSubMessageCount ve pubSubBandwidth değerlerini artırır. Bu metrikleri FastComments kontrol panelinizde kullanım analitiği altında izleyebilirsiniz.

Sorularınız mı var?

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

Image Chat'in iş başındaki halini görmek için canlı demoyu demo sayfamızda inceleyin.

Dil 🇹🇷 Türkçe

Başlarken

Yapılandırma

Özelleştirme

Gelişmiş

Resim Sohbeti

Başlarken

Kullanım Senaryoları

Hızlı Başlangıç

Kurulum

Temel Uygulama

Nasıl Çalışır

Canlı Demo

Sonraki Adımlar

Frontend 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

Devralınan Yapılandırma Seçenekleri

locale

readonly

sso ve 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

Gerçek Zamanlı Güncellemeler

WebSocket Senkronizasyonu Nasıl Çalışır

Yayın Kimliği Sistemi

Bağlantı Dayanıklılığı

Bant Genişliği Hususları

Sekmeler Arası Senkronizasyon

Güvenlik

Çevrimdışı Davranış

Performans Etkisi

İşbirliğine Dayalı Kullanım Senaryoları

API Referansı

API Genel Bakış

Temel URL

Kimlik Doğrulama

Tüm Konuşmaları Getir

Endpoint

Parametreler