FastComments.com

Налаштування та конфігурація

Налаштування та конфігурація

Контекст

Тут ви знайдете детальну документацію щодо кожної з функцій та налаштувань, які підтримує віджет коментарів.

Ця документація охоплює основні концепції та детально розглядає кожну область функціональності, включно з інструкціями "як це зробити" та поширеними підводними каменями.

Наведено приклади коду з виділенням відповідних рядків. За потреби будуть надані знімки екрана сторінок конфігурації.

Приклади коду використовують нашу бібліотеку vanilla JavaScript, однак параметри конфігурації мають точно ті самі назви для всіх версій віджета коментарів (React, Vue тощо).

Більшість налаштувань та функцій, описаних у цьому посібнику, не потребують написання коду.

Відображення однакових коментарів на різних сторінках Internal Link

Оскільки параметр urlId дозволяє нам визначити, до якої сторінки або ідентифікатора прив'язані коментарі, ми можемо просто встановити urlId на те саме значення на цих сторінках.

The Same Comments on Multiple Pages
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "urlId": "https://example.com/source-page"
8}];
9</script>
10

Користувацькі шрифти Internal Link

FastComments призначений для налаштування, і шрифт, який використовують наші віджети, не є винятком.

За замовчуванням FastComments використовує system font stack, щоб виглядати якомога краще на широкому діапазоні пристроїв.

Щоб задати власні шрифти, дивіться Документація з Custom CSS.

Там ви знайдете спосіб визначити кастомний CSS, що дозволить вам задати бажані шрифти.

Як задати шрифт

Щоб перевизначити шрифт, ми рекомендуємо визначати ваш CSS, використовуючи селектори .fast-comments, textarea. Наприклад:

Приклад зовнішнього шрифту
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

Підтримка темних фонів (темний режим) Internal Link

За замовчуванням віджет коментарів FastComments автоматично визначає темний режим на більшості сайтів.

Коли виявлено темний режим, FastComments переключається з чорного тексту на білому фоні на білий текст на чорному фоні. Також змінюватимуться зображення.

Під час завантаження сторінки віджет намагатиметься визначити, наскільки темним є фон сторінки за віджетом коментарів. Це означає, що сторінка може мати білий фон, але якщо ви розмістите віджет коментарів всередині контейнера з чорним фоном, темний режим має все одно автоматично вмикатись, щоб зробити коментарі читабельними.

Проте механізм виявлення, який спирається на визначення "luminance", може не активувати темний режим тоді, коли ви цього хочете. Щоб примусово увімкнути його, встановіть прапорець hasDarkBackground у true таким чином:

Force Dark Background Mode
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "hasDarkBackground": true
8}];
9</script>
10

Посилання з коментарів на сторінки Internal Link

Коли надсилаються сповіщення електронною поштою або відображаються коментарі в інтерфейсах користувача, наприклад на сторінці модерації, корисно мати можливість посилатися з коментаря на сторінку, де він розміщений.

Якщо URL ID не завжди є ідентифікатором, то потрібно зберігати URL в іншому місці. Для цього служить властивість "url", яка визначена так:

Defining a Custom URL
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5"
8}];
9</script>
10

Поширений випадок використання — прив'язати тред коментарів до ідентифікатора, наприклад статті, а потім посилатися назад на конкретну сторінку, наприклад:

Defining Custom URL and URL IDs together
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

URL не очищується від типових маркетингових параметрів. За замовчуванням зберігається саме той URL, який є на поточній сторінці.

Визначення, яку сторінку відображати Internal Link

Під час отримання та відображення коментарів віджет коментарів має знати, з якої сторінки починати. За замовчуванням він починається з першої сторінки і відображає лише цю сторінку.

Якщо потрібно, точну сторінку, яку слід відобразити, можна передати віджету коментарів через налаштування startingPage.

Specifying The Page to Render
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": 1
8}];
9</script>
10

Зауважте, що нумерація сторінок починається з нуля, тому вищенаведений приклад відображає другу сторінку.

Перемикання гілок коментарів без перезавантаження сторінки Internal Link

Ми розглянули, як urlId — це ідентифікатор сторінки або статті, до яких прив'язані коментарі.

Також, нагадаємо, якщо urlId не визначено, він за замовчуванням прийматиме поточну URL-адресу сторінки.

А як бути з SPA, або односторінковими застосунками (Single-Page-Applications), де сторінка або вміст, до яких прив'язані коментарі, змінюється динамічно без повного перезавантаження сторінки?

Angular, React, Vue тощо

У наших бібліотеках, таких як Angular та React, достатньо оновити властивість urlId, передану віджету, щоб віджет коментарів оновився. Ви можете побачити це на прикладі React-додатку, наприклад, тут.

