FastComments.com

Menu Icon

Dil 🇹🇷 Türkçe
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Başlarken

Başlarken
Örnekler
Çevrimiçi Kitaplara Canlı Yorum Ekleme

Yapılandırma

Yapılandırma Seçenekleri
Metin Seçimi Davranışı

Özelleştirme

Özelleştirme

Gelişmiş

Canlı Eşitleme
API Referansı

Belgeler, Kitaplar vb. İçin Satır İçi Canlı Yorumlar Ekleme

FastComments Collab Chat, kullanıcıların web sitenizdeki herhangi bir metin içeriğini vurgulayıp not eklemelerine olanak tanır ve belirli metin seçimlerine bağlı konu dizileri şeklinde tartışmalar oluşturur. Kullanıcılar kelimeleri, cümleleri veya tüm paragrafları seçerek içeriğiniz içinde doğrudan işbirlikçi konuşmalar başlatabilir.

Bu özellik, editoryal geri bildirim, ortak okuma ortamları, eğitim platformları, belge incelemesi ve belirli metne bağlı bağlamsal tartışmalar istediğiniz her senaryo için idealdir.

Note that these docs are specific to the Collab Chat functionality. You can add commenting for content with lots of pages, like Books, with thread-per-page, without using collab chat. FastComments also does not charge per-page or per-thread. Collab Chat is specifically when you want to allow users to select text and comment on the highlighted section of text.

You can see an example here.

Başlarken Internal Link

Hızlı Başlangıç

Collab Chat ile başlamak basittir. Sayfanıza FastComments Collab Chat betiğini, açıklama yapmak istediğiniz metni içeren bir HTML öğesini ve Tenant ID'niz ile bir yapılandırma nesnesini eklemeniz yeterlidir.

Kurulum

Collab Chat betiğini sayfanıza ekleyin:

Collab Chat Betiğini Yükleme
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3

Temel Uygulama

Here's a minimal example:

Temel Collab Chat Uygulaması
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat</title>
6</head>
7<body>
8 <!-- İçerik kapsayıcınız -->
9 <div id="article-content" style="min-height: 500px;">
10 <h1>My Article Title</h1>
11 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
12 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
13 </div>
14
15 <!-- Collab Chat betiğini yükleyin -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Collab Chat'i başlatın -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

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 hedef öğe içindeki herhangi bir metni seçebilir. Kısa bir gecikmeden sonra (masaüstünde 3.5 saniye), bir istem görünür ve tartışma başlatmalarına izin verir. Bir tartışma oluşturulduğunda, metin üzerinde görsel bir vurgu görünür. Diğer kullanıcılar vurgunun üzerine gelerek veya tıklayarak tartışmayı görüntüleyebilir ve katılabilir. Tüm tartışmalar tüm ziyaretçiler arasında gerçek zamanlı olarak senkronize edilir.

Canlı Demo

Collab Chat'i aksiyonda canlı demo sayfamızda görebilirsiniz.

Sonraki Adımlar

Artık temel kurulum çalıştığına göre, görünüm ve davranışı Yapılandırma Seçenekleri kılavuzunda özelleştirebilirsiniz. Metin Seçimi Davranışı kılavuzuna bakarak metin seçiminin nasıl çalıştığını anlayın. Stil ve koyu mod desteği hakkında bilgi için Özelleştirme kılavuzuna göz atın. Gelişmiş entegrasyonlar için API Referansını inceleyin.

Önyüz Kütüphaneleri

Tüm FastComments önyüz kütüphanelerinde (react, vue, angular, vb.) Collab Chat bulunur.

Örnekler Internal Link

Temel Örnek

Collab Chat'i kullanmanın en basit yolu tek bir içerik kapsayıcısını hedeflemektir. Bu örnek, bir makalede metin açıklamalarını nasıl etkinleştireceğinizi gösterir:

