Add Comments to GoHighLevel Sites

Первым делом мы отредактируем настройки нашего курса.

Для этого откройте курс и нажмите Edit Details.

Редактировать сведения курса

Далее нам нужно открыть настройки Advanced:

Открыть расширенные настройки

Мы добавим наш код в раздел Tracking Code. Перейдите в этот раздел и нажмите Footer Code.

Теперь мы собираемся сгенерировать ваш кастомный код FastComments. Используйте мастер ниже, чтобы настроить, как вы хотите, чтобы FastComments работал на вашем сайте GoHighLevel:

Различные типы блока комментариев

Вы можете изменить строку TYPE = 'commenting', чтобы переключить используемый продукт (например, можно поменять на live для потокового чата или collab для коллаб- чата).

Размещение блока комментариев в нужном месте

Допустим, вы хотите разместить блоки комментариев в определённых частях страницы, а не в местах по умолчанию. Измените эту строку:

const TARGET_ELEMENT_ID = ''; // set to use target div mode

На:

const TARGET_ELEMENT_ID = 'fc_box'; // set to use target div mode

Затем в редакторе GHL нажмите кнопку "code" и добавьте туда, где вы хотите, чтобы отображались комментарии:

DIV FastComments для GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Разный тип блока комментариев для каждой страницы

Допустим, вы хотите, чтобы пользователи выделяли и обсуждали фрагменты текста, или использовать интерфейс потокового чата.

Сначала выполните шаги выше в разделе «Размещение блока комментариев в нужном месте».

Обратите внимание, что в этом небольшом фрагменте есть type="commenting".

Если вы хотите включить, например, collab chat, измените type на type="collab".

Показывать только на определённых страницах

Если вы не устанавливаете TARGET_ELEMENT_ID, вы можете вместо этого настроить переменную VALID_PATTERNS, чтобы задать, на каких URL-маршрутах должны отображаться комментарии. По умолчанию они будут отображаться на страницах, в URL которых содержится /post.

Настройка Collab Chat

Вы можете указать collab chat добавлять совместный функционал только вокруг HTML внутри определённой области, например, предположим, вы добавили код футера выше и затем добавили этот div в содержимое поста/страницы, чтобы включить collab chat:

Коллаб-чат с указанным содержимым

Copy

1

2<div

3 id="fc_box"

4 type="collab"

5 urlid="custom-chat-id"

6><p>This content will have collab chat!</p></div>

7

Тогда элемент параграфа внутри <div> будет иметь включённый collab chat, и ничего больше на странице. Если вы не поместите никакого содержимого в <div>, то collab chat будет включён для всего тела поста.

Теперь, когда мы скопировали сниппет, вставьте его в раздел Footer Code, как показано:

Вставить код

Вот и всё! Теперь в ваш курс GoHighLevel должны быть добавлены живые комментарии.

Успех

Если вы столкнулись с ошибкой 'permission denied' или хотите настроить FastComments, читайте далее.

FastComments разработан так, чтобы его можно было настроить под ваш сайт.

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

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

Открыть редактор

Теперь найдите место на странице, где хотите добавить комментарии. Передвиньте курсор к концу этой области. Появится значок +:

Добавить секцию

Если кликнуть на него, появится запрос, сколько столбцов должно быть в новом разделе. Выберем 1 COLUMN:

Добавить столбец

Теперь, если подвести курсор к новой строке с одним столбцом, появится опция добавления элемента. Нажмите на неё:

Добавить элемент

Прокрутите вниз и выберите CUSTOM JS/HTML:

Выберите CUSTOM JS/HTML

Теперь выберите наш новый элемент и слева нажмите Open Code Editor:

Открыть редактор кода

Пора скопировать наш код. Скопируйте следующий код:

Код комментариев сайта GoHighLevel

Copy

1

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

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const tenantId = 'demo';

7 const SCRIPT_ID = 'fastcomments-embed';

8 const WIDGET_ID = 'fastcomments-widget';

9

10 let lastInstance;

11 let currentUrlId;

12 let rendered = false;

13

14 // Модификации History API для поддержки SPA

15 const oldPushState = history.pushState;

16 history.pushState = function pushState() {

17 const ret = oldPushState.apply(this, arguments);

18 window.dispatchEvent(new Event('pushstate'));

19 window.dispatchEvent(new Event('locationchange'));

20 return ret;

21 };

22

23 const oldReplaceState = history.replaceState;

24 history.replaceState = function replaceState() {

25 const ret = oldReplaceState.apply(this, arguments);

26 window.dispatchEvent(new Event('replacestate'));

27 window.dispatchEvent(new Event('locationchange'));

28 return ret;

29 };