VanillaJS

Якщо ви використовуєте бібліотеку VanillaJS, це трохи складніше, оскільки немає фреймворку на кшталт Angular або React для обробки прив'язки даних або поширення стану.

Коли ви створюєте екземпляр віджету VanillaJS, він повертає деякі функції, які можна викликати для його оновлення.

Ось робочий приклад, де ми змінюємо хеш сторінки і оновлюємо віджет коментарів:

Приклад зміни хешу сторінки
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // Ми також оновлюємо url, щоб сповіщення могли посилатися на правильну сторінку
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

Вимкнути перенаправлення зображень Internal Link

За замовчуванням FastComments дозволяє користувачам завантажувати зображення. Коли користувач натискає на це зображення, FastComments за замовчуванням відкриває нову вкладку, щоб показати зображення у повному розмірі. Встановлення цього прапорця в true вимикає цю поведінку:

Disable Image Redirect
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "disableImageRedirect": true
8}];
9</script>
10

Якщо ви не плануєте самостійно перехоплювати натиск на зображення (див. onImageClicked), ми рекомендуємо поєднати це з певними стилями щоб прибрати вигляд того, що зображення можна натиснути.

Виділення нових коментарів Internal Link

FastComments пропонує кілька способів виділити нові коментарі.

По-перше й найголовніше, за замовчуванням коментарі, які спричинили внутрішнє сповіщення (відповіді, відповіді в тій же темі, або коментарі на сторінці на яку ви підписані), автоматично виділяються тим, що аватар користувача трохи світиться. Колір можна налаштувати через CSS використовуючи клас is-unread.

Коментарі, опубліковані протягом останніх 24 годин, мають застосований клас 24hr, який можна використовувати для стилізації.

Нарешті, будь-які нові живі коментарі, які з'являються в сесії користувача, будуть виділені протягом кількох секунд за допомогою анімації. Це робиться через is-live CSS клас і також може бути налаштоване.

Шаблони електронної пошти Internal Link

Електронні листи, які надсилає FastComments вашим клієнтам, можна налаштувати. Шаблон, логіка, та переклади — усе можна змінити. Текст можна налаштовувати для кожної локалі, а оформлення можна навіть змінювати для кожного домену. Дізнайтеся більше про власні шаблони електронних листів тут.

Нові живі коментарі внизу Internal Link

За замовчуванням нові коментарі в реальному часі з'являються вгорі списку коментарів у міру їх публікації.

Коли ця опція увімкнена, нові коментарі в реальному часі додаватимуться внизу списку. Це впливає на те, як коментарі з'являються під час публікації в реальному часі, коли користувачі переглядають гілку коментарів.

Нові коментарі в реальному часі внизу
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "newCommentsToBottom": true
8}];
9</script>
10

З увімкненим цим налаштуванням:

  • Нові коментарі, опубліковані іншими користувачами, з'являтимуться внизу списку коментарів
  • Користувачі бачитимуть, як нові коментарі з'являються під існуючими в реальному часі
  • Це впливає лише на оновлення коментарів у реальному часі — не на початкове завантаження сторінки
  • Це може допомогти зберегти потік читання, коли користувачі стежать за обговоренням

Зверніть увагу, що це налаштування впливає лише на те, де розміщуються нові коментарі в реальному часі в міру їх надходження. Воно не впливає на початковий порядок сортування під час завантаження сторінки.

Увімкнення нескінченної прокрутки Internal Link

За замовчуванням віджет FastComments автоматично змінює свою висоту, щоб вмістити всі видимі коментарі. Пагінація реалізується за допомогою кнопки "Показати наступні" в кінці поточної сторінки, оскільки ми виявили, що така взаємодія найбільше подобається більшості користувачів.

Однак є випадки, коли віддають перевагу нескінченному прокручуванню. Наприклад, ми використовуємо цю функцію в нашому продукті Stream Chat.

Ми можемо приховати кнопки "Показати наступні" і переключитися на нескінченне прокручування, встановивши прапорець enableInfiniteScrolling у true:

Enabling Infinite Scrolling
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true
8}];
9</script>
10

Це також вимагає додавання власного CSS. Додайте кастомні стилі для селектора .comments, щоб увімкнути прокручування, наприклад:

Увімкнення нескінченного прокручування
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

Повний робочий приклад буде таким:

Enabling Infinite Scrolling
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

У наведеному вище прикладі ми використовуємо властивість customCSS, однак для причин продуктивності рекомендується замість цього використовувати інтерфейс налаштування віджета. Див. документацію з Custom CSS.