Temel Collab Chat Örneği
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat</title>
6</head>
7<body>
8 <div id="article-content" style="min-height: 500px">
9 <h1>My Article Title</h1>
10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
12 </div>
13
14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
15 <script>
16 FastCommentsCollabChat(document.getElementById('article-content'), {
17 tenantId: 'demo'
18 });
19 </script>
20</body>
21</html>
22

Özel URL Kimliği ile Örnek (Kitap Sayfası, Makale, vb.)

Varsayılan olarak, Collab Chat konuşmaları tanımlamak için sayfa URL'sini, öğe yolunu ve metin aralığını kullanır. Konuşmaların nasıl gruplanacağı üzerinde daha fazla kontrol sahibi olmak istiyorsanız özel bir urlId sağlayabilirsiniz:

Özel URL Kimliği ile Collab Chat
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 FastCommentsCollabChat(document.getElementById('article-content'), {
5 tenantId: 'demo',
6 urlId: 'book-one-page-2'
7 });
8</script>
9

URL yapınız değişse bile aynı konuşmaları korumak istiyorsanız veya aynı konuşma açıklamalarını birden fazla sayfada paylaşmak istiyorsanız bu kullanışlıdır.

Karanlık Mod ile Örnek

Sitenizin koyu bir arka planı varsa, sohbet UI'sinin doğru görünmesini sağlamak için karanlık mod desteğini etkinleştirin:

Karanlık Mod ile Collab Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - Dark Mode</title>
6 <style>
7 body {
8 background-color: #1a1a1a !important;
9 color: #e0e0e0 !important;
10 font-family: system-ui, -apple-system, sans-serif;
11 padding: 20px;
12 margin: 0;
13 }
14 #article-content {
15 max-width: 800px;
16 margin: 0 auto;
17 background-color: #2d2d2d;
18 padding: 20px;
19 border-radius: 8px;
20 }
21 h1 {
22 color: #ffffff !important;
23 }
24 p {
25 color: #e0e0e0 !important;
26 line-height: 1.6;
27 }
28 .fastcomments-collab-chat-top-bar {
29 background-color: #2d2d2d !important;
30 color: #e0e0e0 !important;
31 border-bottom: 1px solid #444 !important;
32 }
33 </style>
34</head>
35<body>
36 <div id="article-content" style="min-height: 500px">
37 <h1>My Article Title</h1>
38 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
39 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
40 </div>
41
42 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
43 <script>
44 FastCommentsCollabChat(document.getElementById('article-content'), {
45 tenantId: 'demo',
46 hasDarkBackground: true
47 });
48 </script>
49</body>
50</html>
51

Üst Çubuk Devre Dışı Örneği

Varsayılan olarak, Collab Chat kullanıcı sayısı ve tartışma sayısı ile bir üst çubuk gösterir. Bunu devre dışı bırakabilirsiniz:

Üst Çubuk Devre Dışı Collab Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - No Top Bar</title>
6</head>
7<body>
8 <div id="article-content" style="min-height: 500px">
9 <h1>My Article Title</h1>
10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
12 </div>
13
14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
15 <script>
16 FastCommentsCollabChat(document.getElementById('article-content'), {
17 tenantId: 'demo',
18 topBarTarget: null
19 });
20 </script>
21</body>
22</html>
23

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

Yorum eklendiğinde veya güncellendiğinde commentCountUpdated geri çağırmasını kullanarak takip edebilirsiniz:

Yorum Sayısı Geri Çağırması ile Collab Chat
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 FastCommentsCollabChat(document.getElementById('article-content'), {
5 tenantId: 'demo',
6 commentCountUpdated: function(count) {
7 console.log('Total comments:', count);
8 document.getElementById('comment-badge').textContent = count;
9 }
10 });
11</script>
12

Birden Çok Bölümle Örnek

Sayfanızdaki birden çok ayrı bölümde Collab Chat başlatabilirsiniz. Her bölümün kendi bağımsız açıklamaları olur:

