Add Live Discussions to Super.So Sites

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

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

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

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

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

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

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

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

Код Super.so FastComments Collab Chat

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

Now paste in the Body area:

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

If you see a "this is a demo message" after pasting the code:

• Переконайтеся, що ви увійшли у свій обліковий запис на fastcomments.com.
• Переконайтеся, що у вас увімкнено сторонні куки.
• Потім оновіть цю сторінку та скопіюйте фрагмент коду ще раз. Він має містити 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 розроблено так, щоб його можна було налаштувати відповідно до вашого сайту.

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