Add Comments to GoHighLevel Sites

Сначала мы собираемся изменить настройки нашего курса.

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

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

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

Открыть дополнительные настройки

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

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

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

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

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

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

const TARGET_ELEMENT_ID = ''; // установить для использования режима целевого div

На:

const TARGET_ELEMENT_ID = 'fc_box'; // установите для использования режима целевого div

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

Контейнер FastComments для GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

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

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

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

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

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

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

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

Настройка Collab-чата

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

Совместный чат с указанным содержимым

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-чат, и ничего больше на странице. Если вы не поместите никакого содержимого в <div>, тогда collab-чат будет включён для всего тела поста.

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

Вставьте код

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

Успешно

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

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

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

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

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

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

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

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

Добавить колонку

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

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

Прокрутите вниз и выберите 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 // Проверяем, существует ли уже тег script

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 // Тег script существует и уже загружен

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

66 resolve();

67 } else {

68 // Тег script существует, но еще не готов

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

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