Birden Çok Bölümde Collab Chat
Copy Copy
1
2<div id="intro-section">
3 <h2>Introduction</h2>
4 <p>Content for the introduction...</p>
5</div>
6
7<div id="main-section">
8 <h2>Main Content</h2>
9 <p>Content for the main article...</p>
10</div>
11
12<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
13<script>
14 // Giriş bölümü için başlat
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Ana bölüm için başlat
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Çevrimiçi Kitaplara Canlı Yorum Ekleme Internal Link

İsterseniz Collab Chat'i sayfa başına başlatabilir ve sayfa başına ayrı konuşma dizilerine sahip olabilirsiniz, sadece urlId parametresine book-one-page1 gibi bir değer iletmeniz yeterlidir. Bu yapılandırma normal yorum bileşeni için de çalışır.

Yapılandırma Seçenekleri Internal Link

Overview

FastComments Collab Chat, standart FastComments yorum bileşenini genişletir; böylece temel bileşenden tüm yapılandırma seçeneklerini miras alır ve metin açıklamalarına özgü birkaç seçenek ekler.

Required Configuration

tenantId

FastComments Tenant ID'niz gereklidir. Bunu FastComments dashboard sayfanızda bulabilirsiniz.

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo'
4});
5

Collab Chat Specific Options

urlId

Varsayılan olarak, Collab Chat her konuşma için sayfa URL'si, öğeye giden DOM yolu ve seçili metin aralığına dayanarak benzersiz bir tanımlayıcı oluşturur. Bunu özel bir urlId ile geçersiz kılabilirsiniz.

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 urlId: 'my-custom-page-id'
5});
6

Bu, URL yapınız değişse bile aynı konuşmaları korumak istediğinizde veya açıklamaları birden çok sayfa arasında paylaşmak istediğinizde kullanışlıdır.

topBarTarget

Kullanıcı sayısını ve tartışma sayısını gösteren üst çubuğun görüntülenmesini kontrol eder. Üst çubuğu tamamen devre dışı bırakmak için null olarak ayarlayın veya belirli bir konuma render etmek için bir DOM öğesi sağlayın.

Yapılandırma Örneği
Copy Copy
1
2// Üst çubuğu devre dışı bırak
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Üst çubuğu özel bir konumda göster
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Sayfanız koyu bir arka plana sahip olduğunda koyu mod stilini etkinleştirin. Bu tespit otomatik olarak yapılır, ancak üzerine yazmak isteyebilirsiniz.

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 hasDarkBackground: true
5});
6

commentCountUpdated

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

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 commentCountUpdated: function(count) {
5 console.log('Total comments:', count);
6 document.getElementById('badge').textContent = count;
7 }
8});
9

Inherited Configuration Options

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

locale

Bileşen UI'sı için dili ayarlayın. FastComments onlarca dili destekler.

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // İspanyolca
5});
6

readonly

Tüm konuşmaları salt okunur yapın. Kullanıcılar mevcut açıklamaları görüntüleyebilir ancak yeni oluşturamaz veya yanıtlayamaz.

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 readonly: true
5});
6

sso and simpleSSO

Tek Oturum Açma (Single Sign-On) kullanarak kimlik doğrulama sisteminizle entegrasyon sağlayın.

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 sso: {
5 // SSO yapılandırması
6 }
7});
8

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

maxReplyDepth

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

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // 3 seviyeye kadar iç içe izin ver
5});
6

Internal Configuration

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

