Чет за сарадњу

Основни пример

Најједноставнији начин коришћења Collab Chat-а је да циљате један контејнер садржаја. Овај пример показује како омогућити означавање текста на чланку:

Основни пример Collab Chat

Copy Run

1

2<!DOCTYPE html>

3<html>

4<head>

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

6</head>

7<body>

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

9 <h1>My Article Title</h1>

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

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

12 </div>

13

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

15 <script>

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

17 tenantId: 'demo'

18 });

19 </script>

20</body>

21</html>

22

Пример са прилагођеним URL ID (по страници књиге, чланку, итд.)

Према подразумеваним подешавањима, Collab Chat користи URL странице у комбинацији са путањом елемента и опсегом текста да идентификује разговоре. Можете обезбедити прилагођени urlId да бисте имали већу контролу над тим како се разговори групишу:

Collab Chat са прилагођеним URL ID

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-а промени, а желите да задржите исте разговоре, или ако желите да делите исте анотације разговора преко више страница.

Пример са тамним режимом

Ако ваш сајт има тамну позадину, омогућите подршку за тамни режим како бисте осигурали да кориснички интерфејс ћаскања изгледа исправно:

Collab Chat са тамним режимом

Copy Run

1

2<!DOCTYPE html>

3<html>

4<head>

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

6 <style>

7 body {

8 background-color: #1a1a1a !important;

9 color: #e0e0e0 !important;

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

11 padding: 20px;

12 margin: 0;

13 }

14 #article-content {

15 max-width: 800px;

16 margin: 0 auto;

17 background-color: #2d2d2d;

18 padding: 20px;

19 border-radius: 8px;

20 }

21 h1 {

22 color: #ffffff !important;

23 }

24 p {

25 color: #e0e0e0 !important;

26 line-height: 1.6;

27 }

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

29 background-color: #2d2d2d !important;

30 color: #e0e0e0 !important;

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

32 }

33 </style>

34</head>

35<body>

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

37 <h1>My Article Title</h1>

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

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

40 </div>

41

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

43 <script>

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

45 tenantId: 'demo',

46 hasDarkBackground: true

47 });

48 </script>

49</body>

50</html>

51

Пример са онемогућеном горњом траком

Према подразумеваним поставкама, Collab Chat приказује горњу траку са бројем корисника и бројем дискусија. Можете је онемогућити:

Collab Chat са онемогућеном горњом траком

Copy Run

1

2<!DOCTYPE html>

3<html>

4<head>

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

6</head>

7<body>

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

9 <h1>My Article Title</h1>

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

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

12 </div>

13

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

15 <script>

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

17 tenantId: 'demo',

18 topBarTarget: null

19 });

20 </script>

21</body>

22</html>

23

Пример са повратним позивом за број коментара

Можете пратити када се коментари додају или ажурирају помоћу commentCountUpdated повратног позива:

Collab Chat са повратним позивом за број коментара

Copy

1

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

3<script>

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

5 tenantId: 'demo',

6 commentCountUpdated: function(count) {

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

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

9 }

10 });

11</script>

12

Пример са више секција

Можете иницијализовати Collab Chat на више одвојених одељка ваше странице. Сваки одељак ће имати своје независне анотације:

Collab Chat на више секција

Copy

1

2<div id="intro-section">

3 <h2>Introduction</h2>

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

5</div>

6

7<div id="main-section">

8 <h2>Main Content</h2>

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

10</div>

11

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

13<script>

14 // Иницијализујте на уводном одељку

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

16 tenantId: 'demo',

17 urlId: 'my-article-intro'

18 });

19

20 // Иницијализујте на главном одељку

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

22 tenantId: 'demo',

23 urlId: 'my-article-main'

24 });

25</script>

26

Можете иницијализовати Collab Chat по страници ако желите, и имати одвојене нитове по страници, једноставно проследите параметру urlId вредност као што је book-one-page1. Ова конфигурација такође функционише за нормални видгет коментара.

Како одабир текста функционише

Када корисници одаберу текст унутар Collab Chat контејнера, видгет захвата тај избор и омогућава им да покрену дискусију. Избор може бити мали као једна реч или велики као више параграфа који се протежу кроз различите елементе.

Задршка при одабиру

На десктоп уређајима постоји задршка од 3.5 секунде између тренутка када корисник одабере текст и појављивања упита за дискусију. Ово спречава треперење корисничког интерфејса када корисници само истичу текст ради копирања или читања. На мобилним уређајима упит се појављује одмах јер је одабир текста на екрану осетљивом на додир обично намернији.

Јединствени идентификатори разговора