Відображення всіх коментарів одразу — вимкнути пагінацію Internal Link

Щоб відключити пагінацію і відобразити всі коментарі одразу, встановіть startingPage на -1.

Render All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": -1
8}];
9</script>
10

Запобігти новим коментарям верхнього рівня Internal Link

Встановлення noNewRootComments в true призведе до того, що віджет приховає область відповіді на кореневі коментарі, але все ще дозволятиме користувачам відповідати на дочірні коментарі. Ви, наприклад, можете встановити це умовно під час завантаження сторінки, щоб лише деяким користувачам дозволити залишати коментарі верхнього рівня.

Prevent New Root Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "noNewRootComments": true
8}];
9</script>
10

Максимальна глибина відповіді Internal Link

За замовчуванням FastComments дозволяє необмежену глибину вкладення відповідей, створюючи структуру нитки, де користувачі можуть нескінченно відповідати на відповіді.

Опція maxReplyDepth дозволяє обмежити, наскільки глибоко можуть розвиватися ланцюжки відповідей. Коли досягається максимальна глибина, користувачі більше не бачитимуть кнопку відповіді для коментарів на цьому рівні.

Limiting Reply Depth to 2 Levels
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "maxReplyDepth": 2
8}];
9</script>
10

With maxReplyDepth set to 2:

  • Користувачі можуть залишати коментарі на верхньому рівні (глибина 0)
  • Користувачі можуть відповідати на коментарі верхнього рівня (глибина 1)
  • Користувачі можуть відповідати на ці відповіді (глибина 2)
  • Подальші відповіді не дозволені за межами глибини 2

Встановлення значення 1 дозволить лише відповіді на коментарі верхнього рівня, створюючи більш пласку структуру обговорення.

Встановлення maxReplyDepth у 0 відключить усі відповіді, дозволяючи лише коментарі верхнього рівня. Якщо не вказано, відповіді можуть вкладатися без обмежень.

Попереджати перед виходом з несенданим коментарем Internal Link

За замовчуванням, якщо користувач вводить коментар і потім оновлює сторінку, закриває вкладку або переходить на іншу сторінку до відправки, чернетка втрачається без повідомлення.

Встановлення warnOnUnsavedComment у true змушує браузер запитати користувача про підтвердження перед виходом зі сторінки, доки будь-яке поле коментаря або редагування, що триває, містить текст. Після відправки коментаря текст очищується, тому запит не відображається.

Попередження про незбережений коментар
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "warnOnUnsavedComment": true
8}];
9</script>
10

Запит використовує вбудований діалог браузера. Сучасні браузери показують власний текст і ігнорують користувацькі повідомлення, тому повідомлення не можна налаштувати.

Ця опція завантажує невелике розширення за запитом, тому вона не додає нічого до віджету для сайтів, які її не вмикають.

Огляд єдиного входу (SSO) Internal Link

SSO, або single-sign-on (єдиний вхід), — це набір угод, що дозволяють вам або вашим користувачам використовувати FastComments без необхідності створювати ще один обліковий запис.

Якщо ви не дозволяєте анонімне коментування, для коментування через FastComments потрібен обліковий запис. Ми робимо процес реєстрації дуже простим — користувачеві достатньо вказати свою електронну пошту під час коментування. Однак ми розуміємо, що навіть це є зайвим тертям, якого деякі сайти хочуть уникнути.

Ми можемо зменшити це тертя, маючи лише один потік входу для всього вашого сайту.

Як це отримати?

Усі типи облікових записів наразі мають доступ до SSO. Однак максимальна кількість користувачів SSO залежатиме від вашого пакета. Як і з іншими функціями, плани Pro і вище надають пряму підтримку розробки.

Порівняймо варіанти, а потім розгляньмо деталі кожного з них.

Міграція користувачів і коментарів

Під час міграції з платформи з SSO, як-от Disqus, у вас уже є користувачі та їхні коментарі.

Коментарі імпортуються як частина вашої міграції — через API, наш Import UI або службу підтримки. Import UI є кращим варіантом, якщо він підтримує платформу, з якої ви мігруєте, оскільки він включає обробку помилок, вилучення та завантаження аватарів і медіа, а також систему моніторингу пакетних завдань.

Самі користувачі додаються автоматично під час першого перегляду гілок коментарів. Крім того, їх можна попередньо додати через API, але ця робота не має багато переваг.

Якщо коментарі імпортовано, а користувачі SSO не додані вручну через API, то коментарі буде автоматично мігровано до облікового запису користувача під час його першого створення, коли він перегляне будь-яку гілку коментарів. Після цього він зможе керувати, редагувати та видаляти коментарі, які написав спочатку.