productId Collab Chat için otomatik olarak 3 olarak ayarlanır. floating-chat uzantısı sohbet penceresi işlevselliğini sağlamak için otomatik olarak yüklenir. Bileşen, mobil cihazları (genişliği 768px'in altında olan ekranlar) otomatik olarak algılar ve UI'ı buna göre ayarlar.

Complete Example

Aşağıda birden çok yapılandırma seçeneğini bir arada gösteren bir örnek bulunmaktadır:

Yapılandırma Örneği
Copy Copy
1
2FastCommentsCollabChat(document.getElementById('article'), {
3 tenantId: 'demo',
4 urlId: 'my-article-v2',
5 hasDarkBackground: false,
6 locale: 'en',
7 topBarTarget: document.getElementById('custom-header'),
8 commentCountUpdated: function(count) {
9 document.title = count > 0 ? `(${count}) My Article` : 'My Article';
10 },
11 sso: {
12 // SSO yapılandırmanız
13 },
14 maxReplyDepth: 1
15});
16

Tüm kullanılabilir yapılandırma seçeneklerinin tam listesi için, temel FastComments yapılandırma belgelerine bakın.

Metin Seçimi Davranışı Internal Link

Metin Seçimi Nasıl Çalışır

Kullanıcılar Collab Chat konteyneri içinde metin seçtiğinde, widget bu seçimi yakalar ve bir tartışma başlatmalarına izin verir. Seçim tek bir kelime kadar küçük veya farklı öğelere yayılmış birden çok paragraf kadar büyük olabilir.

Seçim Gecikmesi

Masaüstü cihazlarda, bir kullanıcı metin seçtiği ile tartışma isteminin göründüğü zaman arasında 3.5 saniyelik bir gecikme vardır. Bu, kullanıcıların yalnızca metni kopyalamak veya okumak için vurgularken kullanıcı arayüzünün titremesini önler. Mobil cihazlarda, istem hemen görünür çünkü dokunmatik ekranlarda metin seçimi daha kasıtlıdır.

Benzersiz Konuşma Kimlikleri

Her konuşma, sayfa URL'sini, DOM öğe yolunu ve serileştirilmiş metin aralığını birleştiren benzersiz bir urlId alır. Bu, her metin seçiminin daha sonra tekrar bulunabilecek ayrı bir konuşma oluşturmasını sağlar.

Yapılandırmanızda özel bir urlId sağlarsanız, nihai tanımlayıcıyı oluşturmak için bu, öğe yolu ve metin aralığı ile birleştirilecektir.

Görsel Vurgular

Belirli bir metin seçimi için bir tartışma mevcut olduğunda, o metin görsel olarak vurgulanır. Vurgu, arka plan renkleri kullanılarak uygulanır ve üzerine gelindiğinde veya ilişkili sohbet penceresi açık olduğunda görünür.

Vurgulama sistemi, seçilen metni stillendirilebilen özel bir elementle sarmalayarak çalışır. Bu yaklaşım, alttaki HTML yapısı karmaşık olsa bile vurguların doğru kalmasını sağlar.

Sohbet Penceresi Konumlandırması

Bir kullanıcı bir vurgunun üzerine tıkladığında veya yeni bir not oluşturduğunda, seçilen metnin yakınında bir sohbet penceresi görünür. Widget, bu pencere için mevcut görünüm alanı temelinde en iyi konumu otomatik olarak hesaplar.

Konumlandırma sistemi, sohbet penceresinin vurgudan hangi yönde genişleyeceğini belirtmek için to-right, to-left, to-top ve to-bottom gibi CSS sınıflarını kullanır. Mobil cihazlarda (768px'den dar ekranlarda), sohbet penceresi daha iyi kullanılabilirlik için her zaman tam ekran olarak görünür.

Sohbet Penceresi Boyutları

Sohbet pencereleri masaüstünde 410px genişliğindedir, 20px boşluk ve vurgulanan metne işaret eden 16px görsel bir oka sahiptir. Bu boyutlar tutarlı davranışı sağlamak için sabittir, ancak görünümü CSS ile özelleştirebilirsiniz.

Elemanlar Arası Seçimler

Kullanıcılar bir HTML öğesinin ortasından diğerinin başına kadar uzanan gibi birden çok HTML öğesini kapsayan metin seçebilirler. Aralık serileştirme sistemi bunu doğru şekilde işler ve öğe sınırları boyunca seçilen tüm metni vurgular.

Tarayıcı Uyumluluğu

Metin seçimi sistemi, tüm modern tarayıcılarda desteklenen standart window.getSelection() API'sini kullanır. Eski Internet Explorer sürümleri için uyumluluk amacıyla document.selection'a geri dönüş yapılır.

Seçimin Kalıcılığı

Bir metin seçimi için bir konuşma oluşturulduktan sonra, sayfa yeniden yüklense bile o açıklama (anotasyon) kalır. Serileştirilmiş aralık ve DOM yolu, kullanıcılar sayfaya geri döndüğünde widget'ın vurguları tam olarak aynı konumda geri yüklemesine olanak tanır.

Bu, sayfa içeriğiniz stabil kaldığı sürece güvenilir şekilde çalışır. Metin içeriğini değiştirir veya HTML yapınızı yeniden düzenlerseniz, mevcut açıklamalar metinle doğru şekilde hizalanmayabilir. Bu nedenle, aktif açıklamaları olan sayfalarda büyük içerik değişikliklerinden kaçınmak veya içerik değişiklikleri gerekli olduğunda açıklamaları taşımayı düşünmek en iyisidir.

Özelleştirme Internal Link

Karanlık Mod Desteği

Dinamik Karanlık Mod

Sitenizin karanlık modu body öğesine .dark sınıfı eklenerek kontrol ediliyorsa, Collab Chat kullanıcı arayüzü bunu yeniden başlatma gerektirmeden otomatik olarak dikkate alır. Widget'ın stilleri bu sınıfın varlığına tepki verecek şekilde tasarlanmıştır.

Karanlık Modu CSS Örneği
Copy Copy
1
2/* Karanlık mod CSS'iniz */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

CSS ile Özel Stil

Vurgulamalar, sohbet pencereleri ve diğer öğelerin görünümünü CSS kullanarak özelleştirebilirsiniz. Widget, stil sayfanızda hedefleyebileceğiniz belirli sınıflar ekler.

Metin vurgulamaları FastComments yorum balonu stil sistemi kullanır, bu nedenle standart yorum widget'ına uyguladığınız herhangi bir özelleştirme Collab Chat'i de etkileyecektir.

Üst Çubuk Özelleştirme

Üst çubuk çevrimiçi kullanıcı sayısını ve tartışma sayısını gösterir. Konumunu topBarTarget olarak özel bir öğe sağlayarak özelleştirebilirsiniz:

Özel Üst Çubuk Konumu
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Veya tamamen devre dışı bırakmak için null olarak ayarlayabilirsiniz:

Üst Çubuğu Devre Dışı Bırak
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Mobil Davranışı

768px'den daha dar ekranlarda Collab Chat otomatik olarak mobil için optimize edilmiş bir düzene geçer. Sohbet pencereleri metnin yanında kayan yerine tam ekran görünür ve daha anında etkileşim için seçim gecikmesi kaldırılır.

Bu davranış dahili olarak mevcuttur ve herhangi bir yapılandırma gerektirmez. Widget ekran boyutunu otomatik olarak algılar ve buna göre ayarlar.

Sohbet Penceresi Görünümü

Sohbet pencereleri masaüstünde 410px genişliğindedir ve vurgulanan metne işaret eden 16px'lik bir ok içerir. Pencereler, to-right, to-left, to-top ve to-bottom gibi konumlandırma sınıflarını kullanarak kullanılabilir görüntüleme alanı alanına 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ı kullanır, bu nedenle uyguladığınız tüm genel özelleştirmeleri miras alır.

Yerelleştirme

Collab Chat, standart FastComments widget'ı ile aynı yerelleştirme seçeneklerinin tamamını destekler. Kullanıcı arayüzü metnini farklı dillerde göstermek için locale seçeneğini ayarlayın:

Yerel Ayarı Belirle
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // İspanyolca
5});
6

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