Сваки разговор добија јединствени urlId који комбинује URL странице, путању DOM елемента и серијализовани опсег текста. Ово осигурава да сваки избор текста креира посебан разговор који се може касније поново пронаћи.

Ако у вашој конфигурацији обезбедите прилагођени urlId, он ће се комбиновати са путањом елемента и опсегом текста да би се креирао коначни идентификатор.

Визуелно истицање

Када за одређени избор текста постоји дискусија, тај текст добија визуелно истицање. Истицање је реализовано коришћењем позадинских боја и појављује се при проласку курсора или када је повезани прозор ћаскања отворен.

Систем истакнућа ради тако што обмотава одабрани текст у посебан елемент који се може стилски прилагодити. Овај приступ осигурава да истакнућа остану тачна чак и када је основна HTML структура сложена.

Позиционирање прозора ћаскања

Када корисник кликне на истакнуто или креира нову белешку, прозор ћаскања се појављује близу одабраног текста. Видгет аутоматски израчунава најбољу позицију за овај прозор на основу расположивог простора у приказу (viewport).

Систем позиционирања користи CSS класе попут to-right, to-left, to-top и to-bottom да означи у ком правцу се прозор ћаскања треба проширити од истакнутог текста. На мобилним уређајима (екрани ширине мање од 768px), прозор ћаскања увек се појављује преко целог екрана за бољу употребљивост.

Димензије прозора ћаскања

Прозори ћаскања на десктопу имају ширину од 410px са размаком од 20px и визуелну стрелицу од 16px која показује на истицање текста. Ове димензије су фиксне ради доследног понашања, али можете прилагодити изглед помоћу CSS-а.

Одабири преко више елемената

Корисници могу одабрати текст који обухвата више HTML елемената, на пример истицање од средине једног параграфа до почетка другог. Систем серијализације опсега то правилно обрађује и истаћи ће сав одабрани текст чак и преко граница елемената.

Компатибилност са прегледачима

Систем одабира текста користи стандардни API window.getSelection() који је подржан у свим модерним прегледачима. За старије верзије Internet Explorer-а користи се document.selection као резервна опција за компатибилност.

Постојаност одабира

Када се за одабир текста креира разговор, та белешка остаје и ако се страница освежи. Серијализовани опсег и DOM пут омогућавају видгету да обнови истакнућа на истом месту када се корисници врате на страницу.

Ово поуздано функционише све док садржај ваше странице остане стабилан. Ако промените текст или реструктурирате HTML, постојеће белешке можда више неће бити правилно поравнане са текстом. Из тог разлога најбоље је избегавати велике измене садржаја на страницама са активним белешкама, или размислити о миграцији белешки када су измене садржаја неопходне.

Подршка за тамни режим

Динамичан тамни режим

Ако је тамни режим на вашој страници управљан додавањем класе .dark на body елемент, Collab Chat UI ће аутоматски поштовати то без потребе за поновном инициализацијом. Стилови видгета су дизајнирани да реагују на присуство ове класе.

Пример CSS за тамни режим

Copy

1

2/* Ваш CSS за тамни режим */

3body.dark {

4 background: #1a1a1a;

5 color: #ffffff;

6}

7

Прилагођавање стилова помоћу CSS-а

Можете прилагодити изглед означења, прозора за ћаскање и других елемената користећи CSS. Видгет додаје специфичне класе на које можете циљати у вашем стилском листу.

Означавање текста користи FastComments систем за стилизовање коментарских балона, тако да ће сва прилагођавања која сте применили на стандардни коментарски видгет такође утицати на Collab Chat.

Прилагођавање горње траке

Горња трака приказује број корисника који су на мрежи и број дискусија. Можете прилагодити њену позицију тако што ћете као topBarTarget доставити прилагођени елемент:

Прилагођена локација горње траке

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

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

5});

6

Или га у потпуности онемогућите тако што ћете га поставити на null:

Онемогући горњу траку

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 topBarTarget: null

5});

6

Понашање на мобилним уређајима

На екранима у ширини мањој од 768px, Collab Chat се аутоматски пребацује на мобилно-оптимизовани распоред. Прозори за ћаскање се појављују преко целог екрана уместо да леже поред текста, а кашњење при селекцији је уклоњено ради непосредније интеракције.

Ово понашање је уграђено и не захтева никакву конфигурацију. Видгет аутоматски детектује величину екрана и прилагођава се.

Изглед прозора за ћаскање

Прозори за ћаскање су ширине 410px на десктопу са стрелицом од 16px која показује на истакнути текст. Прозори се позиционирају аутоматски на основу расположивог простора у видљивом прозору, користећи позиционирајуће класе као што су to-right, to-left, to-top, и to-bottom.

