Add Live Discussions to Super.So Sites

Сначала нужно открыть редактор кода. Если вы хотите добавить 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 // Обновить currentPathname

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 // Обновляем текущий путь

37 currentPathname = window.location.pathname;

38 }

39

40 // Первичная загрузка

41 load();

42

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

44 setInterval(() => {

45 // Перезагружаем, если путь изменился

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 разработан так, чтобы его можно было настроить в соответствии с вашим сайтом.

Если вы хотите добавить пользовательские стили или изменить конфигурацию, Ознакомьтесь с нашей документацией по настройке, чтобы узнать, как.