Devralınan Özelleştirme Seçenekleri

Collab Chat, standart yorum widget'ını genişlettiği için temel widget'tan tüm özelleştirme seçeneklerini devralır. Buna özel CSS sınıfları, özel çeviriler, avatar özelleştirmesi, tarih biçimlendirme ve çok daha fazlası dahildir.

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

Özel Yazı Tipleri ile Çalışma

Eğer siteniz özel yazı tipleri kullanıyorsa, Collab Chat kullanıcı arayüzü sayfanızın CSS'inden bu yazı tiplerini devralır. Bir widget özelleştirme kuralı oluşturmanız ve o kural içindeki özel CSS'e gerekli yazı tiplerini @import etmeniz gerekebilir eğer yüzen sohbet penceresinin aynı yazı tiplerini kullanmasını istiyorsanız.

Canlı Eşitleme Internal Link

Gerçek Zamanlı Güncellemeler

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

WebSocket Senkronizasyonu Nasıl Çalışır

Collab Chat başlatıldığında, bileşen 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 sayfayla ilgili güncellemeleri dinler.

WebSocket sistemi Collab Chat için üç tür yayın mesajı kullanır. Sayfada birisi yeni bir açıklama oluşturduğunda new-text-chat olayı tetiklenir. Birisi mevcut bir konuşmayı güncellediğinde updated-text-chat olayı tetiklenir. Birisi bir açıklamayı sildiğinde deleted-text-chat olayı tetiklenir.