Можете додати прилагођени CSS да прилагодите боје, фонтове, размаке или друга визуелна својства ових прозора. Прозори за ћаскање користе исту структуру компоненти као стандардни FastComments видгет, па наслеђују сва глобална прилагођавања која сте применили.

Локализација

Collab Chat подржава све исте опције локализације као стандардни FastComments видгет. Поставите опцију locale да бисте приказали текст корисничког интерфејса на различитим језицима:

Поставите локал

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 locale: 'es' // Шпански

5});

6

FastComments подржава десетине језика. Поставка локала утиче на сав текст корисничког интерфејса укључујући упите, дугмад и текст места за унос (placeholder).

Наслеђене опције прилагођавања

Пошто Collab Chat проширује стандардни коментарски видгет, он наслеђује све опције прилагођавања од основног видгета. Ово укључује прилагођене CSS класе, прилагођене преводе, прилагођавање аватара, форматирање датума и још много тога.

Погледајте главну документацију за прилагођавање FastComments за комплетну листу доступних опција прилагођавања.

Рад са прилагођеним фонтовима

Ако ваша страница користи прилагођене фонтове, Collab Chat UI ће наследити те фонтове из CSS-а ваше странице. Можда ћете морати да креирате правило за прилагођавање видгета и @import-ујете било које фонтове у прилагођеном CSS-у у том правилу ако желите да лебдећи прозор за ћаскање користи исте фонтове.

Ажурирања у реалном времену

Collab Chat користи WebSocket везе да синхронизује све разговоре у реалном времену међу свим повезаним корисницима. Када неко направи нову анотацију, дода коментар или обрише дискусију, сви остали корисници који гледају исту страницу виде ажурирање одмах, без освежавања.

Како функционише WebSocket синхронизација

Када иницијализујете Collab Chat, виџет успоставља WebSocket везу са FastComments серверима. Ова веза остаје отворена током трајања сесије корисника и слуша ажурирања везана за тренутну страницу.

WebSocket систем користи три врсте порука за емитовање за Collab Chat. Догађај new-text-chat се активира када неко направи нову анотацију на страници. Догађај updated-text-chat се активира када неко ажурира постојећи разговор. Догађај deleted-text-chat се активира када неко обрише анотацију.

Систем broadcast ID

Да би се спречили ефекти одјека где корисници виде сопствене акције које им се враћају, свако ажурирање садржи јединствени broadcastId. Када корисник направи или ажурира анотацију, његов клијент генерише UUID за ту операцију. Када WebSocket емитовање врати ажурирање свим клијентима, изворни клијент игнорише ажурирање јер се поклапа са његовим сопственим broadcastId.

Ово обезбеђује глатку интеракцију где корисници виде своје промене одмах у интерфејсу без чекања на повратни пут кроз сервер, а истовремено се осигурава да сви остали корисници добију ажурирање.

Број корисника уживо

Горња трака приказује број корисника који тренутно гледају страницу. Овај број се ажурира у реалном времену како корисници улазе и излазе. Број корисника се доставља преко исте WebSocket везе и аутоматски се повећава/смањује на основу догађаја повезивања и прекида везе.

Отпорност везе

Ако WebSocket веза падне због проблема са мрежом или одржавања сервера, виџет аутоматски покушава да се поново повеже. Током периода поновног повезивања, корисници и даље могу да комуницирају са постојећим анотацијама, али неће видети ажурирања у реалном времену од других корисника док веза не буде поново успостављена.

Када се поново повеже, виџет се ресинхронизује како би се осигурало да ниједно ажурирање није пропуштено. Ово се дешава транспарентно, без потребе за интервенцијом корисника.

Разматрања о пропусном опсегу

WebSocket поруке су лагане и садрже само суштинске информације потребне за синхронизацију стања. Креирање нове анотације обично користи мање од 1KB пропусног опсега. Систем такође укључује интелигентно груписање како би се смањила учесталост порука током периода високе активности.

Ваше метрике коришћења у FastComments контролном панелу прате pubSubMessageCount и pubSubBandwidth тако да можете да пратите активност синхронизације у реалном времену на својим сајтовима.

Синхронизација између картица

Ако корисник има исту страницу отворену у више картица прегледача, ажурирања у једној картици се одмах појављују у осталим картицама. Ово функционише преко истог механизма WebSocket синхронизације и не захтева никакву додатну конфигурацију.

Безбедност

WebSocket поруке се преносе преко сигурних веза (WSS) и укључују валидацију закупца како би се осигурало да корисници примају ажурирања само за разговоре које су овлашћени да виде. Сервер валидира све операције пре него што их емитова како би спречио неовлашћени приступ или манипулацију.