Add Comments to GoHighLevel Sites

Спочатку ми відредагуємо налаштування нашого курсу.

Для цього відкрийте курс, і натисніть Edit Details.

Редагувати деталі курсу

Далі потрібно відкрити налаштування Advanced:

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

Ми додаватимемо наш код у розділ Tracking Code. Перейдіть до цього розділу та натисніть Footer Code.

Тепер ми згенеруємо ваш власний код FastComments. Використайте майстер нижче, щоб налаштувати, як ви хочете, щоб FastComments працював на вашому сайті GoHighLevel:

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

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

Розміщення блока коментарів там, де ви хочете

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

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

На:

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

Потім у редакторі GHL натисніть кнопку "code" і додайте туди, куди ви хочете, щоб з'являлися коментарі:

FastComments Div для 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 повинні відображатися коментарі. За замовчуванням вони будуть показані на сторінках, які містять /post у URL.

Налаштування collab chat

Ви можете вказати collab chat додавати спільні функції лише навколо HTML всередині певної області. Наприклад, припустимо, ви додали код футера вище, а потім додаєте цей div у вміст запису/сторінки, щоб увімкнути collab chat:

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 chat, і нічого іншого на сторінці. Якщо ви не помістите жодного вмісту в <div>, тоді collab chat буде увімкнено в усьому тілі запису.

Тепер, коли ми скопіювали наш фрагмент, вставте його в розділ Footer Code як показано:

Вставте код

Ось і все! Тепер у вашому курсі GoHighLevel має з'явитися можливість коментування в режимі реального часу.

Успіх

Якщо ви зіткнулися з помилкою «доступ заборонено», або хочете налаштувати 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, щоб уникнути зависання

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 розроблено так, щоб його можна було налаштувати відповідно до вашого сайту.

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