Автоматична міграція виконується за електронною поштою або іменем користувача. Деякі платформи не надають електронні пошти під час експорту, як-от Disqus, тому в цьому випадку ми використовуємо ім'я користувача.

  • Поки ви передаєте відповідне ім'я користувача та електронну пошту в SSO-пейлоаді, ми додамо електронну пошту до окремих об'єктів коментарів, щоб сповіщення та згадки працювали.

Якщо ви хочете імпортувати свої коментарі та користувачів одночасно, співпрацюйте зі службою підтримки, щоб мігрувати коментарі до відповідних облікових записів користувачів після імпорту користувачів через API.

Отже, найпростіший шлях для міграції виглядає так:

  1. Імпортуйте коментарі.
    1. Аватари та інші медіа мігруються автоматично, якщо використовувати Import UI у Manage Data -> Imports.
  2. Налаштуйте Secure або Simple SSO.
  3. Дозвольте міграції відбуватися для кожного користувача автоматично під час його першого входу.
    1. Зазвичай це додає менше секунди до часу завантаження сторінки, якщо користувач має менше 50 тис. коментарів.

Користувачі WordPress

Якщо ви використовуєте наш плагін WordPress, то писати код не потрібно! Просто перейдіть на сторінку адміністрування плагіна, натисніть SSO Settings, а потім Enable.

Це перенесе вас до майстра з однією кнопкою, який створить ваш API-ключ, надішле його на вашу інсталяцію WordPress і увімкне SSO. Ми об'єднали це в одне натискання кнопки для вас.

Зверніть увагу, що якщо ви встановлюєте плагін уперше, вам доведеться пройти процес налаштування, перш ніж ви побачите сторінку адміністрування з кнопкою SSO Settings.

WordPress SSO - Модератори

Зверніть увагу, що наразі, щоб значок "Moderator" відображався поруч із вашими модераторами, коли вони коментують через плагін FastComments для WordPress, вони також повинні бути додані як модератори в панелі керування FastComments і мати підтверджену електронну пошту.

Користувацькі інтеграції

Для користувацьких інтеграцій є два варіанти.

Варіант перший - Secure SSO

З Secure SSO FastComments знає, що користувач, який коментує, голосує та читає коментарі, є справжнім користувачем вашого сайту.

Поки ви створюєте дійсний пейлоад, користувач завжди матиме безперебійний досвід коментування.

З Secure SSO пейлоад SSO створюється на сервері з використанням HMAC-автентифікації, а потім передається віджету на клієнті.

З Secure SSO обліковий запис користувача повністю відокремлений від решти бази користувачів FastComments. Це означає, що якщо у нас є два партнери Company A та Company B, кожен може мати користувача SSO з іменем "Bob".

Вимоги

  • Деякі базові знання про серверну розробку.
  • Деякі базові знання про роботу із секретними API-ключами.
  • Деякі базові знання про розробку API або серверний рендеринг.

Переваги

  • Безпечно.
  • Безперебійний досвід коментування.

Недоліки

  • Вимагає серверної розробки.

Оновлення даних користувача

З Secure SSO щоразу, коли ви передаєте пейлоад користувача sso, ми оновлюємо його обліковий запис найсвіжішою інформацією. Наприклад, якщо користувач має ім'я X, а ви передаєте Y у пейлоаді SSO, його ім'я стане Y.

Якщо ви хочете видалити значення за допомогою цього підходу, встановіть їх у null (не undefined).

Secure SSO API

Ми також надаємо API для взаємодії з користувачами SSO. Дивіться документацію.

Зверніть увагу, що під час використання Secure SSO користувачі автоматично створюються у фоновому режимі під час завантаження сторінки. Вам не потрібно масово імпортувати своїх користувачів.

Варіант другий - Simple SSO

Альтернативою Secure SSO є проста передача інформації про користувача віджету коментування.

Надання електронної пошти з Simple SSO не є обов'язковим, однак без неї їхні коментарі відображатимуться як "Unverified".

Зверніть увагу! З початку 2022 року імена користувачів з Simple SSO не повинні бути унікальними в межах усієї FastComments.com.

В ідеалі Simple SSO слід обирати лише під час розробки на платформі, яка не надає доступу до серверної частини.

Вимоги

  • Деякі базові знання про клієнтську розробку.
  • Потрібно знати принаймні електронну пошту користувача.

Переваги

  • Просто.
  • Уся активність все ще перевіряється.
  • Користувач ніколи не вводить своє ім'я користувача чи електронну пошту.