Yayın ID Sistemi

Kullanıcıların kendi eylemlerinin kendilerine geri yayınlanmasıyla oluşan yankı etkilerini önlemek için her güncelleme benzersiz bir broadcastId içerir. Bir kullanıcı bir açıklama 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, kaynağı oluşturan istemci kendi broadcastId ile eşleştiği için güncellemeyi yoksayar.

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

Canlı Kullanıcı Sayısı

Üst çubuk, şu anda sayfayı görüntüleyen kullanıcı sayısını gösterir. Bu sayı, kullanıcılar katılıp ayrıldıkça gerçek zamanlı olarak güncellenir. Kullanıcı sayısı aynı WebSocket bağlantısı üzerinden sağlanır ve bağlantı ve bağlantı kesme olaylarına göre otomatik olarak artıp azalır.

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

Ağ sorunları veya sunucu bakımı nedeniyle WebSocket bağlantısı koparsa, bileşen otomatik olarak yeniden bağlanmaya çalışır. Yeniden bağlanma süresince kullanıcılar mevcut açıklamalarla etkileşime devam edebilir, ancak bağlantı yeniden kurulana kadar diğer kullanıcıların gerçek zamanlı güncellemelerini göremeyeceklerdir.

Yeniden bağlanıldığında, bileşen kaçırılmış güncelleme olmadığından emin olmak için yeniden senkronize olur. Bu, kullanıcı müdahalesi gerektirmeden şeffaf şekilde gerçekleşir.

Bant Genişliği Hususları

WebSocket mesajları hafiftir ve durumu senkronize etmek için gereken temel bilgileri içerir. Yeni bir açıklama oluşturmak genellikle 1KB'den az bant genişliği kullanır. Sistem ayrıca yüksek etkinlik dönemlerinde mesaj sıklığını azaltmak için akıllı paketleme (batching) içerir.

FastComments kontrol panelinizdeki kullanım ölçümleri, gerçek zamanlı senkronizasyon etkinliğini siteleriniz genelinde izlemeniz için pubSubMessageCount ve pubSubBandwidth öğelerini izler.

Sekmeler Arası Senkronizasyon

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

Güvenlik

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

API Referansı Internal Link

API Genel Bakış

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

Bu uç noktalar, kullanıcıları tarayıcı çerezleri aracılığıyla kimlik doğrular. API anahtarları kullanılmaz. Kullanıcıların bu uç noktalara erişmek için tarayıcılarında FastComments'a giriş yapmış olmaları gerekir.

Temel URL

Tüm Collab Chat API uç noktaları şunun altındadır:

Temel URL
Copy Copy
1
2https://fastcomments.com/comment-collab-chats
3

Kimlik Doğrulama

Bu uç noktalar, kullanıcıları tarayıcı çerezleri aracılığıyla kimlik doğrular. API anahtarları kullanılmaz. Kullanıcıların bu uç noktalara erişmek için tarayıcılarında FastComments'a giriş yapmış olmaları gerekir.

Tüm Konuşmaları Getir

Belirli bir sayfa için tüm metin konuşmalarını alın.

Uç Nokta

