Додайте живі обговорення до сайтів Super.so

Спочатку потрібно відкрити редактор коду. Якщо ви хочете додати FastComments на всі сторінки, просто виберіть Code у нижньому лівому куті:

Відкрийте налаштування коду

Якщо ви хочете додати його на конкретну сторінку, виберіть Edit Custom Code у налаштуваннях цієї сторінки.

Тепер оберемо вкладку Body. Це важливо! Установлення фрагмента коду в Head не працює.

Виберіть вкладку Body

Тепер ви готові до кроку 2.

На наступному кроці вам потрібно скопіювати наведений нижче готовий код віджета.

Оскільки ви увійшли на FastComments.com, наведений нижче фрагмент коду вже міститиме інформацію про ваш обліковий запис. Давайте скопіюємо його:

Код FastComments Collab Chat для Super.so

Copy

1

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

3<script>

4 (function () {

5 let currentPathname = window.location.pathname;

6 let currentWidget = null;

7 let currentTopBar = null;

8

9 function load() {

10 if (!window.FastCommentsCollabChat) {

11 console.log('...no script, trying again...');

12 return setTimeout(load, 100);

13 }

14

15 const target = document.querySelector('.super-content');

16 if (!target || !target.innerHTML || target.innerHTML.length < 100) {

17 console.log('...no content, trying again...');

18 return setTimeout(load, 100);

19 }

20

21 // Очистити наявний екземпляр

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Очистити наявну верхню панель, якщо вона існує

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Створити нову верхню панель

32 const topBarTarget = document.createElement('div');

33 target.parentNode.insertBefore(topBarTarget, target);

34 topBarTarget.style.maxWidth = 'var(--layout-max-width)';

35 topBarTarget.style.margin = '0 auto';

36 currentTopBar = topBarTarget;

37 currentWidget = target;

38

39 // Ініціалізувати FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Оновити поточний pathname

46 currentPathname = window.location.pathname;

47 }

48

49 // Початкове завантаження

50 load();

51

52 // Перевіряти зміни кожні 500 мс

53 setInterval(() => {

54 // Перезавантажити, якщо pathname змінився

55 if (window.location.pathname !== currentPathname) {

56 console.log('Pathname changed, reloading...');

57 load();

58 return;

59 }

60

61 // Перезавантажити, якщо віджет було видалено

62 if (currentWidget && !currentWidget.parentNode) {

63 console.log('Widget removed, reloading...');

64 load();

65 return;

66 }

67

68 // Перезавантажити, якщо контейнер було очищено

69 const target = document.querySelector('.super-content');

70 if (target && target.innerHTML.length < 100) {

71 console.log('Container emptied, reloading...');

72 load();

73 }

74 }, 500);

75 })();

76</script>

77

Тепер вставте код у область Body:

Вставлений код

Якщо після вставки коду ви бачите повідомлення "this is a demo message":

• Переконайтеся, що ви увійшли у свій обліковий запис fastcomments.com.
• Переконайтеся, що у вас увімкнені сторонні файли cookie.
• Потім оновіть цю сторінку та скопіюйте фрагмент коду ще раз. У ньому має бути заповнений tenantId ідентифікатором вашого тенанта.

Додавання віджета живих коментарів до ваших статей Notion на Super.so

На додаток до Collab Chat, ви можете додати традиційний віджет коментарів внизу ваших статей Notion. Це дозволяє читачам залишати коментарі та вести обговорення щодо всієї статті.

Кроки встановлення

Скопіюйте наведений код і вставте його в секцію Body налаштувань вашого сайту Super.so:

Віджет живих коментарів FastComments для Super.so

Copy

1

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

3<script>

4 (function () {

5 let currentPathname = window.location.pathname;

6 let currentWidget = null;

7

8 function load() {

9 if (!window.FastCommentsUI) {

10 console.log('...no script, trying again...');

11 return setTimeout(load, 100);

12 }

13

14 const contentArea = document.querySelector('.notion-root');

15 if (!contentArea || !contentArea.innerHTML || contentArea.innerHTML.length < 100) {

16 console.log('...no content, trying again...');

17 return setTimeout(load, 100);

18 }

19

20 // Очистити наявний екземпляр

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Створити нову ціль

26 const target = document.createElement('div');

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Ініціалізувати FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Оновити поточний pathname

37 currentPathname = window.location.pathname;

38 }

39

40 // Початкове завантаження

41 load();

42

43 // Перевіряти на зміни кожні 500 мс

44 setInterval(() => {

45 // Перезавантажити, якщо pathname змінився

46 if (window.location.pathname !== currentPathname) {

47 console.log('Pathname changed, reloading...');

48 load();

49 return;

50 }

51

52 // Перезавантажити, якщо віджет було видалено

53 if (currentWidget && !currentWidget.parentNode) {

54 console.log('Widget removed, reloading...');

55 load();

56 return;

57 }

58

59 // Перезавантажити, якщо контейнер спорожнів

60 const contentArea = document.querySelector('.notion-root');

61 if (contentArea && contentArea.innerHTML.length < 100) {

62 console.log('Container emptied, reloading...');

63 load();

64 }

65 }, 500);

66 })();

67</script>

68

Важливі примітки

• Віджет коментарів з'явиться внизу ваших статей Notion
• Кожна сторінка отримає власну унікальну гілку коментарів на основі шляху URL
• Переконайтеся, що замінили "demo" на ваш фактичний tenant ID з вашого облікового запису FastComments
• Віджет автоматично обробляє динамічне завантаження сторінок Super.so

FastComments розроблено так, щоб його можна було налаштувати відповідно до вашого сайту.

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