30

31 window.addEventListener('popstate', () => {

32 window.dispatchEvent(new Event('locationchange'));

33 });

34

35 function getContainer() {

36 return document.getElementById(WIDGET_ID);

37 }

38

39 // Функция, которая гарантирует загрузку скрипта

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Проверяем, существует ли уже тег скрипта

43 let scriptTag = document.getElementById(SCRIPT_ID);

44

45 if (!scriptTag) {

46 console.log('FastComments: Script tag not found, adding dynamically...');

47 scriptTag = document.createElement('script');

48 scriptTag.id = SCRIPT_ID;

49 scriptTag.src = 'https://cdn.fastcomments.com/js/embed-v2.min.js';

50 scriptTag.async = true;

51

52 scriptTag.onload = () => {

53 console.log('FastComments: Script loaded successfully');

54 resolve();

55 };

56

57 scriptTag.onerror = () => {

58 console.error('FastComments: Failed to load script');

59 resolve(); // Resolve anyway to prevent hanging

60 };

61

62 document.head.appendChild(scriptTag);

63 } else if (window.FastCommentsUI) {

64 // Тег скрипта существует и уже загружен

65 console.log('FastComments: Script already loaded');

66 resolve();

67 } else {

68 // Тег скрипта существует, но ещё не готов

69 console.log('FastComments: Waiting for script to initialize...');

70 scriptTag.addEventListener('load', () => {

71 resolve();

72 });

73

74 // Запасной вариант на случай, если скрипт уже загружается

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Таймаут через 10 секунд

83 setTimeout(() => {

84 clearInterval(checkInterval);

85 console.warn('FastComments: Script load timeout');

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Основная функция рендеринга

93 async function render() {

94 rendered = false;

95

96 // Убедиться, что скрипт загружен перед продолжением

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Дополнительная проверка доступности FastCommentsUI

108 if (!window.FastCommentsUI) {

109 console.log('FastComments: not ready, waiting...');

110 setTimeout(tryNext, 300);

111 return;

112 }

113

114 console.log('FastComments: Target element found, initializing...');

115

116 // Получаем текущий URL как urlId

117 const newUrlId = window.location.pathname;

118

119 // Проверяем, нужно ли перерендерить (urlId изменился или это первый рендер)

120 if (currentUrlId !== newUrlId || !lastInstance) {

121 currentUrlId = newUrlId;

122

123 // Уничтожаем предыдущий экземпляр, если он существует

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Очищаем содержимое контейнера

127 container.innerHTML = '';

128 }

129

130 // Готовим конфигурацию

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

136 console.log('FastComments: Using urlId:', newUrlId);

137

138 // Инициализируем FastComments

139 lastInstance = window.FastCommentsUI(container, config);

140 rendered = true;

141 } else {

142 console.log('FastComments: Already rendered with same urlId');

143 rendered = true;

144 }

145

146 // Следим за тем, был ли контейнер удалён или изменился ли URL

147 const interval = setInterval(function () {

148 const currentContainer = getContainer();

149 if (!currentContainer) {

150 console.log('FastComments: Container removed, will retry...');

151 rendered = false;

152 currentUrlId = null;

153 tryNext();

154 clearInterval(interval);

155 } else {

156 const newUrlId = window.location.pathname;

157 if (newUrlId !== currentUrlId) {

158 console.log('FastComments: URL changed, re-rendering...');

159 rendered = false;

160 tryNext();

161 clearInterval(interval);

162 }

163 }

164 }, 1000);

165 } else {

166 console.log('FastComments: Target element not found, waiting...');

167 setTimeout(tryNext, 300);

168 }

169 }

170

171 tryNext();

172 }

173

174 // Начальный рендер, когда DOM готов

175 if (document.readyState === 'loading') {

176 document.addEventListener('DOMContentLoaded', render);

177 } else {

178 render();

179 }

180

181 // Перерендер при изменении местоположения (для SPA)

182 window.addEventListener('locationchange', function () {

183 console.log('FastComments: Location changed, updating...');

184 render();

185 });

186 })();

187</script>

188

Вставьте это в окно редактора, которое мы открыли:

Вставить код

Теперь мы можем нажать Yes, Save в правом нижнем углу этого окна.

Вверху страницы теперь нажмите Save, а затем Preview.

Вот и всё! Теперь на ваш сайт GoHighLevel должны быть добавлены комментарии в реальном времени.

Успех

Если вы столкнулись с ошибкой 'permission denied', или хотите настроить FastComments, читайте дальше.

FastComments разработан таким образом, чтобы его можно было настроить под ваш сайт.

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