GET Uç Noktası
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Parametreler

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

urlId (sorgu parametresi, gerekli) konuşmaları almak istediğiniz sayfanın tanımlayıcısıdır.

Yanıt

Yanıt, API durumunu, kimlik doğrulandıysa geçerli kullanıcı oturum bilgilerini, ID'leri, URL'leri ve metin aralıkları ile bir 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ı gösteren bir bayrağı ve canlı senkronizasyon için tenantIdWS, urlIdWS ve userIdWS dahil olmak üzere WebSocket bağlantı ayrıntılarını içerir.

Örnek İstek

GET İstek Örneği
Copy Copy
1
2curl "https://fastcomments.com/comment-collab-chats/demo?urlId=my-article-page" \
3 --cookie "your-session-cookie"
4

Örnek Yanıt

GET Yanıt Örneği
Copy Copy
1
2{
3 "status": "success",
4 "user": {
5 "id": "user123",
6 "username": "john_doe"
7 },
8 "conversations": [
9 {
10 "_id": "conv123",
11 "urlId": "my-article-page:p:0:15,0:45{abc123}",
12 "range": "0:15,0:45{abc123}"
13 },
14 {
15 "_id": "conv456",
16 "urlId": "my-article-page:h1:5:20,5:35{def456}",
17 "range": "5:20,5:35{def456}"
18 }
19 ],
20 "urlIdClean": "my-article-page",
21 "isSiteAdmin": false,
22 "tenantIdWS": "demo",
23 "urlIdWS": "my-article-page",
24 "userIdWS": "user123"
25}
26

Konuşma Oluştur

Belirli bir metin seçimi için yeni bir metin konuşması oluşturun.

Uç Nokta

POST Uç Noktası
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Parametreler

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

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

urlId (string, gerekli) sayfanın temel tanımlayıcısıdır.

urlIdWithRange (string, gerekli) URL ile metin aralığının birleşimidir; örneğin my-page:p:0:15,0:45{abc123}.

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

selector (string, gerekli) seçili metni içeren elementi gösteren DOM yoludur.

range (string, gerekli) startOffset:endOffset,startOffset:endOffset{checksum} formatında serileştirilmiş metin aralığıdır.

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

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

Yanıt

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

Örnek İstek

POST İstek Örneği
Copy Copy
1
2curl -X POST "https://fastcomments.com/comment-collab-chats/demo" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "urlId": "my-article-page",
7 "urlIdWithRange": "my-article-page:p:0:15,0:45{abc123}",
8 "pageTitle": "My Article Title",
9 "selector": "div#article > p:nth-child(2)",
10 "range": "0:15,0:45{abc123}",
11 "createdFromCommentId": "comment789",
12 "broadcastId": "550e8400-e29b-41d4-a716-446655440000"
13 }'
14

Örnek Yanıt

POST Yanıt Örneği
Copy Copy
1
2{
3 "status": "success",
4 "createdChatId": "conv789"
5}
6

Konuşmayı Sil

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

Uç Nokta

DELETE Uç Noktası
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Parametreler

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

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

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

Örnek İstek

DELETE İstek Örneği
Copy Copy
1
2curl -X DELETE "https://fastcomments.com/comment-collab-chats/demo/conv789" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
7 }'
8

Örnek Yanıt

DELETE Yanıt Örneği
Copy Copy
1
2{
3 "status": "success"
4}
5

Oran Sınırlandırması

Bu uç noktalar standart FastComments API oran sınırlarına tabidir. Oran sınırı ara yazılımı, normal kullanım desenlerine izin verirken kötüye kullanımı önlemek için kiracı başına uygulanır.

Hata Yanıtları

Tüm uç noktalar standart HTTP durum kodlarını 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ı ise oran sınırının aşıldığını gösterir.

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

Hata Yanıtı Örneği
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

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 analizleri altında izleyebilirsiniz.

Sorularınız mı var?

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

Canlı örnekler için, üretimde Collab Chat kullanan Govscent.org'a göz atın.

Bu Rehbere Katkıda Bulun