Недоліки

  • Менш безпечно, ніж Secure SSO, оскільки клієнтський пейлоад може бути підмінено, щоб стати будь-яким користувачем.

Simple SSO API

Користувачі, автоматично створені через потік Simple SSO, зберігаються як об'єкти SSOUser. До них можна отримати доступ і керувати ними через API SSOUser. Дивіться документацію.

Користувацькі інтеграції — міграція з Disqus SSO Internal Link

Найбільші відмінності між Disqus і FastComments Secure SSO полягають у тому, що Disqus використовує SHA1 для шифрування, тоді як ми використовуємо SHA256. Це означає, що міграція з Disqus проста - змініть алгоритм хешування з SHA1 на SHA256 і оновіть імена властивостей, які передаються до UI.

Користувацькі інтеграції — міграція з Commento SSO Internal Link

Commento використовує радикально інший підхід до SSO - вони вимагають, щоб у вас був endpoint, який вони викликають для аутентифікації користувача.

FastComments робить навпаки - просто закодуйте й захешуйте інформацію про користувача, використовуючи ваш секретний ключ, і передайте її.

Зворотні виклики Internal Link

Всі бібліотеки для віджету коментарів (наразі Angular, React, Vue) підтримують зворотні виклики.

Зворотні виклики вказуються в об'єкті конфігурації й мають однакову сигнатуру для кожної бібліотеки.

Підтримуються такі зворотні виклики:

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

Точні сигнатури можна знайти в визначеннях TypeScript.

Ось приклад з усіма зворотними викликами:

Приклади зворотних викликів
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: 'demo',
8 onInit: function () {
9 console.log('Library started to fetch comments!');
10 },
11 onAuthenticationChange: function (eventName, userObj) {
12 console.log('User authenticated!', eventName, userObj);
13 },
14 onRender: function () {
15 console.log('Render event happened!');
16 },
17 commentCountUpdated: function (newCount) {
18 console.log('New comment count:', newCount);
19 },
20 onReplySuccess: function (comment) {
21 console.log('New comment saved!', comment);
22 },
23 onVoteSuccess: function (comment, voteId, direction, status) {
24 console.log('New vote saved!', comment, voteId, direction, status);
25 },
26 onImageClicked: function (src) {
27 console.log('Image clicked!', src);
28 },
29 onOpenProfile: function (userId) {
30 console.log('User tried to open profile', userId);
31 // return true; // повернути true, щоб запобігти поведінці за замовчуванням (відкриттю профілю користувача fastcomments.com).
32 },
33 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
34 console.log('Trying to submit comment', comment);
35 setTimeout(function() { // емулюємо асинхронну поведінку (виклик API тощо).
36 if(confirm('Should submit?')) {
37 continueSubmitFn();
38 } else {
39 cancelFn('Some optional error message');
40 }
41 }, 1000);
42 },
43 onCommentsRendered: function(comments) {
44 // comments відсортовано за сортуванням за замовчуванням на сторінці, яке може бути Most Relevant (наприклад: найбільше проголосовані тощо), або Newest First
45 const topCommentInList = comments[0];
46 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
47 }
48 }];
49</script>
50

Назви сторінок Internal Link

Поточний заголовок сторінки асоціюється з вказаним urlId і зберігається для використання в інструментах модерації.

За замовчуванням він отримується з document.title.

Якщо бажано, власний заголовок сторінки можна вказати таким чином:

Specifying The Page Title
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "pageTitle": "Article 42"
8}];
9</script>
10

Кількість коментарів та підрахунок усіх вкладених відповідей Internal Link

Кількість коментарів, яка відображається у верхній частині віджета коментарів, може показувати або всі "top-level" коментарі, тобто ті відповіді, що є відповідями безпосередньо до сторінки або статті, або вона може бути підрахунком усіх вкладених коментарів.

За замовчуванням це true - це підрахунок останнього варіанту - усіх коментарів. У старіших версіях віджета коментарів значення за замовчуванням було false.

Ми можемо змінити поведінку так, щоб вона була підрахунком усіх вкладених коментарів, встановивши прапорець countAll в true.

Counting All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": true
8}];
9</script>
10

Якщо ми хочемо, щоб підрахунок відображав лише коментарі верхнього рівня, ми встановлюємо прапорець у false.

Counting Top Level Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": false
8}];
9</script>
10

Наразі це не можна налаштувати без змін у коді.

Згадка ідентифікаторів груп Internal Link

Список id для використання в автозаповненні @mentions. Корисно, коли потрібно запобігти відміченню користувачів, які не мають спільних груп.

Коли вказано, в автозаповненні після введення символу @ будуть показані лише користувачі з інших груп.

Limit Groups for Mentions
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13